How to place the navigation box under the toolbar?

Question

Here, my navigation box is above the toolbar. I also added some xml code. Please help me.

here is my activity.xml

<?xml version="1.0" encoding="utf-8"?> <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"> <include layout="@layout/app_bar_categories" 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:menu="@menu/activity_main2_drawer" /> </android.support.v4.widget.DrawerLayout> 

and my app_bar 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="com.ezybzy.ezybzy.categoris"> <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_categoris" /> </android.support.design.widget.CoordinatorLayout> 

and my main.xml content

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.ezybzy.ezybzy.categoris" tools:showIn="@layout/app_bar_categories" android:background="#ffffff"> </RelativeLayout> 

I created a navigation box using the activity of the Android navigation box.

Answer 1

of course android:layout_marginTop="?attr/actionBarSize" do the job in

 <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" android:layout_marginTop="?attr/actionBarSize"> 

But the problem with drawerlayout is the top of the toolbar. That is why the fading is here. you can remove the attenuation on

 mDrawerLayout.setScrimColor(getResources().getColor(android.R.color.transparent)); 

But on some devices, it may look wired.

Decision

When working with Android-studio. We can create a NavigationDrawerActiviity There are 3 files named

activity_main.xml

app_bar_main.xml

nav_header_main.xml

content_main.xml

So, we can skip app_bar_main.xml and we can remove the attenuation.

Step 1

Make the root view of the main activity as Vertical LinearLayout

 <LinearLayout 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:orientation="vertical" android:fitsSystemWindows="true" tools:context="com.example.MainActivity"> </LinearLayout> 

In activity_main.xml add DrawerLayout and include content_main.xml in DrawerLayout . and Add AppBarLayout above DrawerLayout .

 <LinearLayout 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:orientation="vertical" tools:context="com.qproinnovations.schoolmanagement.activity.HomeActivity"> <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.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <!-- drawer view --> <include layout="@layout/content_main" /> <!-- drawer content --> <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:menu="@menu/activity_home_drawer" /> </android.support.v4.widget.DrawerLayout> </LinearLayout> 

Step 2

add and replace setContentView() with NavigationDrawerActiviity with

 setContentView(R.layout.activity_main); 

Finally, we have

Answer 2

Add

 android:layout_marginTop="?attr/actionBarSize" 

to your layout, which you use as a box.

Answer 3

In your xml navigation box, you must add android:layout_marginTop ="?android:attr/actionBarSize" to the container.

Answer 4

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 5

Create a layout like this:

  <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:elevation="4dp" android:layout_height="fill_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include android:id="@+id/tool_bar" layout="@layout/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" /> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg_new"> <put your layout here................> </FrameLayout> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" android:background="@drawable/bg_all" app:itemIconTint="@android:color/white" app:itemTextColor="@android:color/white" app:theme="@style/list_item_appearance" app:menu="@menu/drawer_menu" > </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout> 

Answer 6

Your drawer covering your toolbar, to avoid this, try under the code

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="56dp" android:layout_gravity="start" android:background="@android:color/transparent" android:minHeight="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/toolBarStyle" app:titleTextAppearance="@style/Toolbar.TitleText" /> <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:layout_below="@+id/toolbar" android:fitsSystemWindows="true"> <RelativeLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="0dp" android:background="@android:color/transparent" /> <fragment android:id="@+id/navigation_drawer" class="com.buzzintown.consumer.drawer.NavigationDrawerFragment" android:layout_width="310dp" android:layout_height="match_parent" android:layout_gravity="start" tools:layout="@layout/drawer_layout" /> </android.support.v4.widget.DrawerLayout> </RelativeLayout> 

Answer 7

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" tools:openDrawer="start"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="@dimen/abc_action_bar_default_height_material" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!--content_main is my layout you can design your own--> <!--one more thing is dont put toolbar in your content_main layout--> <include layout="@layout/content_main" /> <FrameLayout android:id="@+id/content" layout="@layout/content_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- The navigation drawer --> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/activity_main_drawer" /> </android.support.v4.widget.DrawerLayout> </LinearLayout> 

Answer 8

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.

 <?xml version="1.0" encoding="utf-8"?> <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="false" 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_marginTop="?attr/actionBarSize" android:layout_gravity="start" android:fitsSystemWindows="true" app:menu="@menu/activity_main_drawer" /> <!--app:headerLayout="@layout/nav_header_main"--> </android.support.v4.widget.DrawerLayout> 

Answer 9

use can change the navigation box xml android:layout_marginTop ="0dp" set the top margin on the toolbar