Custom Toolbar Views not centered

Question

When using ActionBarDrawerToggle with my custom Toolbar, the TextViews in the Toolbar are no longer centered.

main_layout.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/toolbar" />

        <FrameLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize"
            android:fitsSystemWindows="true" />
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />

</android.support.v4.widget.DrawerLayout>

toolbar.xml

<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="?attr/colorPrimaryDark"
    android:elevation="5dp"
    android:minHeight="?attr/actionBarSize"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center_horizontal|center_vertical"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvNavTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorBackgroundBlack"
                android:gravity="center"
                android:textColor="@color/colorWhite"
                android:textSize="@dimen/text_size_large" />

            <TextView
                android:id="@+id/tvNavDate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorBackgroundBlack"
                android:gravity="center"
                android:textColor="@color/colorWhite"
                android:textSize="@dimen/text_size_small" />
        </LinearLayout>

        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@mipmap/ic_launcher" />
    </RelativeLayout>

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

I tried setting the contentInsetStart and other attributes on the Toolbar, but nothing changed.

space benhind hamburger icon. i need to display the custom toolbar in full width — Ankush Bist, Jan 31 '17 at 12:56
The `Toolbar` is full-width. That's what the hamburger icon is in; the `Toolbar`. — Mike M., Jan 31 '17 at 12:57
Because the `RelativeLayout` starts after the icon, which is actually an `ImageButton` itself. Your `TextView`s are centered in the `RelativeLayout`. — Mike M., Jan 31 '17 at 13:02
i am not agree with your conclusion. Is it mentioned anywhere in android forums or anywhere? — Ankush Bist, Jan 31 '17 at 13:08
Don't agree with what, exactly? Your image shows pretty much what I'm saying. I'm not sure which part you don't agree with. Anyhoo, I don't know if it's documented anywhere, but I've been through `Toolbar`'s source code enough to know how it works. — Mike M., Jan 31 '17 at 13:28
OK, then the hamburger icon and the `Toolbar` are not separate. The icon is an `ImageButton` that is the first child `View` in the `Toolbar`, and is pushing the start of the `RelativeLayout` to the right, which is why the `TextView`s aren't centered with respect to the `Toolbar`. Do you really want the toggle to be blue, and the rest black? Or did you just set those backgrounds black for testing? — Mike M., Jan 31 '17 at 16:03
those backgrounds are for testing. I need to move the text inside the toolbar at center of toolbar. but because of that hamburger I am not able to do that. — Ankush Bist, Jan 31 '17 at 16:13
OK, then everything blue, yeah? Gimme a minute, and I'll fix your layout. — Mike M., Jan 31 '17 at 16:16
Oh, hi, there. I was just trying to add the details we discussed in comments, to make this easier to find when people search for similar issues. Of course, it's your post. You can have it as you like it. Cheers! — Mike M., Feb 03 '17 at 03:37

Mike M. · Accepted Answer · 2017-02-03T03:24:18.743

The problem here is that ActionBarDrawerToggle's icon is set as the navigation button on the Toolbar. This button is a special child of Toolbar that will take precedence in the layout. Any other child Views added to the Toolbar will be allotted only the space remaining after that ImageButton is placed. This is pushing the left side of your RelativeLayout to the right, so the TextViews you have centered in that will not be centered with respect to the Toolbar itself.

Fortunately, Toolbar's LayoutParams has a gravity property that we can utilize to center the LinearLayout and its TextViews directly in the Toolbar, without having to wrap them in another ViewGroup. We can also set the gravity appropriately on your ImageView to similarly align that to the right side.

In this example, we apply that center gravity by setting the LinearLayout's layout_gravity to center. Be sure to also change the layout_width values to wrap_content, or you'll be in the same boat as before. The ImageView here has its layout_gravity set to right|center_vertical, replacing those layout_* attributes specific to RelativeLayout.

<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="?attr/colorPrimaryDark"
    android:elevation="5dp"
    android:minHeight="?attr/actionBarSize"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvNavTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorWhite"
            android:textSize="@dimen/text_size_large" />

        <TextView
            android:id="@+id/tvNavDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorWhite"
            android:textSize="@dimen/text_size_small" />

    </LinearLayout>

    <ImageView
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_gravity="right|center_vertical"
        android:src="@mipmap/ic_launcher" />

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

score 4 · Answer 2 · answered Jul 20 '17 at 11:26

I had the same issue and I fixed with the android:contentInset

Try with this code:

<android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                android:contentInsetEnd="50dp"
                android:contentInsetLeft="50dp"
                android:contentInsetRight="50dp"
                android:contentInsetStart="50dp"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentInsetEnd="50dp"
                app:contentInsetLeft="50dp"
                app:contentInsetRight="50dp"
                app:contentInsetStart="50dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_horizontal"
                    android:layout_centerInParent="true"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginLeft="5dp"
                        android:text="@string/app_name_short"
                        android:textColor="#fff"
                        android:textSize="20dp" />

                </LinearLayout>

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

        </android.support.design.widget.AppBarLayout>


        <FrameLayout
            android:id="@+id/main_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/app_bar_layout" />


    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

Custom Toolbar Views not centered

2 Answers2

Linked

Related