52

After the user scrolls down the screen, the image in the CollapsingToolbarLayout disappears and is left with a toolbar with the back button, content title, and settings menu. I want to know how to change the background color of that toolbar only when its in a 'collapsed' state.

The action I am referring to is similar to this where the toolbar background color changes to green:

enter image description here

Below the CollapsingToolbarLayout I have a NestedScrollView with CardViews

Eli Davila
  • 577
  • 2
  • 6
  • 14

6 Answers6

112

I think you're after app:contentScrim.

<android.support.design.widget.CollapsingToolbarLayout
    ...
    app:contentScrim="?attr/colorPrimary">
    <!-- Toolbar and ImageView here -->
</android.support.design.widget.CollapsingToolbarLayout>
Jimeux
  • 2,956
  • 1
  • 18
  • 14
  • 2
    When I rotate my phone this CollapsingToolbarLayout app:contentScrim="?attr/colorPrimary" causes android.view.InflateException Error inflating class , others says to replace the ?attr @ color or @ dimen etc. but they are not recognized by app: ... What do I do? thanks – Ashraf Alshahawy Apr 14 '16 at 04:54
  • 1
    Can you please ELI5 what Scrim means? – Sudhir Singh Khanger Dec 11 '16 at 06:05
  • 1
    @SudhirKhanger I was also curious. Looks like they're referring to a device used in theatre: "a piece of gauze cloth that appears opaque until lit from behind, used as a screen or backdrop." https://www.google.com/search?q=scrim – Nolan Amy Aug 02 '18 at 19:49
13

First remove 

app:contentScrim="?attr/colorPrimary">

from CollapsingToolbarLayout

Add library 

compile 'com.android.support:palette-v7:23.2.1'

And add below code in java code

    Bitmap bitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(), R.drawable.ny);
    Palette.generateAsync(bitmap,
            new Palette.PaletteAsyncListener() {
                @Override
                public void onGenerated(Palette palette) {
                    Palette.Swatch vibrant =
                            palette.getVibrantSwatch();
                    int mutedColor = palette.getVibrantSwatch().getRgb();
                    if (vibrant != null) {
                        // If we have a vibrant color
                        // update the title TextView
                        collapseToolbar.setBackgroundColor(mutedColor);
                        //  mutedColor = palette.getMutedColor(R.attr.colorPrimary);
                        collapseToolbar.setStatusBarScrimColor(palette.getDarkMutedColor(mutedColor));
                        collapseToolbar.setContentScrimColor(palette.getMutedColor(mutedColor));

                    }
                }
            });
Ashish
  • 873
  • 10
  • 20
  • `generateAsync` is deprecated and does no change in my side although after removing `app:contentScrim="?attr/colorPrimary"`, any help? – blueware Mar 02 '17 at 08:00
9

Just use CollapsingToolbarLayout XML attribute contentScrim to set Toolbar background color when it's in collapsed mode.

app:contentScrim="YOUR_TOOLBAR_COLOR"

Here is an Example:

<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:layout_scrollFlags="scroll|exitUntilCollapsed">

    <ImageView
        android:id="@+id/img_group_photo"
        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/anim_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>

Hope this will help~

Ferdous Ahamed
  • 21,438
  • 5
  • 52
  • 61
4

Maybe what you have been looking for is this : 

myCollapsingToolbar.setContentScrimColor(getResources().getColor(R.color.my_color_id));

It worked for me and changed the color of the collapsingToolbar once it was collapsed to help me fit the main color of an image that was displayed when the collapsingToolbar was full scale. With this, the color can obviously be changed programatically!

I know I'm late, but I hope it could help.

Olivier L. Applin
  • 285
  • 1
  • 4
  • 15
0

You can use an AppBarLayout's offset listener and change the CollapsingTollbar attributes according to the desired behavior. 

appBarLayout.addOnOffsetChangedListener { _, verticalOffSet ->
            if (Math.abs(verticalOffSet) == appBarLayout.totalScrollRange) {
                //Collapsed
                toolBar.setBackgroundDrawable(ContextCompat.getDrawable(this,
                        R.drawable.last_revolut_gradient))
            } else {
                //Expanded
                toolBar.setBackgroundColor(ContextCompat.getColor(this,
                        android.R.color.transparent))
            }
        }
haroldolivieri
  • 2,173
  • 18
  • 29
-1
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
            R.drawable.header);

    Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
        @SuppressWarnings("ResourceType")

        @Override
        public void onGenerated(Palette palette) {
            Palette.Swatch vibrant =
                    palette.getVibrantSwatch();

            if (vibrant != null) {

                collapsingToolbar.setBackgroundColor(getResources().getColor(R.color.cpb_blue));
                collapsingToolbar.setStatusBarScrimColor(getResources().getColor(R.color.cpb_blue));
                collapsingToolbar.setContentScrimColor(getResources().getColor(R.color.cpb_blue));

            }
        }

    });
Aravind Cse
  • 1