Aligning two imageviews properly in custom toolbar - android

Question

I want to display two ImageViews using my custom toolbar. This is the XML for my custom toolbar:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/white"
        app:titleTextColor="@color/colorPrimaryDark">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <ImageView
                android:id="@+id/tool_bar_backbutton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/cr_logo1"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                />
            <ImageView
                android:id="@+id/action_sos2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/sos_button_copy"

                android:gravity="end"
   />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

I want the first ImageView in the center (which it is coming correctly), and the second ImageView to the right.

Using the above XML displays the first ImageView but not second. If I use the second ImageView before the first, the second ImageView appears towards the left,and the first one towards the right, which is not what I want.

How do I write XML such that the first ImageView (@+id/tool_bar_backbutton) appears in center, and the second ImageView (@+id/action_sos2) appears at the right?

Answer 1

Try this,

Change LinearLayout to RelativeLayout and also remove spacing from left side of Toolbar by contentInset

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:contentInsetEnd="0dp"
        android:contentInsetLeft="0dp"
        android:contentInsetRight="0dp"
        android:contentInsetStart="0dp"
        app:contentInsetEnd="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetStart="0dp"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@android:color/white"
        app:titleTextColor="@color/colorPrimaryDark">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/tool_bar_backbutton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:src="@drawable/ic_share" />

            <ImageView
                android:id="@+id/action_sos2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentEnd="true"
                android:gravity="end"

                android:src="@drawable/ic_eye" />
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>