When running on Nougat, why does the title gets cut off when using a CollapsingToolbarLayout?

Question

I'm using the following layout and it works great on all versions except Android Nougat where the title gets cut off when fully collapsed.

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/them_color"
            app:expandedTitleTextAppearance="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:contentDescription="@string/app_name"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"/>

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

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

I have tried app:collapsedTitleGravity="center" but it doesn't fix the issue. How can I make it work on Nougat?

Answer 1

This Sample project shows how to implement collapsing toolbar in Android.