How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar?

Question

I've seen in the new material design Side Nav spec that you can display the drawer over the action bar and behind the status bar. How can I implement this?

Answer 1

New functionality in the framework and support libs allow exactly this. There are three 'pieces of the puzzle':

1. Using Toolbar so that you can embed your action bar into your view hierarchy.
2. Making DrawerLayout fitsSystemWindows so that it is layed out behind the system bars.
3. Disabling Theme.Material's normal status bar coloring so that DrawerLayout can draw there instead.

I'll assume that you will use the new appcompat.

First, your layout should look like this:

<!-- The important thing to note here is the added fitSystemWindows --> <android.support.v4.widget.DrawerLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/my_drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true">      <!-- Your normal content view -->     <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical">          <!-- We use a Toolbar so that our drawer can be displayed              in front of the action bar -->         <android.support.v7.widget.Toolbar               android:id="@+id/my_awesome_toolbar"             android:layout_height="wrap_content"             android:layout_width="match_parent"             android:minHeight="?attr/actionBarSize"             android:background="?attr/colorPrimary" />          <!-- The rest of your content view -->      </LinearLayout>      <!-- Your drawer view. This can be any view, LinearLayout          is just an example. As we have set fitSystemWindows=true          this will be displayed under the status bar. -->     <LinearLayout         android:layout_width="304dp"         android:layout_height="match_parent"         android:layout_gravity="left|start"         android:fitsSystemWindows="true">          <!-- Your drawer content -->      </LinearLayout>  </android.support.v4.widget.DrawerLayout> 

Then in your Activity/Fragment:

public void onCreate(Bundled savedInstanceState) {     super.onCreate(savedInstanceState);      // Your normal setup. Blah blah ...      // As we're using a Toolbar, we should retrieve it and set it     // to be our ActionBar     Toolbar toolbar = (...) findViewById(R.id.my_awesome_toolbar);     setSupportActionBar(toolbar);      // Now retrieve the DrawerLayout so that we can set the status bar color.     // This only takes effect on Lollipop, or when using translucentStatusBar     // on KitKat.     DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);     drawerLayout.setStatusBarBackgroundColor(yourChosenColor); } 

Then you need to make sure that the DrawerLayout is visible behind the status bar. You do that by changing your values-v21 theme:

values-v21/themes.xml

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

Note: If a <fragment android:name="fragments.NavigationDrawerFragment"> is used instead of

<LinearLayout     android:layout_width="304dp"     android:layout_height="match_parent"     android:layout_gravity="left|start"     android:fitsSystemWindows="true">      <!-- Your drawer content -->  </LinearLayout> 

the actual layout, the desired effect will be achieved if you call fitsSystemWindows(boolean) on a view that you return from onCreateView method.

@Override public View onCreateView(LayoutInflater inflater,                           ViewGroup container,                          Bundle savedInstanceState) {     View mDrawerListView = inflater.inflate(         R.layout.fragment_navigation_drawer, container, false);     mDrawerListView.setFitsSystemWindows(true);     return mDrawerListView; }