How do I make DrawerLayout to display below the Toolbar?

Question

How to make the drawer layout be below the actionbar/toolbar? I'm using v7:21 app compat library with the new ToolBar view.

Examples that I see looks like

<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">

<!-- drawer view -->
<LinearLayout
    android:layout_width="304dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start">

    <!-- drawer content -->

</LinearLayout>

<!-- normal content view -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- The toolbar -->
    <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 content view -->

</LinearLayout>  

But then the toolbar will be hidden by the drawer, which makes an animated hamburger icon (like v7.ActionBarDrawerToggle) useless since it will not be visible below the drawer, but I do want to use the new ToolBar view to support Material theme better.

So how to accomplish that? Is it possible to have DrawerLayout as a non top-level view?

Solution 1

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <!-- The toolbar -->
    <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" />

    <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">

        <!-- drawer view -->
        <LinearLayout
            android:layout_width="304dp"
            android:layout_height="match_parent"
            android:layout_gravity="left|start">

            <!-- drawer content -->

        </LinearLayout>

        <!-- normal content view -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">



            <!-- The rest of content view -->

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

</LinearLayout>  

Solution 2

i don't think you can when using custom toolbar

but a work around would be to set a top_margin to drawer. (the same thing on google play store!)

<!-- drawer view -->
<LinearLayout
    android:layout_marginTop="?attr/actionBarSize"
...

if you found a better solution tell me too ;)

Solution 3

Change Your drawer layout style like as below

RelativeLayout
 ----Toolbar
 ----DrawerLayout
     ---ContentView
     ---DrawerList 

Solution 4

My solution: generate template with Android Studio 2.1.2, drawer template:

Only need three changes: set margin top in view NavigationView and delete overloap statusbar in style.xml

<item name="android:windowDrawsSystemBarBackgrounds">false</item>

android:fitsSystemWindows="false"

layout main.xml set margin top get size actionbar value android:layout_marginTop="?attr/actionBarSize"

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:layout_marginTop="?attr/actionBarSize"
        android:fitsSystemWindows="false"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

Solution 5

I had issues getting this to work, and it finally displayed properly. Here is the layout I used:

<LinearLayout...[add your namespaces, etc]
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:fitsSystemWindows="true">

    <android.support.v7.widget.Toolbar [your custom toolbar] />
    <android.support.v4.widget.DrawerLayout [your drawer layout] />
        <LinearLayout>
            [content here]
        </LinearLayout>
     <android.support.design.widget.NavigationView />
</LinearLayout>

Be careful moving the design widgets around, if one is under the wrong root tag, you'll get a

"no layout_gravity_left"

exception.

View more solutions

Comments

[AnupamChugh]

journaldev.com/12648/navigationview-android

[SilSur]

@AnupamChugh - the link you provided above (journaldev.com/12648/navigationview-android) is indeed what I was looking for. Thanks!!

[AnupamChugh]

Glad it helped you shore!

[user1309971]

One solution that seems to work is to reorder the layout, using a LinearLayout as to layout, with the ToolBar and DrawerLayout as children.

[Tim Zimmermann]

Welcome to SO! Please add some explanation to your answer.

[NathofGod]

This did it for me, seems so obvious once implemented. The toolbar needs to be onto of the drawer layout rather than inside however examples of a drawer on Android Developers have the drawer at the root as the action bar by default would have been over the top.

[Eric Farraro]

This worked for me as well. Makes sense -- since Toolbar is considered to be part of the hierarchy now (as opposed to the old Action Bar), the actual placement in the layout becomes more important.

[Eric Farraro]

Worth noting that per the Material Design checklist Googled posted today android-developers.blogspot.com/2014/10/…: "Signature element: If the app uses a navigation drawer, it follows the newer material design interactions and styling (Figure 7). The drawer appears in front of the app bar. It also appears semitransparent behind the status bar."

[iamreptar]

That item in the checklist doesn't make a lot of sense, given the resulting animation after pressing the hamburger icon to open the drawer.

[Chris]

I also find it kindoff odd that they would create a nice animation of an arrow spinning, change the title and update the menu, just so it can be covered up by the drawer... Wish they would explain the logic behind it instead of feeding us the guidelines...

[Tosin Onikute]

Very true@Chris ...Actually the most annoying thing about it is that Google won't say a thing :(

[Aloha]

Didn't realize the LinearLayout solution. I was intimidated by this: A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available.

[gerfmarquez]

Is ActionBar going to be deprecated? because in such case Toolbar should work without any hassle with the drawer Layout.

[Dylan Vander Berg]

@Chris It may seem kind of weird, but they do use it in their own apps(gmail, google drive, etc.) where the drawer is above the Toolbar.

[Darshn]

this is better solution. Thanks mate

[Luis Artola]

Sooo simple! I feel like this deserves to be the accepted answer.

[SilSur]

The <item name="android:windowDrawsSystemBarBackgrounds">false</item> style setting only works for API Level 21 and higher. I always code my apps on the base of API Level 17. So this solution does not work for me...

[Codelaby]

Try put in values-21/styles.xml

[SilSur]

It works for my API Level 17 app when you put it in values-21/styles.xml but then the top of the system window no longer follows the app theme but has a black background which is definitely not the look I want for the app. I tried this solution journaldev.com/12648/navigationview-android and it works perfectly for me.