Android NavigationView (material support lib) doesn't interact with the status bar properly

Question

I'm following the example from here to integrate the new Material Design Support library's NavigationView into my app.

My general layout looks like this:

activity.xml

<android.support.v4.widget.DrawerLayout
    android:fitsSystemWindows="true">

    <!-- main content -->

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

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

themes.xml

<style name="MyTheme" extends "Theme.AppCompat.Light.NoActionBar">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

MyActivity.java

onCreate(..) {
    ..
    // This color can be different depending on some conditions.
    DrawerLayout.setStatusBarBackground(color);
}

However, I keep getting a grey status bar, and the NavigationView does not draw under the status bar. I think the grey status bar is because I didn't define a custom colorPrimaryDark attr in the theme. However, I would assume DrawerLayout.setStatusBarBackground would override and set the status bar color. I can't find much documentation on the new NavigationView. Does anyone have any ideas?

Answer 1

Add your styles for API 21+ in values-v21/themes.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>
</resources>

In activity.xml, try setting android:fitsSystemWindows="true" on your NavigationView (in addition to the DrawerLayout).

Answer 2

For every one struggling with this, your layout file should be something like this:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    ...

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/menu_drawer"/>

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

You have to include

android:fitsSystemWindows="true"

in the DrawerLayout and in the NavigationView.

Answer 3

Sigh, I figured out my problem. There was some weird abstraction that we use to add a debug drawer on the right-hand side. As a result, the overall view hierarchy actually looks like this

<DrawerLayout id="debug">

    <LinearLayout id="debug_drawer" />

    <DrawerLayout id="nav_drawer" fitsSystemWindows="true">

        <NavigationView .... />

    </DrawerLayout>

</DrawerLayout>

So I was calling DrawerLayout.setStatusBarColor on the wrong drawer and setting fitsSystemWindows on the wrong drawer. As a result, the window never interacts with the status bar :(