18

I am experiencing an issue when using Coordinator Layout that contains an AppBarLayout (holding a ToolBar and a TabLayout) and a ViewPager (holding fragments) as children. I want the topbar to be hidden when scrolling down, and revealed when scrolling back up. However when I scroll down, the status bar scrolls up as well, leaving the top bar just below the status icons, being overlapped by them.

I tried adding android:fitsSystemWindows="true" to both the AppBarLayout and the ViewPager but nothing changed.

Below the code used and snapshots showing the two states:

<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_height="wrap_content"
        android:layout_width="match_parent"
        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"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"/>

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

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

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

Status Bar without scroll applied

Status Bar with scroll applied

1
  • 1
    I had this exact same problem, and i was able to solve it, but I don't have the code with me! A few possibilities: a) fitsSystemWindows="true" on your AppBarLayout, b) Add a contentScrim to your AppBarLayout or Toolbar (app:contentScrim="@color/primaryDark"), or c) try a CollapsingToolbarLayout instead of AppBarLayout, but don't give it collapsing scroll flags. Hope one of those helps! Commented Nov 30, 2015 at 1:06

1 Answer 1

30

Review the theme for the activity, if the theme is like @style/AppTheme.NoActionBar or one theme without ActionBar, try putting a color, you must have a style(v21) something like this:

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>    
</style>

change it for :

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
</style>
5
  • 1
    This is ok if you don't want to use a navigation drawer for example to show with a transparent status bar...
    – CaptRisky
    Commented Jun 30, 2016 at 13:55
  • 1
    @CaptRisky, what to do if I also want to use navigation drawer?
    – frozzyk
    Commented Aug 10, 2016 at 16:19
  • 1
    @frozzyk I'm using material drawer (mike penz) and I had to stop it scrolling up, haven't found a solution. Pretty sure the OP is using the same library as you can see the elevation of the appBar in the status bar area.
    – CaptRisky
    Commented Aug 13, 2016 at 1:04
  • should to use "?attr/colorPrimaryDark" to support multi-theme app. Commented Nov 7, 2016 at 18:37
  • @CaptRisky did you ever find a solution? I have 2 Activities, one with a navigation drawer, one without - the one with works as expected when scrolling (toolbar disappears), however the second one doesn't do under status bar properly, and I can't use <item name="android:statusBarColor">@color/colorPrimaryDark</item> because of the navigation drawer.
    – Mark
    Commented Nov 22, 2016 at 1:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.