I'm trying to create a Nav Drawer like the one from the Material spec (like the one from the new gmail app). Note how the contents of the nav drawer draw behind the status bar:
Using Chris Banes' answer from this question, I was able to successfully make the navigation drawer in my app draw behind the status bar; that's working fine. What isn't working is drawing the contents of the nav drawer behind the status bar. I want the blue image in my drawer to be displayed behind the status bar, but that area is drawn with the color of status bar, as seen in this screenshot.
So, how can I make my navigation drawer draw in the area behind the status bar? I've posted the relevant parts of my project below.
Base layout containing the navigation drawer:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/nav_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:fitsSystemWindows="true"> <!-- Framelayout to display Fragments --> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/warning_container" /> <FrameLayout android:id="@+id/navigation_drawer_fragment_container" android:layout_width="300dp" android:layout_height="match_parent" android:fitsSystemWindows="true" android:layout_gravity="start"> <fragment android:id="@+id/navigation_drawer_fragment" android:name="com.thebluealliance.androidclient.fragments.NavigationDrawerFragment" android:layout_width="match_parent" android:layout_height="match_parent" tools:layout="@layout/fragment_navigation_drawer" /> </FrameLayout> </android.support.v4.widget.DrawerLayout>
Theme of my activity
<style name="AppThemeNoActionBar" parent="AppTheme"> <item name="windowActionBar">false</item> <item name="android:windowNoTitle">true</item> <item name="android:windowDrawsSystemBarBackgrounds">true</item> <item name="android:statusBarColor">@android:color/transparent</item> </style>
In onCreate()
of my activity, I do the following:
mDrawerLayout.setStatusBarBackground(R.color.primary_dark);
Android App Development for BeginnersStep 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. Step 3 − Add the following code to res/layout/nav_header_main.
The user can view the navigation drawer when they swipe the activity's screen from the left edge of the android device. A user can also find it from the activity, by tapping the app icon (also known as the “hamburger” menu) in the action bar.
For API 21+
<style name="AppTheme" parent="android:Theme.Holo.NoActionBar.TranslucentDecor"> ... </style>
For API 19+
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:windowTranslucentStatus">true</item> </style>
Your layout should have android:fitsSystemWindows="false"
(which is the default).
Now since you want to toggle the translucency you can do it programatically:
Window window = getWindow(); // Enable status bar translucency (requires API 19) window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); // Disable status bar translucency (requires API 19) window.getAttributes().flags &= (~WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); // Set a color (requires API 21) window.setStatusBarColor(Color.RED);
I leave all the sdk version checking to you :)
<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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:fitsSystemWindows="true"> <include layout="@layout/toolbar" /> <!-- Main layout --> <FrameLayout android:id="@+id/main_fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <!-- Nav drawer --> <fragment android:id="@+id/fragment_drawer" android:name="com.example.DrawerFragment" android:layout_width="@dimen/drawer_width" android:layout_height="match_parent" android:layout_gravity="left|start" android:fitsSystemWindows="true" /> </android.support.v4.widget.DrawerLayout>
values/themes.xml
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@color/primary</item> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:textColorPrimary">@color/textColorPrimary</item> </style> <style name="AppTheme" parent="AppTheme.Base"> </style>
values-v19/themes.xml
<style name="AppTheme" parent="AppTheme.Base"> <!--This makes the status bar transparent in KK and Lollipop--> <!--You do not need values-v21 and if you create them make sure you extend from this one--> <item name="android:windowTranslucentStatus">true</item> </style>
If you want to change the color (different from transparent black) of the status bar, you are gonna need to go for the other approach with the custom view, because mDrawerLayout.setStatusBarBackgroundColor(int)
will only be activated if this DrawerLayout fitsSystemWindows (android:fitsSystemWindows="true"
), and if you do it won't be draw behind the status bar but under it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With