Android: CollapsingToolbarLayout centers expanded text but not collapsed text

Question

I have a CollapsingToolbarLayout that is defined to center both in collapsed and in expanded modes:

Answer 1

You need to set app:contentInsetStart and app:contentInsetLeft properties to 0dp.

  <android.support.v7.widget.Toolbar
        ..
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"/>

Answer 2

It may be late, but what I found is, the your title is in center in the title's view and not the whole toolbar. It happened with me, when I didn't had the up/back button on the left and had a single icon on the right.

So if you have back/up button, it should be exactly in the center because on the left and right you have 1 icon. But, this didn't happened because when you set the up/back button, it adds some right margin (you can see this behavior on the normal toolbar, with left title gravity).

So by considering that, the in the remaining area, your title is in the center. But, not center considering toolbar's width, center in title view's available width.

EXPERIMENT: You can try adding a second icon on the right and it will be very much in the center. Just a hack. Ugly hack.

Answer 3

Setting content related properties to 0dp (app:contentInsetLeft="0dp", android:contentInsetLeft="0dp", app:contentInsetStart="0dp", android:contentInsetStart="0dp", app:contentInsetStartWithNavigation="0dp") might help you. Here is my working Toolbar.

<com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:collapsedTitleGravity="center|center_horizontal"
        app:collapsedTitleTextAppearance="@style/CollapsedAppBar"
        app:expandedTitleTextAppearance="@style/ExpandedAppBar"
        app:statusBarScrim="@color/colorPrimaryDark"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMargin="@dimen/large_padding"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/comImage1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:src="@drawable/bg"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <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/ToolbarTheme"
            android:gravity="center_horizontal"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:titleMargin="0dp"/>
    </com.google.android.material.appbar.CollapsingToolbarLayout>

Hope it will help :)

Answer 4

You need to set app:expandedTitleGravity="center" and remove app:collapsedTitleGravity="center" from your code like

  <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            app:expandedTitleGravity="center"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

Hope this helps you