Android CollapsingToolbarLayout Title background
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>
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.
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!