How to get the latest Android Navigation Drawer to open below the actionbar/toolbar?

Question

I've looked at other questions and answers regarding this, but since those questions, the navigation drawer activity layout & code has changed slightly. Right now I have this:

But I want the drawer to open below the actionbar/toolbar similar to this:

activity_main.xml edited:

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

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

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


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

</LinearLayout>

After changing to wrap_content I get this:

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

<include layout="@layout/content_main" />

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

I believe something needs changing in activity_main.xml and/or app_bar_main.xml... I could be wrong. Any ideas guys?

You can use a marginTop http://stackoverflow.com/questions/26464326/how-do-i-make-drawerlayout-to-display-below-the-toolbar/26470144#26470144 — Johnny, Nov 02 '15 at 15:57
Your `DrawerLayout` should be inside your main layout instead of having the main layout inside the `DrawerLayout` — Joaquin Iurchuk, Nov 02 '15 at 16:00

vguzzi · Answer 1 · 2015-11-02T16:44:31.480

0

You simply need to re-structure your xml layout to have the DrawerLayout inside a parent view with your Toolbar outside of it. Like this:

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

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" /> <-- **Change this to wrap_content**

    <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="true"
        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>
</LinearLayout>

edited Nov 02 '15 at 16:44

answered Nov 02 '15 at 16:06

vguzzi

2,420
2
15
19

That makes sense @vguzzi. I'll try that later & update. Thanks – Loui Nov 02 '15 at 16:20
Tried it @vguzzi but all that happens is toggle menu animation. Cannot see the draw open or close. Must be something simple but not quite figured it out – Loui Nov 02 '15 at 16:35
So it doesn't open with the revised xml but it did open before? – vguzzi Nov 02 '15 at 16:37
Exactly.. It's as if the drawer is hidden. In the Design element of xml it shows the drawer_layout squeezed to the bottom if that makes sense – Loui Nov 02 '15 at 16:42
ah... its because you have your app_bar_main set to match_parent. Change that to wrap_content. – vguzzi Nov 02 '15 at 16:44
ok changed to wrap_content as you said, but drawer is partially visible from the bottom – Loui Nov 02 '15 at 17:10
Edited to show screenshot of wrap_content instead of match_parent. See image above. – Loui Nov 02 '15 at 17:20

How to get the latest Android Navigation Drawer to open below the actionbar/toolbar?

1 Answers1