Toolbar header's item alignment issue?

Question

Today i have stucked in one of the weird problem in Toolbar custom header.
I am using the TextView in the center and ImageView which is at the right of the Toolbar. So i have used below lines of code in xml , please check it once.

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:theme="@style/AppTheme.NoActionBar.AppBarOverlay">

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#3EC3D6"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/headerTxt"
                        style="@style/Base.TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="marquee"
                        android:gravity="center"
                        android:layout_gravity="center"
                        android:maxLines="1"
                        android:text="Tile"
                        android:textColor="@android:color/black" />


                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/chat_new_icon"
                        android:layout_gravity="right"
                        />

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

And getting these output from above code.

I have used the RelativeLayout for it to come out from this problem, But it also NOT worked.Please check the below code for it

<android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#3EC3D6"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay">

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

                    <TextView
                        android:id="@+id/headerTxt"
                        style="@style/Base.TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="marquee"
                        android:gravity="center"
                        android:layout_gravity="center"
                        android:layout_centerInParent="true"
                        android:maxLines="1"
                        android:text="Tile"
                        android:textColor="@android:color/black" />


                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/chat_new_icon"
                        android:layout_alignParentRight="true"
                        android:layout_gravity="right"
                        />

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

And getting another unexpected result please check it once.

I have already refer this solution but it is not working for me.Please check the link once.
1. First Link
2. Second Link
3. Third Link
4. Forth Link

What i need that TextView should at the center of the Toolbar and ImageView should at the right of the Toolbar.Please help me to short out from this problem.

Answer 1

Just update your code...edited your relative layout implementation

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

                    <TextView
                        android:id="@+id/headerTxt"
                        style="@style/Base.TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="marquee"
                        android:layout_centerInParent="true"
                        android:maxLines="1"
                        android:text="Tile"
                        android:textColor="@android:color/black" />


                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/chat_new_icon"
                        android:layout_toRightOf="@+id/headerTxt"
                         android:layout_centerVertical="true"
                        />

                </RelativeLayout>

Answer 2

@MikeM. suggestion has worked for me. For more detail on the issue please refer this link click here

What i have done to get rid off from the problem is that I have removed the LinearLayout inside the Toolbar and set the gravity of the view with help of android:layout_gravity, Please refer the below solution for it

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#3EC3D6"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay">

                <TextView
                    android:id="@+id/headerTxt"
                    style="@style/Base.TextAppearance.AppCompat.Medium"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:ellipsize="marquee"
                    android:maxLines="1"
                    android:text="Tile"
                    android:textColor="@android:color/black" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginRight="10dp"
                    android:src="@drawable/chat_new_icon" />


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

And getting the expected result from above code, please check it once.

Answer 3

This is working ...

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:local="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#3EC3D6"
    app:layout_collapseMode="pin"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light">

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

        <TextView
            android:id="@+id/headerTxt"
            style="@style/Base.TextAppearance.AppCompat.Medium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:text="Tile"
            android:textColor="@android:color/black" />


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/headerTxt"
            android:src="@drawable/delete_icon" />

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

Answer 4

This is what comes at my end

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:local="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#3EC3D6"
    app:layout_collapseMode="pin"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light">

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

        <TextView
            android:id="@+id/headerTxt"
            style="@style/Base.TextAppearance.AppCompat.Medium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:text="Tile"
            android:textColor="@android:color/black" />


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/headerTxt"
            android:src="@drawable/delete_icon" />

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