Toolbar overlaps status bar

问题

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>

回答1:

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

回答2:

in v21\styles.xml

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

回答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>

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

in my styles.xml file

回答4:

try making android:layout_height="?attr/actionBarSize" for android.support.v7.widget.Toolbar

来源：https://stackoverflow.com/questions/33984944/toolbar-overlaps-status-bar

标签

android

xml

toolbar

android-coordinatorlayout