Android CollapsingToolbarLayout Title background

Question

I'm working with the CollapsingToolbarLayout from the new Android Design Support Library.

I have set its title and it is working fine, the only problem I still have is that when you scroll, the text is lost, depending on the image in the background.

What I'd like to do, is set a background to the CollapsingToolbarLayout title, but I haven't find a way to do it.

Is there anyway to achieve this?

Layout:

<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">  <android.support.design.widget.AppBarLayout     android:id="@+id/appbar"     android:layout_width="match_parent"     android:layout_height="@dimen/detail_backdrop_height"     android:fitsSystemWindows="true"     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">      <android.support.design.widget.CollapsingToolbarLayout         android:id="@+id/collapsing_toolbar"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:fitsSystemWindows="true"         app:contentScrim="?attr/colorPrimary"         app:expandedTitleMarginEnd="64dp"         app:expandedTitleMarginStart="48dp"         app:layout_scrollFlags="scroll|exitUntilCollapsed">          <ImageView             android:id="@+id/ivBigImage"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:fitsSystemWindows="true"             android:scaleType="centerCrop"             app:layout_collapseMode="parallax"/>          <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             app:layout_collapseMode="pin"             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>      </android.support.design.widget.CollapsingToolbarLayout>  </android.support.design.widget.AppBarLayout>  <android.support.v4.widget.NestedScrollView     android:layout_width="match_parent"     android:layout_gravity="fill_vertical"     android:layout_height="match_parent"     app:layout_behavior="@string/appbar_scrolling_view_behavior">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical"         android:paddingTop="24dp">          <android.support.v7.widget.CardView             android:id="@+id/cvDescription"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_margin="10dp">              <LinearLayout                 style="@style/Image.Info.CardContent"                 android:layout_width="match_parent"                 android:layout_height="wrap_content">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:text="@string/description"                     android:textAppearance="@style/TextAppearance.AppCompat.Title"/>                  <TextView                     android:id="@+id/tvDescription"                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:text=""/>              </LinearLayout>          </android.support.v7.widget.CardView>       </LinearLayout>  </android.support.v4.widget.NestedScrollView> 

Setting up the CollapsingToolbarLayout title in the activity:

CollapsingToolbarLayout collapsingToolbar =             (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);     collapsingToolbar.setTitle("Some title here"); 

Edit:

Here you can see a sequence of images when I collapse the toolbar. You can see how the title text is not readable. The problem is that I don't have control of the images that I show, so for some images it looks ok, but for others, like this example, it doesn't look good at all and it is not readable. What I had in mind was maybe add some kind of background to the text, so there is always the same color at the back of the text and it is always readable.

Answer 1

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.