Status Bar (notification bar) is disappearing on scroll with CoordinatorLayout

Question

I am using the CoordinatorLayout using the default templates in Android Studio.

However when I scroll down, the notification bar (status bar) is scrolling off screen. The effect can be seen in this video. https://youtu.be/1oAqEpg7N4I

I have included the relevant parts, but the rest of the code is available here: https://github.com/vidia/MaterialDiningCourts/blob/master/app/src/main/res/layout/activity_meal_view.xml

In the demo (cheesesquare) the behavior is what I expect, to leave the notification bar in place and the Toolbar scrolls out underneath it. I have scoured those layouts and made changes in my code to match them, but haven't been able to find the necessary change.

What is causing the notification bar to scroll off the page, and why does the sample in Android Studio have this incorrect behavior?

<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MealViewActivity">

<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <Spinner
            android:id="@+id/meal_chooser_spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTabLayout"
        android:foregroundGravity="top"
        app:tabIndicatorColor="@color/tabSelectedIndicatorColor"/>
</android.support.design.widget.AppBarLayout>

And styles.xml, though I have removed my custom themes from this file and it doesnt help the issue.

<resources>

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

    <!-- Required from http://stackoverflow.com/a/29014475/2193387 -->
    <item name="android:datePickerDialogTheme">@style/dateDialogTheme</item>

</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->
    <item name="tabIndicatorColor">@color/tabIndicatorColor</item>
    <item name="tabIndicatorHeight">4dp</item>
    <!--<item name="tabPaddingStart">6dp</item>-->
    <!--<item name="tabPaddingEnd">6dp</item>-->
    <!--<item name="tabBackground">?attr/selectableItemBackground</item>-->
    <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/white</item>
</style>

<style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@color/tabUnselectedTextColor</item>
    <item name="textAllCaps">true</item>
</style>

<!-- TODO: Change to use AppCompat rather than Material -->
<style name="dateDialogTheme" parent="android:Theme.Material.Light.Dialog">
    <!-- Required from http://stackoverflow.com/a/29014475/2193387 -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Try setting `android:fitsSystemWindow="true"` on your `AppBarLayout`. — Marko, Nov 28 '15 at 12:06
I think you mean in the CoordinatorLayout, the AppBarLayout has no attribute fitsSystemWindow. Also, I have that in my CoordinatorLayout already. — Vidia, Nov 28 '15 at 12:09
I meant `fitsSystemWindows`, was a typo. Not sure, looking at [cheesesquare example](https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/include_list_viewpager.xml), their `ViewPager` is under `AppBarLayout`, try moving it. — Marko, Nov 28 '15 at 12:24
I tried that. The only difference in the cheesesquare example is that their coordinator layout is in a DrawerLayout. Problem is I don't need a drawer. — Vidia, Nov 29 '15 at 08:46
Answer is [here](http://stackoverflow.com/a/28594509/1911652) — Atul, Aug 19 '16 at 06:19

Vladimir Prus · Answer 1 · 2016-02-24T10:09:44.467

The disappearing status bar effect is the result of these definitions in values-21/styles.xml:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>

With these definitions, the system no longer draws system bar background. What you see as status bar background is actually drawn by CoordinatingLayout, beyond the now-transparent system bar. Now, when you scroll, CoordinatedLayout scrolls AppBarLayout up, and its content is visible through the transparent system bar.

You have two options to fix this:

Make the status bar opaque
Additionally use CollapsingToolbarLayout, and set status bar scrim

Thanks for tips which headed me to perfect soluion for this problem [here](http://stackoverflow.com/a/28594509/1911652) — Atul, Aug 19 '16 at 06:19

score 3 · Answer 2 · answered Dec 11 '15 at 17:29

I was also running into this issue and after some time I figured out, that I had to remove

android:fitsSystemWindows="true"

from CoordinatorLayout

I'm not quite sure why, but I think it is only required for the NavigationDrawer, because according to material design guidlines it overlays the status bar and there I needed to set this tag true.

Hope this is also working for you.

Michele Lacorte · Answer 3 · 2015-11-28T11:59:22.110

Add this to your CoordinatorLayout:

android:fitsSystemWindows="true"

or try with this:

    <android.support.design.widget.CoordinatorLayout 
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            ...
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:foregroundGravity="top"
            ... />
    </android.support.design.widget.AppBarLayout>

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

I have fitsSystemWindows=true in my implementation already. And I see no changes in the code snippet you included. Could you explain? — Vidia, Nov 28 '15 at 11:43
I think you issue is on theme of Toolbar and AppBarLayout so I tried to replace it with theme that in my application works... — Michele Lacorte, Nov 28 '15 at 11:45
I made those changes (though I have my own themes with your listed ones as parents) and I am still not seeing a difference. — Vidia, Nov 28 '15 at 11:56
I have update the code, try now, if it doesn't work, edit answer and put style.xml — Michele Lacorte, Nov 28 '15 at 11:59
Just edited my question. I removed my custom styles in the fragment, but I included the styles.xml anyway. If you need any other files more immediately my github is linked. — Vidia, Nov 28 '15 at 12:08

score 1 · Answer 4 · answered Jun 07 '16 at 13:06

1

To solve it you have to remove this line:

android:fitsSystemWindows="true"

It solves the problem for me.

answered Jun 07 '16 at 13:06

Hugues Badz

29
4

score -1 · Answer 5 · answered May 13 '16 at 08:42

-1

I managed to get rid of this behaviour by removing the line below in the toolbar inside CoordinatorLayout:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"        << this one
        app:popupTheme="@style/AppTheme.PopupOverlay">

answered May 13 '16 at 08:42

Sorin Comanescu

4,829
3
29
38

Not correct answer to the problem. With this it simply stops scrolling. – Atul Aug 19 '16 at 05:56

Status Bar (notification bar) is disappearing on scroll with CoordinatorLayout

5 Answers5

Linked

Related