CollapsingToolbarLayout: setShadowLayer

Question

I have a collapsingToolbarLayout with the user's name displayed in both the collapsed mode and the expanded mode.

It looks like this when expanded:

It looks like this when half collapsed:

You can see that the white text doesn't work very nicely with the background image in the expanded mode.

Usually to improve clarity of the text and if this was a textview, I normally would setShadowLayer: http://developer.android.com/reference/android/widget/TextView.html#setShadowLayer(float,%20float,%20float,%20int)

In this case, because it is a collapsingToolbarLayout, it is not a textview, so it appears that the method is not available to set a shadow behind the text.

Does anyone know of a method that could increase the clarify of the text in the collapsingToolbarLayout such as maybe stroking text in the collapsingToolbarLayout or adding shadows?

Answer 1

I figured this out by looking at this thread:

Android CollapsingToolbarLayout Title background

The user actually asked a very similar question and the answer is to use a text protection scrim which works really nicely.

I'm copying and pasting the code for convenience:

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, 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.

The below is the effect after applying the code: