Navigation bar below the toolbar

Question

I am trying to open the navigation box under 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 to reformat xml so that the navigation bar opens under the toolbar?

Answer 1

You must move the DrawerLayout as the top parent and move the Toolbar from the DrawerLayout content DrawerLayout . In short, it looks like this:

 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, the material design guide states that the navigation box should be higher than the Toolbar .

Answer 2

You should just add

 android:layout_marginTop="@dimen/abc_action_bar_default_height_material" 

to your layout, which you use as a box.

This will automatically adjust the navigation box under the toolbar, and also supports various screen sizes.

Answer 3

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 the box will appear as the top layer on the toolbar.

---

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

may not be the best, but it works!

The end result will look like this:

If you create a project as a Navigation Drawer Activity project, it will provide you with four XML files when created in your layout folder

• app_bar_main
• content_main
• navigatin_main

• activity_main

  

How are these xmls connected? basically i see include tag

Your activity is related to Activity_main

• activity_main has app_bar_main and navigation_view (box)
• app_bar_main has toolbar and content_main by default

Now it allows you to remove activity_main and set its contents directly to the main application panel and use it as the main layout for Activity.

To add a box under the toolbar, add it under android.support.design.widget.AppBarLayout , because it contains a toolbar, and it should be on top.

here is an example 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> 

ps you can set app_bar_main.XML in setContentView of your activity just play, there are many ways;)

Answer 4

these are my layouts and work fine: 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

Answer 5

If you are using a 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 a custom toolbar, you need to set the top edge of the field to the box layout.

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

Answer 6

For a simple and good solution, fitsSystemWindows=false to

 android.support.v4.widget.DrawerLayout 

which has id like

 android:id="@+id/drawer_layout" 

And for navigationView set layout_marginTop as ?attr/actionBarSize to get the size of the action bar and set it as margin

Here is the full activity_main.xml code that has as the changes listed above.