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:

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="286dp">

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:collapsedTitleGravity="center"
        app:expandedTitleGravity="center"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                android:id="@+id/backgroundImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@null"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"/>

            <ImageView
                android:id="@+id/someIcon"
                android:layout_width="56dp"
                android:layout_height="wrap_content"
                android:src="@drawable/some_icon"
                android:padding="16dp"
                android:layout_gravity="top|end"
                app:layout_collapseMode="pin"/>
 </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

I define a title for the toolbar but when I collapse it I can see the title moving in a diagonal direction instead of straight up and it aligns itself slightly to the right of the center of the toolbar line. Notice that the width is match_parent and the collapsed gravity is center, so why could this be happening and how should I fix it?

• First screenshot: what it looks like if I use collapse -> center and expanded -> center gravities and then collapse the layout. Notice that it's to the right of the center of the screen.

• Second screenshot: what it looks like if I get rid of collapse -> center gravity but leave expanded -> center gravity and then collapse the layout. Notice that it's aligned left by default.

• Third screenshot: what it looks like expanded

Things that I've tried so far to solve this (without success):

• Getting rid of the collapsedGravity and leaving only the expandedGravity

• Using the default roboto font for the title

• Setting padding and margins to 0 for both the toolbar and the collapsing layout

• setting gravity center_horizontal instead of center

Edit:

The only workaround I've found that makes this work properly is to use a separate textview to hold the title instead of setting the title for the collapsingtoolbarlayout (this makes the title collapse properly to the center). This isn't optimal so I'd appreciate knowing if the CPL has a bug in it or if there's a way to use the default title to do the same thing.

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.