Toolbar overlaps status bar

Question

I've got a problem with my status bar which gets overlapped by the toolbar.

I wanted to have the function that when the user scrolles the ListView down, the toolbar disappears behind the status bar so that only the tabs are visible, just like in the WhatsApp and YouTube apps.

To achieve this effect or to get this function I used this line:

app:layout_scrollFlags="scroll|enterAlways"

into my android.support.v7.widget.Toolbar, but know as I said before, the status bar gets overlapped by the 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"
    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=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

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

        </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.support.design.widget.AppBarLayout>

    <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.CoordinatorLayout>

Thankful for any help!

UPDATE:

v21\styles.xml

<resources>>
    <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>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- 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="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" />

</resources>

Solution 1

Try add android:fitsSystemWindows="true" to android.support.design.widget.AppBarLayout or @style/AppTheme.PopupOverlay style

Solution 2

in v21\styles.xml

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

Solution 3

This works for me to get a white overlay on device status bar (problem after update in question)

I changed:

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

to

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

in my styles.xml file

Comments

[Ron Makila]

now i've got the effect that i wanted, but my Notification bar turned white @mdtuyen

[mdtuyen]

you can use setStatusBarColor(int color) in code or change style to fix it

[Ron Makila]

I already found another way <item name="android:statusBarColor">@color/colorPrimaryDark</item> is that okey or will I have any problems with that? @mdtuyen

[CoolMind]

In my case it changed a normal color of status bar to black.

[Suraj]

@CoolMind see this link it describes how it works in details

[Suraj]

official Docs on same topic : developer.android.com/reference/android/…

[CoolMind]

thanks, I know this (has been making an app for several month), but your link is useful.

[amit pandya]

it's not working in android 4.4 series android devices, what solutions you can suggest? @phongvan