How do you change the color of collapsing toolbar when it's collapsed?

Question

I have a collapsing toolbar, but I cannot for the love of god figure out why its not changing to the color i want it to as it collapses...Here is my xml code the collapsing toolbar.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/FrontierTheme">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/background"
                android:id="@+id/profileView_imageView"/>
            <android.support.v7.widget.Toolbar
                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="wrap_content"
                android:id="@+id/toolbarProfileViewID"
                android:minHeight="?attr/actionBarSize"
                app:theme="@style/FrontierTheme"
                app:layout_collapseMode="pin">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="@color/mainColor"
            app:tabMode="scrollable"
            app:tabTextColor="@color/white"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Here is my styles.v21 (i dont have have anything in the regular styles.xml file)

<style name="FrontierTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorPrimary">#5F021F</item>
        <item name="android:colorPrimaryDark">#5E152C</item>
        <item name="android:colorAccent">#BCBCBC</item>
        <item name="android:textColor">#FFFFFF</item>
    </style>

And here is my android manifest.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.daprlabs.swipedeck" >
 <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="23" />
  <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:largeHeap="true"
        android:supportsRtl="true"
        android:theme="@style/FrontierTheme"
        android:name=".ApplicationEnvironment">
        <activity
            android:name=".ActivityCenter"> <!--android:theme="@style/TestTheme" -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
 <activity android:name=".ProfileView.ProfileView"
            android:label="Frontier" />
   </application>

</manifest>

Currently, when it collapses, the color is white...But i want it to be this hexidecimal: #5F021F

Answer 1

add a addOnOffsetChangedListener listener in the AppBarLayout to know if it's collapse or not, and change the color using setBackgroundColor. Like this:

//Set a listener to know the current visible state of CollapseLayout
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(final AppBarLayout appBarLayout, int verticalOffset) {
        //Initialize the size of the scroll
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        //Check if the view is collapsed
        if (scrollRange + verticalOffset == 0) {
            toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.YOUR_COLLAPSED_COLOR));
        }else{
            toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.OTHER_COLOR));
        }
    }
});

Answer 2

The selected answer doesn´t work for me, looks terrible in my case when the color changes when verticalOffset == 0, so I tried this:

collapsingToolbarLayout.setContentScrimColor(Color.parseColor("#000000")); // #000000 is black color hex (for example)

And now changing color when collapsed looks smooth and clean,

Hope it helps somebody,