Collapsing Toolbar title not centered

Question

My app contains a collapsing toolbar with a title. The title is centerend when it is expanded and should stay centered when it is collapsing. With my layout which is below, my device doesn't center the title when it is collapsed, but moves it a little to the right. What do I have to change so it keeps being centered? If it's helpful I can add images as well of course.

My layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/white"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleGravity="center|bottom"
            app:title="Test"
            app:collapsedTitleGravity="center"
            app:expandedTitleMarginBottom="56dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_marginBottom="48dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:fillViewport="true"
        android:layout_gravity="fill_vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">>

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

This is what it looks like expanded

As you see on this image, it's not centered, but a little moved to the right side

You mean the title text moves little bit right from center position or from start. — Mohamed Mohaideen AH, Aug 18 '18 at 15:41
Right, it moves a little to the right from center position. With `app:collapsedTitleGravity="center"` I tried to center it and since it is centered in expanded mode as well, it should just get straight up, but it does move to the side as well. — user9155899, Aug 18 '18 at 15:52
You are using navigation menu? or Navigation arrow? or home button enabled? — Mohamed Mohaideen AH, Aug 18 '18 at 15:55
Update screenshot of your toolbar will help to find out more accurate. — Mohamed Mohaideen AH, Aug 18 '18 at 15:56
No, I don't use a menu in the toolbar, that's what I thought might be the issue as well, but it is plain. — user9155899, Aug 18 '18 at 16:11
Try `app:contentInsetLeft="0dp"` & `app:contentInsetStart="0dp"` adding this property to toolbar & if not works as well add this porperty also `app:contentInsetStartWithNavigation="0dp"`.. Hope it helps. — Mohamed Mohaideen AH, Aug 18 '18 at 16:14
And also see here https://stackoverflow.com/questions/39097919/toolbar-extra-left-inset-padding — Mohamed Mohaideen AH, Aug 18 '18 at 16:15
There is default padding is present between views in toolbar design. So it takes space. You can find more from the documentation. — Mohamed Mohaideen AH, Aug 18 '18 at 16:23
Check this https://material.io/design/components/app-bars-top.html#specs — Mohamed Mohaideen AH, Aug 18 '18 at 16:30

score 1 · Answer 1 · answered Oct 28 '19 at 22:20

Its because of the the back back button at top right. Solution for this is to add marginEnd in your toolbar.

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/htab_collapse_toolbar"
    android:layout_width="match_parent"
    android:layout_height="110dp"
    app:expandedTitleMargin="@dimen/margin_15"
    app:collapsedTitleTextAppearance="@style/test1"
    app:expandedTitleTextAppearance="@style/test"
    app:collapsedTitleGravity="center_horizontal"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    android:fitsSystemWindows="true"
    app:title="Send money">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/htab_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginEnd="85dp"
        android:layout_gravity="top"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>

score 1 · Answer 2 · answered May 29 '20 at 21:26

Setting content related properties to 0dp will help you. Here is my working Toolbar entry.

<androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    app:contentInsetLeft="0dp"
                    android:contentInsetLeft="0dp"
                    app:contentInsetStartWithNavigation="0dp"
                    app:contentInsetStart="0dp"
                    android:contentInsetStart="0dp"
                    app:theme="@style/YourTheme"
                    android:gravity="center_horizontal"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:titleMargin="0dp" />

Hope it will help :)

Davide C · Answer 3 · 2022-11-09T11:24:43.320

I had the same problem with the collapsing toolbar when a back navigation button is shown on the left side and the title wasn't centered. My solution was to change the toolbar title's margin, settings the marginStart with the dimension of the back button with minus in front of it to move the title to the left:

in fragment.kt

toolbar.setTitleMargin(R.dimen.back_button.dimenToResPixel(), 0, 0, 0)

in dimens.xml

<dimen name="back_button">-40dp</dimen>

and setting back to 0 when the back navigation button disappear.

Collapsing Toolbar title not centered

3 Answers3