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

score 1 · Accepted Answer · edited May 23 '17 at 12:33

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.

Are you referring to the xml abover where I do the include? Otherwise the parent object of the ImageButton is a tool bar — yams, Oct 16 '15 at 21:09
Sorry, I misread your question, I will edit my answer right now — Fabio Picchi, Oct 16 '15 at 21:17
That didn't work. That made a relative layout that was slightly smaller than the Toolbar in width and made the MenuButton ImageButton dissapear off the screen. — yams, Oct 16 '15 at 21:27
Sorry, I missed the properties' names. It's android:layout_alignParentRight="true" and android:layout_alignParentLeft="true" — Fabio Picchi, Oct 16 '15 at 21:37
Nope that still has a problem Basically if you go to the design view it shows the relative layout ending at the button edges. I'll post a pic. — yams, Oct 16 '15 at 21:44
Take a look at the blue border in the pic that is the relative layout — yams, Oct 16 '15 at 21:47
Just found this after a little bit of search. http://stackoverflow.com/questions/26455027/android-api-21-toolbar-padding I guess you have to set this contentInsetStart property to zero. — Fabio Picchi, Oct 16 '15 at 21:56
Ok So that others know can you update this answer and I'll accept it — yams, Oct 16 '15 at 22:14
Hey there, @HisnamewasRobertPaulson could you please accept the answer? :) — Fabio Picchi, Oct 19 '15 at 13:13

score 0 · Answer 2 · answered Sep 13 '16 at 10:19

0

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

answered Sep 13 '16 at 10:19

Kalkunen

43
1
7

No because everything Control wise is in the axml(outside of listeners or delegates). – yams Sep 21 '16 at 17:30

How to align UI controls on a Custom Toolbar in Android xml

2 Answers2