CollapsingToolBarLayout - status bar scrim color doesn't change

Question

I updated my android studio few days ago and started working with the CoordinatorLayout and CollapsingToolbarLayout just trying stuff.

It seems that the Toolbar scrim colour override the status bar initial colour and the status bar scrim colour (tried both from xml and code)

initial state:

---

started scrolling:

---

scrolled until collapsing:

---

So the questions are:

1. How can I prevent the toolbar to override the status bar when collapsing (not even letting the image I'm collapsing to go above it).

2. How can I change status bar colour after collapsing

Another issue I had is that I gave the toolbar initial colour and not just scrim colour because I wanted the Toolbar above the picture but instead it will go on top of the picture and will cover some of it as well as will cover anything that going to collapse behind it

---

added colour/style to the toolbar in the xml:

---

3. Is there any way to put the toolbar above the picture from the beginning and just collapse the image? (thought about maybe keep the tool bar pinned and and frame layout before the image but its still gonna collapse on the status bar area which is the main question.)

---

main activity xml:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim = "?attr/colorPrimary"
        app:statusBarScrim="?attr/colorAccent" --------> not changing
        android:id="@+id/my_ctl">


        <ImageView
            android:id="@+id/image"
            android:src="@drawable/flights"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_collapseMode="pin" />


    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>


<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    <include layout="@layout/content_main" />

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

---

MainActivity.java:

  CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.my_ctl);
    //ctl.setContentScrimColor(Color.RED);
    ctl.setStatusBarScrimColor(Color.BLUE);  --------> not working
    ctl.setTitle("blabla");

Answer 1

Change the app:statusBarScrim="?attr/colorAccent" of the CollapsingToolbar to app:statusBarScrim="@android:color/transparent"

Then you can set the color of the CollapsingToolbar to ctl.setStatusBarScrimColor(Color.BLUE); in your code

And also make sure you add android:fitsSystemWindows="true" to the AppBarLayout

Answer 2

Try adding android:fitsSystemWindows="true" to AppBarLayout. It worked for me.

Answer 3

For the point #3: In the Toolbar add a transparent background

android:background="@android:color/transparent"

 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_collapseMode="pin"
            android:background="@android:color/transparent" />

Answer 4

for 2) there is a known issue

for now I'm setting the color of the toolbar background programmatically

    mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
        @Override
        public void onStateChanged(AppBarLayout appBarLayout, State state) {
            Toolbar toolbar = (Toolbar) mAppBarLayout.findViewById(R.id.toolbar_top);
            int toolbarBackground = (state == AppBarStateChangeListener.State.COLLAPSED) ? R.color.color_collapsed : R.color.color_non_collapsed;
            toolbar.setBackgroundColor(ContextCompat.getColor(DealsOptionsActivity.this, toolbarBackground));
        }

    });

this is of course a simple implementation. You can optimize it.

Answer 5

Been looking for solution and found it. First, setup your's activity theme to AppThemeNoActionBarLight.SimpleCoordinatorTheme

Take a look:

<!-- Base application theme. -->
<style name="AppThemeNoActionBarLight" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppThemeNoActionBarLight.SimpleCoordinatorTheme">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

Then try this layout sample:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light"
android:fitsSystemWindows="true"
>

<android.support.design.widget.AppBarLayout
    android:id="@+id/main.appbar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main.collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        app:title="@string/app_name"
        >

        <ImageView
            android:id="@+id/main.backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:src="@drawable/material_flat"
            app:layout_collapseMode="parallax"
            tools:ignore="ContentDescription"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/main.toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:title="Test"

            />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:lineSpacingExtra="8dp"
        android:text="@string/lorem"
        android:padding="@dimen/activity_horizontal_margin"
        />
</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:src="@drawable/ic_comment_24dp"
    app:layout_anchor="@id/main.appbar"
    app:layout_anchorGravity="bottom|right|end"
    />