Android CollapsingToolbarLayout Title background

Use a text protection scrim(scroll down a bit). My example assumes the title text is white, so some tweaks may be necessary to optimize for your case.

Inside your CollapsingToolbarLayout, add the following after ivBigImage:

<View    android:layout_width="match_parent"    android:layout_height="@dimen/sheet_text_scrim_height_top"    android:background="@drawable/scrim_top"    app:layout_collapseMode="pin"/><View    android:layout_width="match_parent"    android:layout_height="@dimen/sheet_text_scrim_height_bottom"    android:layout_gravity="bottom"    android:layout_alignBottom="@+id/image"    android:background="@drawable/scrim_bottom"/>

In your Drawable folder, add:

scrim_top.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"><gradient    android:angle="270"    android:startColor="@color/translucent_scrim_top"    android:centerColor="@color/translucent_scrim_top_center"    android:endColor="@android:color/transparent"/></shape>

and scrim_bottom.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"><gradient    android:angle="90"    android:startColor="@color/translucent_scrim_bottom"    android:centerColor="@color/translucent_scrim_bottom_center"    android:endColor="@android:color/transparent"/></shape>

For colors, you should make these darker in initial testing so it's more obvious you have it working, but for production I used:

<color name="translucent_scrim_top">#26000000</color><color name="translucent_scrim_top_center">#0C000000</color><color name="translucent_scrim_bottom">#2A000000</color><color name="translucent_scrim_bottom_center">#0D000000</color>

And for dimensions, I used a height of 88dp.

Use a text protection scrim from the example of Amagi82 and add on the CollapsingToolbarLayout the app:expandedTitleTextAppearance parameter.

<android.support.design.widget.CollapsingToolbarLayout    android:id="@+id/collapsing_toolbar"    android:layout_width="match_parent"    android:layout_height="match_parent"    .    app:expandedTitleTextAppearance="@style/TextAppearance.Design.CollapsingToolbar.Expanded.Shadow"    .    .    app:layout_scrollFlags="scroll|exitUntilCollapsed">

For example add this on you style xml:

<style name="TextAppearance.Design.CollapsingToolbar.Expanded.Shadow">    <item name="android:shadowDy">0</item>    <item name="android:shadowDx">0</item>    <item name="android:shadowRadius">8</item>    <item name="android:shadowColor">@android:color/black</item></style>

Edit:

If you want to change the color of the toolbar once it has "shrunk", you need to set the contentScrim attribute of the collapsing toolbar layout to that color:

<android.support.design.widget.CollapsingToolbarLayout        app:contentScrim="@color/[color you want]"        ...>

Pointing the value of this attribute to the color you want the toolbar to turn into will solve your issue, as I understand it.

Hope that answers your question!