xamarin.android - How to align UI controls on a Custom Toolbar in Android xml


Question: 

I'm creating a layout in Xamarin.Android and I'm working on a custom Toolbar with an image button a TextView and another label. What I need to do is Make sure the imagebutton BackButton is left aligned all the way to the left of the parent Contain, the TextView is Center Aligned and the MenuButton Image Button is Right Aligned all the way to the right of the parent container. Below you'll see my view in Design mode:

axml Code :

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ToolBar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"
    android:popupTheme="@android:style/ThemeOverlay.Material.Light">
    <ImageButton
        android:id="@+id/BackButton"
        android:layout_width="wrap_content"
        android:background="@drawable/RedButton"
        android:layout_height="wrap_content"
        android:layout_marginLeft="1dp"
        android:src="@drawable/back48x48"
        style="@style/back_button_text" />
    <TextView
        android:id="@+id/AppNameView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="#ffffff"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="12dp"
        android:textSize="25dp"
        android:text="Just a Label ok" />
    <ImageButton
        android:id="@+id/MenuButton"
        android:layout_width="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_centerVertical="true"
        android:background="@drawable/RedButton"
        android:layout_alignParentRight="true"
        android:gravity="right"
        android:layout_height="wrap_content"
        android:src="@drawable/menu48x48"
        style="@style/menu_button_text" />
</Toolbar>

Just curious on the best way to do this.

The way this is getting called in another axml in the include below :

RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:gravity="center_vertical|center_horizontal">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:rowCount="3"
        android:columnCount="3">

enter image description here




2 Answers: 

Put a RelativeLayout inside your Toolbar and do the following:

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ToolBar"
    android:contentInsetStart="0dp"
    android:contentInsetLeft="0dp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"
    android:popupTheme="@android:style/ThemeOverlay.Material.Light">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    <ImageButton
        android:id="@+id/BackButton"
        android:layout_width="wrap_content"
        android:background="@drawable/RedButton"
        android:layout_height="wrap_content"
        android:layout_marginLeft="1dp"
        android:src="@drawable/back48x48"
        android:layout_alignParentLeft="true"
        style="@style/back_button_text" />
    <TextView
        android:id="@+id/AppNameView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="#ffffff"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="12dp"
        android:textSize="25dp"
        android:text="Just a Label ok" />
    <ImageButton
        android:id="@+id/MenuButton"
        android:layout_width="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_centerVertical="true"
        android:background="@drawable/RedButton"
        android:layout_alignParentRight="true"                      
        android:layout_height="wrap_content"
        android:src="@drawable/menu48x48"
        style="@style/menu_button_text" />
    </RelativeLayout>
</Toolbar>

The alignParentLeft property on the back button and alignParentRight on on the other button guarantee that they will stick to the left and right of the RelativeLayout containing them. It wasn't working before because the Toolbar isn't a RelativeLayout.

To remove the default margin for the Toolbar, follow the instructions on this question: Android API 21 Toolbar Padding

The properties contentInsetStart and contentInsetLeft must be zero.

 

I know this has been answered, but could't you just use layout_gravity insteadof relativelayout??

like:

  android:layout_gravity="right"
  android:layout_gravity="center"
  android:layout_gravity="left"

I write this, because if you want to add stuff to toolbar later in code, it would push the relative layout to the side, with all its content.... I think so at least!:)

 

More Articles


Smooth keydown animation on Canvas in JavaScript

I'm very new to programming and I'm trying to create some code that will allow me to move a square around the Canvas by pressing arrow keys. I'm able to get the square to move, but its motion isn't very smooth. I have it moving by increments of 10 pixels at a time, so I understand why it feels kind

android - hide toolbar when collapsing collapsingtoobarlayout

What I am trying to achieve is hide the collapsingtoolbarlayout when scrolling my recyclerview and collapse the maintoolbar if scrolled further. but I can achieve only upto this http://i.imgur.com/t6wTW5H.gif.<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="htt

javascript - get a smooth animation for a canvas game

How to get a better animation, dinamically, even when browser is busy or idle, for different devices which have different hardware capacity.I have tried many ways and still cannot find the right way to make the game to display a better animation.This is what i tried:var now;var then = Date.now();var


android - How to create bottomsheet with toolbar when expanded,

I want to create bottom sheet layout, which when expanded to full screen should display toolbar. I have used following code but it is displaying toolbar even if its not expanded to full screen.<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:an

python - Mayavi: Customize toolbar

Is there a way to customize the default toolbar of a mayavi scene? I would like to delete some buttons as I don't need them (e.g. the save button). Here you can see which toolbar I am talking about:The code is just an example code:import osos.environ['ETS_TOOLKIT'] = 'qt4'from pyface.qt import QtGui

c++ - Windows Toolbar - Controlling button size and padding

I'm trying to understand the behaviour of a Windows toolbar - in particular how the following values interact:the size of the bitmap image usedthe effective size of a toolbar buttonthe padding between the image and the button edgethe height of the toolbarText displayed by a button is not relevant in


compact framework - Toolbar button sizes in windows mobile 6.5.3

We have a VB.net CF2.0 Apllication that up until now has run on windows mobile platforms from 2003 to 6.0 without any major issues. Our current team use HP iPAQ devices running winodws 6.0 and everything runs fine. There is a good, hardware related reson why we use these devices. We are looking to u

wpf - Giving a stackPanel the same LinearGradientBrush as the toolbar has by default

I have two ToolBars side by side (I had to do that so I could align buttons right and left)But now, I have to add some text that can be aligned right left or center between both toolbars. I added the text in a TextBlock inside a StackPanel disposed on a Grid at the second position (between the toolb

formatting - Excel 2007 floating format toolbar customisation

Is it possible in Excel 2007 to customise the floating format bar that is shown when you right-click on a cell? To avoid confusion, I don't mean the "Cell" commandbar menu, but the second floating toolbar with formatting buttons.e.g. is it possible to add a Styles dropdown, or have any other text al

jquery - CSS for toolbar with UI Slider centered between left and right buttons

I'm attempting to create a 100% width toolbar. This toolbar needs to have a variable number of buttons aligned to the left side, as well as a variable number of buttons aligned to the right. That's the easy part.But now I want to put a jQuery UI slider in the center that takes up the full remaining