CODEWITHSUNDEEP
androidandroid-studionavigation-drawertoolbar
Nick
Nick

Reputation: 499

Set navigation drawer under toolbar

My question is simple.

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

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

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:

As you can see, the FrameLayout does not cover the toolbar

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

Upvotes: 2

Views: 4267

Answers (1)

Konstantin Loginov
Konstantin Loginov

Reputation: 16000

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.

Upvotes: 5

Related Questions