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">

Answer 1

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!:)

Answer 2

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.