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?

@AnupamChugh - the link you provided above (**journaldev.com/12648/navigationview-android**) is indeed what I was looking for. Thanks!! — SilSur, Mar 07 '18 at 10:03

score 96 · Accepted Answer · answered Oct 24 '14 at 19:48

96

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

answered Oct 24 '14 at 19:48

Alexander Mamutov

1,143
7
15

5

Welcome to SO! Please add some explanation to your answer. – Tim Zimmermann Oct 24 '14 at 19:57
3

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. – NathofGod Oct 26 '14 at 11:21
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 Oct 27 '14 at 07:09
3

Worth noting that per the Material Design checklist Googled posted today http://android-developers.blogspot.com/2014/10/material-design-on-android-checklist.html: "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." – Eric Farraro Oct 28 '14 at 21:44
2

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. – iamreptar Nov 26 '14 at 22:40
7

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... – Chris Feb 25 '15 at 19:07
Very true@Chris ...Actually the most annoying thing about it is that Google won't say a thing :( – Tosin Onikute Jun 23 '15 at 10:59
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.` – Aloha Jul 13 '15 at 10:55
Is ActionBar going to be deprecated? because in such case Toolbar should work without any hassle with the drawer Layout. – gerfmarquez Aug 07 '15 at 20:23
@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`. – Dylan Vander Berg Aug 09 '15 at 03:28

score 22 · Answer 2 · edited Dec 27 '16 at 17:35

22

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 ;)

edited Dec 27 '16 at 17:35

Charuක

12,953
5
50
88

answered Oct 20 '14 at 16:12

EC84B4

7,676
4
23
34

3

One solution that seems to work is to reorder the layout, using a LinearLayout as to layout, with the ToolBar and DrawerLayout as children. – user1309971 Oct 21 '14 at 08:48
1

this is better solution. Thanks mate – Darshn May 06 '16 at 11:27
Sooo simple! I feel like this deserves to be the accepted answer. – Luis Artola Jul 18 '16 at 21:26

score 4 · Answer 3 · edited Dec 28 '15 at 09:43

4

Change Your drawer layout style like as below

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

edited Dec 28 '15 at 09:43

Dave Chen

10,887
8
39
67

answered Oct 09 '15 at 05:36

Mahendran Candy

1,114
17
17

score 4 · Answer 4 · answered Sep 01 '16 at 16:23

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>

The **false** 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... — SilSur, Mar 07 '18 at 09:52
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 **https://www.journaldev.com/12648/navigationview-android** and it works perfectly for me. — SilSur, Mar 07 '18 at 10:11

score 1 · Answer 5 · edited Dec 27 '16 at 17:37

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.

score 1 · Answer 6 · answered Aug 08 '18 at 08:49

I have found a simpler solution: Set the DrawerLayout and NavigationView attribute:

android:fitsSystemWindows="false"

and then give marginTop to navigation view as

"?actionBarSize"

maybe your statusbar background will become transparent in that case in styles.xml add

<item name="android:statusBarColor">@color/colorPrimaryDark</item>

attribute to get back the normal color or any other color you want...

score 0 · Answer 7 · answered Feb 05 '20 at 16:33

Here is the Kotlin solution:

In the layout file containing your DrawerLayout...

Add android:keepScreenOn="true" to the DrawerLayout
Add android:layout_marginTop="?android:attr/actionBarSize" to the NavigationView

The full XML piece should look like this:

<com.mullr.neurd.Miscellaneous.CustomDrawerLayout
android:id="@+id/clipped_drawer_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keepScreenOn="true"
tools:openDrawer="start"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

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

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_marginTop="?android:attr/actionBarSize"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</com.mullr.neurd.Miscellaneous.CustomDrawerLayout>

That should do it (ignore my clipped nav drawer).

How do I make DrawerLayout to display below the Toolbar?

7 Answers7

Linked

Related