Develop Reference

Why is my comman navigation darwerlayout and content.xml overlapping each other

Question: Why my common navigation drawer layout and content.xml is overlapping each other
I want to implement common navigation drawer for all the multiple activities by using include. I have created a separated XML file for navigation drawer and also include toolbar code inside it.
Navigation.xml
This the navigation part where we include toolbar and drawer code.so here we are implementing simple navigation code by using drawer layout and recycle view
<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/navigation_Drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/navigation_drawerlayout" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation_View"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/navigation_headerview" />
<android.support.v7.widget.RecyclerView
android:visibility="gone"
android:id="#+id/navigationRecycleView"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Toolbar.xml
this the common toolbar for all the activities.the most uses of it we can easily reuse the code.in which I've simply use CoordinatorLayout and AppBarLayout inside it use toolbar layout with a title.so that I can show toolbar title with a toolbar.
<?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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:titleTextColor="#android:color/white">
<!-- Screen title -->
<TextView
android:id="#+id/toolbarTitle"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=""
android:textColor="#android:color/white"></TextView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
contents.xml
this the content file where we define my code logic and implementation and also similar to all the activities which use the common navigation drawer
<?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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".Activities.EventsActivity"
tools:showIn="#layout/toolbar"
>
<!-- Events -->
<include
layout="#layout/toolbar" />
<android.support.v7.widget.RecyclerView
android:layout_marginTop="55dp"
android:id="#+id/events_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>

Xamarin Android FrameLayout and Content Overlapping on Navigation Bar And on Menu

Screenshot 1
Screenshot 2
The above screen shots is preview for application previewing on android. As you see the FrameLayout and content of FrameLayout is overlapping on NavigationBar and on Menu. How should I make the content visible within frame. Also I want the content should placed behind the NavigationBar.
Below is the code of Main.axml file:
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true">
<include layout="#layout/toolbar" />
<FrameLayout android:id="#+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/nav_menu"
/>
</android.support.v4.widget.DrawerLayout>

How should I make the content visible within frame. Also I want the content should placed behind the NavigationBar.
Put your FrameLayout and toolbar in a LinearLayout like this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/ll">
<include layout="#layout/toolbar" />
<FrameLayout android:id="#+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
/>
</LinearLayout>
EDIT :
no content is visible on menu item click
In your toolbar.axml, your CoordinatorLayout's layout_height property is match_parent, so no content is visible.
Modify your toolbar.axml code like this :
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="#2196F3" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Then your project will works fine.

Navigation Drawer Fragment cut off at top

I'm using the Navigation Drawer Template on android and I'm also using fragments. Whenever there is a fragment, the action cuts off the fragment's top. I haven't changed the default code other than adding in the fragment. How do you get the fragment to load below the action bar?
picture of the problem:
*update
Now it looks like this
activity_main.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_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:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
fragment xml
<LinearLayout 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"
tools:context="com.example.android.slidemenu.TestFragment"
android:orientation="horizontal">
<!-- TODO: Update blank fragment layout -->
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#android:drawable/ic_menu_compass"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TESTTEST"
android:textSize="50sp"/>
</LinearLayout>
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="com.example.android.slidemenu.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>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

The FrameLayout needs to be below the Toolbar, and inside the CoordinatorLayout. Try to restructure like so.
Include the "main contents" in the DrawerLayout. Then add the FrameLayout after the AppBarLayout (or include other views if Fragments aren't needed).
The secret line that "pushes" down the FrameLayout is this line
app:layout_behavior="#string/appbar_scrolling_view_behavior"
drawer layout 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/nav_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_main_drawer" />
</android.support.v4.widget.DrawerLayout>
nav_content.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.example.android.slidemenu.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>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Put the FrameLayout inside the CoordinatorLayout, after the AppBarLayout.
EDIT: Try removing the android:fitsSystemWindows=true.

Setting android:fitsSystemWindows to false instead of removing it did the trick for me. Thx amitairos for the hint ;).

Why android toolbar height is cut?

I am new to the design pattern in latest android studio,the one with include
tag.I tried tweaking the files but ended up with cut toolbar.
First Activity
first_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical">
<include layout="#layout/app_bar_main" android:layout_width="match_parent"
android:layout_height="wrap_content" />
<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">
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/main_nav_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#888"
android:dividerHeight="1dp"
android:background="#fff"/>
<!--android:listSelector="#drawable/list_selector"-->
</android.support.v4.widget.DrawerLayout> </LinearLayout>
Here's my app bar layout.
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=".Activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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>
</android.support.design.widget.CoordinatorLayout>

Change your toolbar XML this way:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
Notice that minHeight disallows smaller sizes, and the wrap_content height now allows bigger toolbars.

Remove fitSystemWindows Attribute from your theme
<item name="android:fitsSystemWindows">true</item>

Try this...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize" />
<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">
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/main_nav_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
android:choiceMode="singleChoice"
android:divider="#888"
android:dividerHeight="1dp" />
<!--android:listSelector="#drawable/list_selector"-->
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

Change your app_bar_main layout as below -
<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
tools:context="com.bits.ketan.geocoding.MainActivity">
<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" />
</LinearLayout>

I am new to the design pattern in latest android studio,the one with
include tag.I tried tweaking the files but ended up with cut toolbar
I've had the similiar problem, it's working on real devices by the way.
And, Try to use
<include layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
inside your DrawerLayout with that Toolbar inside the AppBarLayout
Check the following links:
http://developer.android.com/training/implementing-navigation/nav-drawer.html#DrawerLayout
To add a navigation drawer, declare your user interface with a
DrawerLayout object as the root view of your layout. Inside the
DrawerLayout, add one view that contains the main content for the
screen (your primary layout when the drawer is hidden) and another
view that contains the contents of the navigation drawer.
And, use NavigationView instead of that ListView.
A good example:
http://developer.android.com/intl/es/reference/android/support/design/widget/NavigationView.html
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your contents -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>

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?

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: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, Material Design guidelines state that Navigation Drawer should be above the Toolbar.

You should simply add
android:layout_marginTop="#dimen/abc_action_bar_default_height_material"
to your layout which you are using as drawer.
This will automatically adjust the navigation drawer below the toolbar and also supports different screen sizes.

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 drawer will appear as a the top layer to tool bar.
Here is another Choppy way to add it below to toolbar!!!
might not be the best but it works!
end result will look like this
If you create a project as a Navigation Drawer project(Navigation Drawer Activity) it will give you four XML files at the creation in your layout folder
app_bar_main
content_main
navigatin_main
activity_main
how these xmls are linked? mostly i see include tag is used
Your Activity is linked with activity_main
activity_main has the app_bar_main and navigation_view(drawer)
app_bar_main has the toolbar and content_main by default
now lets remove activity_main and set its contents directly to app bar main and use it as the main layout for Activity.
To add the drawer under tool bar
add it under the android.support.design.widget.AppBarLayout because is contains the toolbar and its should be on top.
here is an example of 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>
p.s you can set app_bar_main.XML to setContentView of your activity
just play around there are plenty of ways ;)

this is my layouts and work perfect:
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

If you are using 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 custom toolbar then you have to set margin top to the drawer layout..
android:layout_marginTop ="?android:attr/actionBarSize"

<?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:layout_marginTop="?attr/actionBarSize"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

An Easy and Good solution is set fitsSystemWindows=false for
android.support.v4.widget.DrawerLayout
that has id as
android:id="#+id/drawer_layout"
And for navigationView set layout_marginTop as ?attr/actionBarSize that would get the actionbar size and set it as margin
Here is complete code of activity_main.xml that has both the changes listed above.