Coloring Android Status Bar in Nav Drawer

Question

In this app I'm building, I've added a Navigation Drawer fragment into my activity. I'm using 5.0, so I've been able to set the primaryColor and primaryColorDark to get the right colors. I've decided to try and style my Nav Drawer to be very similar to Google Now's drawer in 5.0, where the Nav Drawer has it's own background for the status bar. (Can't post pictures, not enough reputation >.>)

I've followed this question's recommendations here, which has helped quite a bit. I've achieved drawing my Nav Drawer under the status bar when I pull it out. Only trouble is, I can't figure out how to set the color of the status bar that shows in my drawer. Currently, it just shows white.

Here are the relevant bits of my styles and code:

Activity Layout:

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

    <!-- main content -->
    ...

    <!-- Drawer fragment -->
    <fragment
        android:id="@+id/navigation_drawer"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:theme="@style/DrawerTheme"
        android:fitsSystemWindows="true"
        android:choiceMode="singleChoice"
        android:name="com.myname.appname.NavigationDrawerFragment"
        tools:layout="@layout/fragment_navigation_drawer" />

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

Fragment Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/navDrawerFragment"
    android:theme="@style/DrawerTheme"
    android:background="@color/WindowBackground"
    tools:context=".NavigationDrawerFragment"
    android:fitsSystemWindows="true">

     <!-- content here -->

</RelativeLayout>

Per link above, setting color of my status bar for the activity (this part works correctly):

public void onCreate(Bundled savedInstanceState) {
    super.onCreate(savedInstanceState);

    // ....

    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawerLayout.setDrawerShadow(R.drawable.drawer_shadow, Gravity.START);
    drawerLayout.setStatusBarBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));

    // ....
}

And finally, my associated styles for the activity, and what I've 'tried' to assign to the fragment.

<style name="StatusBarActivityTheme" parent="MyAppTheme">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>


<style name="DrawerTheme" parent="MyAppTheme">
    <item name="android:statusBarColor">#000000</item>
    <item name="android:colorPrimaryDark">#000000</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

Thanks in advance for any help you can send my way! I suspect my issue is related to do with how Google Now's primary screen has a transparent status bar, and only colors it during the Nav Drawer, but any news to the contrary would be great!

Answer 1

With the setup you have, the Nav Drawer is simply a view drawing its background (which you have defined as android:background="@color/WindowBackground") underneath the status bar (the color of which you have set to transparent via your StatusBarActivityTheme). The system only looks as far as the Activity theme to set the status bar color; assigning android:statusBarColor to a child has no effect.

The simple solution would be to change your Nav Drawer fragment layout's android:background to the color you desire. If you wish for the portion below your image to remain white, an option would be to then add an empty View in your drawer layout with android:background="@color/WindowBackground" or some other color.

---

If you desire for the content in your Nav Drawer to extend below the status bar, it requires a bit more work. The reason it is offset to begin with is because you set the android:fitsSystemWindows attribute to true, which in turn calls the view's default fitSystemWindows(). As the docs explain, this method takes the inset (i.e. the height of the status bar in our case) and applies it as the view's padding (in your case, this becomes top padding for the RelativeLayout of your Nav Drawer fragment).

One way to circumvent this padding is to overwrite the view's fitSystemWindows() method. I direct you to the open source IO Schedule app by Google - specifically, they used the ScrimInsetsScrollView as the root element in their Nav Drawer. This modified ScrollView applies a scrim of a color of your choice (set via the custom app:insetForeground attribute) and consumes the inset, i.e. no more padding!

The ScrimInsetsScrollView can be used as a model to write your own version for any View descendant, really - see the nigh identical ScrimInsetsFrameLayout.