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.