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

Question

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,

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

            }
        }

    });

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

                    }
                }
            });

Answer 3

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>

Answer 4

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~

Answer 5

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

Answer 6

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.