Action Bar Icon Positioning Android

Question

I have created a custom action bar for my Android App, with the help of the Toolbar class. It still shows the menu button to the left of the action bar, which converts to an arrow when click. I need to keep this icon as I have a side menu.

The problem I have is that the other icons I have, which are defined in my XML file are not centering correctly.

Below is an example of my aim, but it isn't a perfect example as there are 3 icons in the middle, not 2.

I am aware that the issue can be fixed quickly by just removing the android menu icon to the left, but I would like to keep it if possible. I am also aware that my icons are centering, but are centering based on the area to the right of the menu icon.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize"
    android:elevation="4dp">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginTop="0dp"
        android:gravity="center"
        android:layout_alignParentTop="true"
        android:id="@+id/top_bar"
        android:weightSum="3">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="1"
        >
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_weight="1"
            >


            <ImageButton
                android:id="@+id/icon1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="Icon1"
                android:src="@drawable/icon1"
                android:background="@null"
                android:tint="#ffffffff"
                android:layout_marginRight="10dp"
                android:alpha="0.2"/>


            <ImageButton
                android:id="@+id/icon2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/icon2"
                android:src="@drawable/icon2"
                android:background="@null"
                android:tint="#ffffff"
                android:maxHeight="25dp"
                />

            <ImageButton
                android:id="@+id/icon3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="icon3"
                android:src="@drawable/icon3"
                android:background="@null"
                android:tint="#ffffffff"
                android:layout_marginLeft="10dp"
                android:alpha="0.2" />
        </LinearLayout>



        <ImageButton
            android:id="@+id/icon4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:contentDescription="icon4"
            android:src="@drawable/icon4'"
            android:background="@null"
            android:tint="#FFFFFF"
            android:layout_marginTop="0dp"
            android:layout_weight="1"
            android:layout_gravity="right|center_vertical"
            />

    </LinearLayout>
</android.support.v7.widget.Toolbar>

Am I meant to be setting the position of these icons programatically and fixed positioned? Or am I totally missing something here?

Can someone point me in the right direction please. Thank you!

Answer 1

I solved my problem!

It seems that the outer LinearLayout was causing the issue, along with the outer Layout weights. So in the end I removed the outer LinearLayout and Layout weights, updated icon 4 to have a width of wrap content and the height fill parent and it worked.

For anyone interested please see the below code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="?android:attr/actionBarSize"
android:elevation="4dp">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:gravity="center"
    >
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="1"
        >


        <ImageButton
            android:id="@+id/icon1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="icon1"
            android:src="@drawable/icon1"
            android:background="@null"
            android:tint="#ffffffff"
            android:layout_marginRight="10dp"
            android:alpha="0.2"/>


        <ImageButton
            android:id="@+id/icon2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/icon2"
            android:src="@drawable/icon2"
            android:background="@null"
            android:tint="#ffffff"
            android:maxHeight="25dp"
            />

        <ImageButton
            android:id="@+id/icon3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="icon3"
            android:src="@drawable/icon3"
            android:background="@null"
            android:tint="#ffffffff"
            android:layout_marginLeft="10dp"
            android:alpha="0.2" />
    </LinearLayout>



    <ImageButton
        android:id="@+id/icon4"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:contentDescription="icon4"
        android:src="@drawable/icon4"
        android:background="@null"
        android:tint="#FFFFFF"
        android:layout_marginTop="0dp"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_gravity="right|center_vertical"
        />