Android Material Design - How to change background color of Toolbar after CollapsingToolbarLayout is collapsed

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:

Below the CollapsingToolbarLayout I have a NestedScrollView with CardViews

Solution 1:

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>

Solution 2:

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));

                    }
                }
            });

Solution 3:

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~