safaiyeh safaiyeh - 4 months ago 87
Android Question

Navigation Drawer Below Toolbar

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?

Answer

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:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/top_parent"
    tools:context=".MainActivity">

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

<android.support.v4.widget.DrawerLayout
android:layout_below="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout">
    <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_marginTop="56dp"
    android:layout_gravity="start">
</ListView>
</android.support.v4.widget.DrawerLayout>

</RelativeLayout>

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