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.

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

Solution 2

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>

Solution 3

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!

Solution 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 :)

View more solutions

Comments

[roy_lennon]

I have this already, I only want to make the background of the collapsing toolbar title have another color

[Shubhang Desai]

@roy_lennon Sorry, totally misunderstood the question. Check out the edit.

[roy_lennon]

Thanks! I already knew that... but that is not what I'm trying to do... I'm trying to change the Collapsing Toolbar Layout title before it is collapsed...

[Shubhang Desai]

Ah!! I see. Try this: ((CollapsingToolbarLayout) collapsingToolbar).setExpandedTitleColor();

[Shubhang Desai]

Is this what you were looking for?

[roy_lennon]

Not really, I need to add a background color, not change the title font color....

[Shubhang Desai]

You could add a tint to the image that is displayed with with the expanded toolbar. That would add a background, and you wouldnt need to mess with the CollapsingToolbarLayout.

[roy_lennon]

but I will have to make that tint-image move with the toolbar title ... I don't think there is another option to do this

[Shubhang Desai]

I'm not sure I understand your question. You want the expanded image to have one a certain background color, and the collapsed toolbar to have another background color. Is that correct?

[roy_lennon]

No, see the edit and the image... the problem is between the expanded state and the collapsed state, the text is not readable, and I want to add some kind of alpha background color, so the title text is always readable.

[roy_lennon]

Thanks, this seems to solve my problem. I have to play a little and tweak it a little bit, but I think this is it. Thanks!

[neteot]

Hello @Amagi82 I've been trying to solve this exactly issue that I have in my app with your solution but it doesn't work. The first view works (the upper view for the buttons), if you use the "design" tab in android studio in de xml layout its there, but the other view the bottom view doesn't show and on the design tab in xml it appears above the others components outside the coordinator layout.. do you know what could be happening? thanks!

[Jim Pekarek]

@neteot I'm not certain without seeing your code and without an image of what is happening, but the first thing I'd check is where and in what order I've put my views in the layout. Are the scrims inside the CollapsingToolbarLayout? What order are they in? They are drawn in order, so if you put a full size image after another view inside a FrameLayout(like CollapsingToolbarLayout), it'll draw over the top of it. Let me know if that helps, or please clarify if I'm not on the right track. Good luck. :)

[neteot]

Hi @Amagi82 I've a link with this question link the thing is that after you told me this I made a android studio template (the one with the scrolling activity) and when implemented what you have said it works perfect... but in my layout, with exactly the same, the bottom view appears over everything.. I have it inside collapsing toolbar and after imageview

[Jim Pekarek]

@neteot If it works perfect with one and not the other, they aren't exactly the same. Something is different. Double check your colors, your styles, and then start commenting out other components until you find your culprit. I recommend temporarily changing the scrim to a very obvious color so it's easier to debug.

[Albert Vila Calvo]

I added android:fitsSystemWindows="true" to my View. Otherwise it starts below the status bar and it looks bad.

[neteot]

Hello @Amagi82 , I do really appreciate your help specially when you already have answered this question,my project is quite big but I've changed everything (dimens.xml, color.xml, styles.xml) with copy and paste from an empty project with the correct behaviour but the view it's still on top of everything...I think I've been defeated haha.. This is a google drive link with the images of the layout link if you want to take a look. Thank you so much for your time

[neteot]

@Amagi82 finally I did it!! after two days of struggling I have found the solution... in the grade file I was using the support library version 22.+ and it has to be 23.+ ..... I was going crazy! thank you so much!

[parohy]

android:layout_alignBottom is not working inside CollapsingToolbarLayout

[sebasira]

This was a very simple way of solving it! I haven't try the others

[chitgoks]

Simple and easy. Only remaining issue for me is the back button in case the background is whitish ... looks like there's no way it detects the background image to changes its color appropriately