Collapsing toolbar - toolbar under statusbar

Question

I've recently bumped to problem with coordinator layout. When I try to create simple collapsing toolbar layout as in this example, toolbar apears to be under status bar as in screenshot below (on preLolipop devices everything works fine, because app don't draw under under statusbar).

Code snippet of my Activity layout:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            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/imageCalculationDetail"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@drawable/ic_dummy_calculation"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

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

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

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

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

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

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

My Styles (only v21) where BaseAppTheme parent is Theme.AppCompat.Light.NoActionBar:

<style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:colorAccent">@color/colorPrimary</item>
        <item name="android:colorButtonNormal">@color/button_state_list</item>
        <item name="android:statusBarColor">@color/transparent</item>
    </style>

Answer 1

NOTING WORKS FOR ME.

For me solution was simple :

add android:fitsSystemWindows="false" in Top CoordinatorLayout View

Answer 2

Programmatically, you can change this behavior by clearing and adding relevant flags via Android's Window class methods. Write a custom function in the Activity concerned and pass it the color resource ID of your choice:

Kotlin:

fun setStatusBar(color: Int) {
    val window = this.window
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
    window.statusBarColor = ContextCompat.getColor(this, color)
}

Java:

public void setStatusBar(int color) {
    Window window = this.getWindow();
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    window.setStatusBarColor(ContextCompat.getColor(this, color));
}

Then, call the function from your Activity's overridden onCreate method right after the setContentView(R.layout.your_layout) line. For example:

Kotlin:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.your_layout)
    setStatusBar(R.color.colorPrimaryDark)
    ...
}

Java:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_layout);
    setStatusBar(R.color.colorPrimaryDark);
    ...
}

Answer 3

For me

Adding an Attribute fitSystemWindows="false" to Toolbar in XML worked.

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

Answer 4

Well I figure it out, problem was that I had

<item name="android:fitsSystemWindows">true</item>

in my toolbarStyle of BaseAppTheme (for other actvities, everything works well, for collapsing toolbar with translucent status bar not). After setting

android:fitsSystemWindows="false"

to my toolbar, everything works fine.

Answer 5

Try by removing android:fitsSystemWindows="true" from ImageView..

<ImageView
            android:id="@+id/imageCalculationDetail"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@drawable/ic_dummy_calculation"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"/>

Answer 6

<item name="android:windowDrawsSystemBarBackgrounds">true</item>

By putting this in your styles you're telling Android that your app is responsible for drawing the stuff behind the system bar. That's why the "dirty hack" in the other answer is technically correct if this flag is set.

Unless you have an explicit reason for the flag to be true (I suspect not), set it to false so that the OS properly offsets your content for you. Your status bar should still be translucent.

Answer 7

Apply a breakpoint to include a marginTop to the toolbar for lollipop devices or above.

values/dimens.xml

<dimen name="toolbar_margin_top">0dp</dimen>

values-v21/dimens.xml

<dimen name="toolbar_margin_top">24dp</dimen>

an then in your layout:

<android.support.v7.widget.Toolbar
  .....
  android:layout_marginTop="@dimen/toolbar_margin_top"