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

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.

Answer 2

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!

Answer 3

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>

Answer 4

That's a lot of work do achieve here by writing that much of code. I achieved that by 2 ways.

1 A simple workaround by using a View with TransparentBlack color
CODE>>

Code explaination:
1 The CollapsingToolbarLayout has a style with only a text size.
2 Default CollapsingToolbarLayout margin bottom is overridden to 16dp.
3. Our header with parallax collapseMode is a RelativeLayout with an ImaveView and a View.
4. This simple View with a BG at the bottom of the top header Relative layout with colour of contrast (here #77000000), acts as the BG for CollapsingToolbarLayout's collapsed Title in white color.

  <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/redeem_detail_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_window_background"
        android:fitsSystemWindows="true"
        app:expandedTitleMarginBottom="16dp"
        app:expandedTitleTextAppearance="@style/CollapsingTitleStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <!--header view-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/redeem_detail_top_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/splash" />

            <!--A view that draws a semi tranparent black overlay so that title is visible once expanded -->
            <View
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_alignParentBottom="true"
                android:background="@color/black_transparent" />

        </RelativeLayout>

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

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

Images for style 1:

a) When CollapsingToolbarLayout Title is Expanded Fully:

b) When CollapsingToolbarLayout Title is shrinking upon scroll up:

2 Answer above

Method is mentioned already by Joao Ferreira.

Here is what it looks like with shadowRadius=16: Notice the Shadow

PS please update or ask more if any confusions :)