Set navigation drawer under toolbar

Question

My question is simple.

I created a navigation drawer activity. When the drawer is open it looks like this:

I want the drawer to be under the toolbar, so I will see the "back arrow", like this:

From other projects I've seen, I think it can be done by using "FrameLayout". The "nav_header" layout contains a FrameLayout which covers the whole screen but the toolbar. I just could not figure out how exactly to do this:

P.S. How do I set the navigation drawer's width? I want it narrower...

look here http://stackoverflow.com/questions/26985270/navigation-drawer-below-toolbar — Context, Dec 06 '15 at 10:27

score 5 · Answer 1 · answered Dec 06 '15 at 20:20

Regarding the positioning of the Navigation drawer to Toolbar, as has been explained in the post @Stankovitch referring to, - it's just a question of the ordering of UI-elements in the XML of your activity

I bet, you have something like this now:

<android.support.v4.widget.DrawerLayout>
    <RelativeLayout>
         <android.support.v7.widget.Toolbar/>
         <FrameLayout/> <!-- Screen content-->
    </RelativeLayout>
    <android.support.design.widget.NavigationView/> <!-- drawer content-->
</android.support.v4.widget.DrawerLayout>

So you need to rewrite it to:

    <RelativeLayout>
         <android.support.v7.widget.Toolbar/>
         <android.support.v4.widget.DrawerLayout>
             <FrameLayout/> <!-- Screen content-->
             <android.support.design.widget.NavigationView/> <!-- drawer content -->
         </android.support.v4.widget.DrawerLayout>
    </RelativeLayout>

Regarding the width - just specify the desired width explicitly:

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

The drawer above will be 100dp wide.

Set navigation drawer under toolbar

1 Answers1