Navigation Drawer Below Toolbar

Question

I am trying to get the navigation drawer to open below the toolbar.

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
tools:context=".MainActivity">
<RelativeLayout
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content">
    <include layout="@layout/toolbar"
        android:id="@+id/toolbar"/>
    <FrameLayout
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/background_color"/>
</RelativeLayout>
<ListView
    android:id="@+id/drawer"
    android:layout_width="260dp"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar"
    android:layout_marginTop="56dp"
    android:layout_gravity="start">
</ListView>
</android.support.v4.widget.DrawerLayout>

How do I reformat the xml so that the navigation bar opens below the toolbar?

@tyczj if you look at the latest version of the Google Play store. The navigation drawer is below the toolbar. I would like to implement something similar to that. — safaiyeh, Nov 18 '14 at 01:57
@tyczj How do I handle toolbar actions when the navigation bar is open — safaiyeh, Nov 18 '14 at 02:04
you dont, if you have actions you want the user to do when the drawer is open then you should put them in the drawers layout — tyczj, Nov 18 '14 at 02:07
Possible duplicate of [How do I make DrawerLayout to display below the Toolbar?](http://stackoverflow.com/questions/26464326/how-do-i-make-drawerlayout-to-display-below-the-toolbar) — Shirish Herwade, Apr 14 '16 at 11:17

score 124 · Accepted Answer · edited Dec 09 '16 at 13:43

124

You should move DrawerLayout as top parent and move Toolbar out of DrawerLayout content container. In short this looks like:

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/top_parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar">

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/background_color" />

        <ListView
            android:id="@+id/drawer"
            android:layout_width="260dp"
            android:layout_height="match_parent"
            android:layout_below="@+id/toolbar"
            android:layout_gravity="start"
            android:layout_marginTop="56dp" />

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

However, Material Design guidelines state that Navigation Drawer should be above the Toolbar.

edited Dec 09 '16 at 13:43

Shashanth

4,995
7
41
51

answered Nov 18 '14 at 02:33

Nikola Despotoski

49,966
15
119
148

This will allow me to handle toolbar actions even when the drawer is open? – safaiyeh Nov 18 '14 at 04:47
1

Yes. Because the drawer will only respond to events to the Rect it is bounded. – Nikola Despotoski Dec 07 '14 at 12:48
But the status bar is overlapping the Toolbar now. How to resolve this? – Diffy Jan 12 '15 at 10:16
@Diffy, you need to ask different question. However, seems that you have problem with your theme, otherwise, wrap the toolbar with padding View of size 25dp. – Nikola Despotoski Jan 12 '15 at 13:04
1

fitsystemwindows set to true causes that problem. Resolved anyway. – Diffy Jan 12 '15 at 13:47
5

Excellent answer Nikola! just a **little improvement**. For the ListView use `android:layout_marginTop="?attr/actionBarSize"` and in the toolbar set the same value as height. – Juan Saravia Apr 22 '15 at 01:52
You can end up in a trouble where you will not get any clicks in the layout included inside. :( AM still trying to find out a way to get that sorted. – Alok Rajasukumaran Jun 23 '16 at 12:12

score 24 · Answer 2 · answered Jul 31 '15 at 22:16

24

You should simply add

android:layout_marginTop="@dimen/abc_action_bar_default_height_material"

to your layout which you are using as drawer.

This will automatically adjust the navigation drawer below the toolbar and also supports different screen sizes.

answered Jul 31 '15 at 22:16

Muhammad Qasim

461
4
14

9

Unfortunately, `@dimen/abc_action_bar_default_height_material` is marked as private in the compatibility library, so this solution is unsafe to use as the resource name may disappear in a future release of the library. – Ted Hopp Apr 13 '16 at 17:24
5

It still creates a shadow on the toolbar when sliding out. Thats not a desired effect. Not the best way to do it. – Ali Kazi Sep 13 '16 at 05:12

Charuක · Answer 3 · 2017-02-14T16:49:06.690

You can add layout_marginTop like this,

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

but drawer will appear as a the top layer to tool bar.

Here is another Choppy way to add it below to toolbar!!!

might not be the best but it works!

end result will look like this

If you create a project as a Navigation Drawer project(Navigation Drawer Activity) it will give you four XML files at the creation in your layout folder

app_bar_main
content_main
navigatin_main
activity_main

how these xmls are linked? mostly i see include tag is used

Your Activity is linked with activity_main

activity_main has the app_bar_main and navigation_view(drawer)
app_bar_main has the toolbar and content_main by default

now lets remove activity_main and set its contents directly to app bar main and use it as the main layout for Activity.

To add the drawer under tool bar add it under the android.support.design.widget.AppBarLayout because is contains the toolbar and its should be on top.

here is an example of app_bar_main.XML

      <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="none.navhead.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>



    //------ taken from activity_main
    // content main
    <include layout="@layout/content_main" />

    // you need this padding
    <android.support.v4.widget.DrawerLayout
        android:paddingTop="?attr/actionBarSize"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <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:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />

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


</android.support.design.widget.CoordinatorLayout>

p.s you can set app_bar_main.XML to setContentView of your activity just play around there are plenty of ways ;)

This one works for me also on API23, where NavigationView is designed to be drawn behind system status bar. However, it still had shadow drawn at top, as if it was still drawn behind status bar, so I had to add app:insetForeground="@null" to the NavigationView, and it's drawn correctly below action bar (or actually Toolbar). This way also the nicely animated arrow at top left is visible, not covered by the NavigationView. — Pointer Null, Apr 24 '16 at 21:05
Also i need to add `android:layout_marginTop="?attr/actionBarSize"` to `DrawerLayout`, to make content and navigation visible properly. — Sucipto, May 20 '16 at 06:07
when i use this then data in fragment is un-clickable. plz say how to solve — roshan posakya, Jan 18 '17 at 07:37
@Charuka thanks to reply ,, but i solve this problem using different way.. — roshan posakya, Jan 19 '17 at 03:33
@PointerNull your `app:insetForeground="@null"` saved my day . it will hide that shadow above drawer. — Tejas Pandya, Dec 25 '18 at 09:38

score 9 · Answer 4 · edited Feb 23 '17 at 14:43

this is my layouts and work perfect: activity_main:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- AppBarLayout should be here -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>

    <!-- add app:layout_behavior="@string/appbar_scrolling_view_behavior" -->

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        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:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />
    </android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>

app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  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:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  tools:context=".activty.MainActivity">
<include layout="@layout/content_main"/>
</FrameLayout>

result: Bellow toolbar

This one works for putting it under a collapsing toolbar with a collapsing image. It stays under the image. — rosegrink, May 16 '17 at 13:59

score 3 · Answer 5 · answered Aug 28 '16 at 20:55

If you are using custom toolbar then use the drawer layout in this way..

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

    <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">
            ....
        </LinearLayout>

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

</LinearLayout>

and if you are not using custom toolbar then you have to set margin top to the drawer layout..

android:layout_marginTop ="?android:attr/actionBarSize"

score 3 · Answer 6 · edited Feb 23 '18 at 10:48

<?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:layout_marginTop="?attr/actionBarSize"
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="false"
        app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

android:fitsSystemWindows="false" – Tarun Umath Feb 23 '18 at 09:23 — Tarun Umath, Feb 23 '18 at 09:23

score 0 · Answer 7 · answered Oct 13 '17 at 22:29

An Easy and Good solution is set fitsSystemWindows=false for

android.support.v4.widget.DrawerLayout

that has id as

android:id="@+id/drawer_layout"

And for navigationView set layout_marginTop as ?attr/actionBarSize that would get the actionbar size and set it as margin

Here is complete code of activity_main.xml that has both the changes listed above.

Navigation Drawer Below Toolbar

7 Answers7

Linked

Related