Navigation Drawer semi-transparent over status bar not working Navigation Drawer semi-transparent over status bar not working android android

Navigation Drawer semi-transparent over status bar not working


Your status bar background is white, the background of your drawer LinearLayout. Why? You are settings fitsSystemWindows="true" for your DrawerLayout and the LinearLayout inside it. This causes your LinearLayout to expand behind the status bar (which is transparent). Thus, making the background for the drawer part of the status bar white.

enter image description here
If you don't want your drawer to extend behind the status bar (want to have a semi-transparent background for the whole status bar), you can do two things:

1) You can simply remove any background value from your LinearLayout and color the background of your content inside it. Or

2) You can remove fitsSystemWindows="true" from your LinearLayout. I think this is a more logical and cleaner approach. You will also avoid having a shadow being cast under the status bar, where your navigation drawer doesn't extend.

enter image description here
If you want your drawer to extend behind the status bar and have a semi-transparent, status bar sized overlay, you can use a ScrimInsetFrameLayout as a container for your drawer content (ListView) and set the status bar background using app:insetForeground="#4000". Of course, you can change #4000 to anything you want. Don't forget to keep fitsSystemWindows="true" here!

Or if you don't want to overlay your content and only display a solid color, you can just set the background of your LinearLayout to anything you want. Don't forget to set the background of your content separately though!

EDIT: You no longer need to deal with any of this. Please see Design Support Library for a times easier Navigation Drawer/View implementation.


All you need to do is to use some semi-transparent color for status bar. Add these lines to your v21 theme:

<item name="android:windowDrawsSystemBarBackgrounds">true</item><item name="android:statusBarColor">@color/desired_color</item>

Don't forget that the color (resource) must always be in the format of #AARRGGBB. This means that the color will also include the alpha value.


Why not use something similar to this?

<android.support.v4.widget.DrawerLayout        xmlns:android="http://schemas.android.com/apk/res/android"        android:id="@+id/drawer_layout"        android:layout_width="match_parent"        android:layout_height="match_parent"        >    <FrameLayout            android:id="@+id/content_frame"            android:layout_width="match_parent"            android:layout_height="match_parent"/>    <ListView            android:id="@+id/left_drawer"            android:layout_width="240dp"            android:layout_height="match_parent"            android:layout_gravity="start"            android:choiceMode="singleChoice"            android:divider="@android:color/transparent"            android:dividerHeight="0dp"            android:background="#80111111"/></android.support.v4.widget.DrawerLayout>

The code above uses the alpha resource in the android:background to be able to show transparency within the actionbar.

There are other ways to do this through code, as other answers show. My answer above, does the necessary in the xml layout file, which in my opinion is easily edited.