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.

try to add app:contentInsetEnd="0dp" app:contentInsetEndWithActions="0dp" app:contentInsetLeft="0dp" app:contentInsetRight="0dp" app:contentInsetStart="0dp" app:contentInsetStartWithNavigation="0dp" in toolbar — Divyesh Patel, Aug 10 '17 at 13:37
In your first layout there, just get rid of the `LinearLayout`. `Toolbar` accounts for its child `View`s' `layout_gravity` when laying itself out. You don't need to wrap them in another `ViewGroup`. — Mike M., Aug 10 '17 at 23:43
@MikeM sorry , I do not get u,please help me to short out from this — Ravindra Kushwaha, Aug 11 '17 at 03:37
Remove the `LinearLayout` inside the `Toolbar` from the first layout you posted in the question. — Mike M., Aug 11 '17 at 03:40
OK.. I will try it as I will reach at office and let u know soon about it... Thanks for input — Ravindra Kushwaha, Aug 11 '17 at 03:42
No problem. [Here's a somewhat similar question](https://stackoverflow.com/q/41957875), and my answer there has an explanation of why that's not centering, and how exactly to setup the child `View`s, in case my comments aren't that clear. Do note that the `LinearLayout` there is used just to stack those two `TextView`s vertically. It doesn't fill the `Toolbar`, or hold everything in it. — Mike M., Aug 11 '17 at 04:05

score 0 · Answer 1 · answered Aug 10 '17 at 13:42

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>

Will you please give your @style/AppTheme.NoActionBar.PopupOverlay — Mohd Saquib, Aug 10 '17 at 13:48
@RavindraKushwaha i have posted second answer with complete toolbar layout its working please check... — Mohd Saquib, Aug 10 '17 at 13:54

score 0 · Answer 2 · answered Aug 10 '17 at 13:53

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>

I have tried urs second solution , but it also not working,Please check the output from above code. https://ibb.co/m7Zqzv — Ravindra Kushwaha, Aug 10 '17 at 13:57
i have once again mention code and screen shot what output is coming , i posted it — Mohd Saquib, Aug 10 '17 at 14:01

score 0 · Answer 3 · answered Aug 10 '17 at 14:00

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>

What i need @MohdSaquib that , Title should be in center and image at the right.. — Ravindra Kushwaha, Aug 10 '17 at 14:01
In my solution i think your requirement is fulfilling , it will not comes at centre perfectly because of action bar property and rest of the thing is shown as in image i share.4 — Mohd Saquib, Aug 10 '17 at 14:03
I need it center bro..That what i have asked the questin on SO.Thanks for urs value bale time — Ravindra Kushwaha, Aug 10 '17 at 14:09

score 0 · Accepted Answer · answered Aug 11 '17 at 06:08

@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.

Toolbar header's item alignment issue?

4 Answers4

Linked