CoordinatorLayout + AppBarLayout + NavigationDrawer

Question

I have a layouting problem when combining CoordinatorLayout with an AppBarLayout and a NavigationDrawer.

The problem is, that the NavigationDrawer and it's content are hidden behind the toolbar. I have already did a lot of research and tried a lot of restructuring, but none of the "solutions" fixed my issue.

A demonstration can be found in this little Webm video: https://www.dropbox.com/s/i5zfc2x2ts2fws7/navigation_drawer_stackoverflow32523188.webm?dl=0

The base style is Theme.AppCompat.Light.NoActionBar.

My activity_overview.xml looks 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/overview_coordinator_layout"     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.Dark.ActionBar">           <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             android:background="?attr/colorPrimaryDark"             app:layout_scrollFlags="enterAlways|scroll" />       </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:clickable="true"         android:focusableInTouchMode="true">          <android.support.v4.widget.NestedScrollView             android:layout_width="match_parent"             android:layout_height="wrap_content"             app:layout_behavior="@string/appbar_scrolling_view_behavior">              <TextView                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:text="@string/lorem_ipsum_long" />         </android.support.v4.widget.NestedScrollView>          <android.support.design.widget.NavigationView             android:id="@+id/nvView"             android:layout_width="wrap_content"             android:layout_height="match_parent"             android:layout_gravity="start"             android:background="@android:color/white"             app:headerLayout="@layout/nav_header"             app:menu="@menu/navigationdrawer_main" />      </android.support.v4.widget.DrawerLayout>       <android.support.design.widget.FloatingActionButton         android:id="@+id/overview_floating_action_button"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_margin="16dp"          android:clickable="true"         android:src="@drawable/ic_add"         app:layout_anchor="@id/overview_coordinator_layout"         app:layout_anchorGravity="bottom|right|end"         app:layout_behavior="@string/fab_onscroll_behavior" />  </android.support.design.widget.CoordinatorLayout> 

Answer 1

Your CoordinatorLayout is wrapping your DrawerLayout and NavigationView, which means the Coordinator is in control of how everything is laid out. You need to nest the Coordinator inside the drawer, like so:

<android.support.v4.widget.DrawerLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:clickable="true"     android:focusableInTouchMode="true">      <android.support.design.widget.CoordinatorLayout         xmlns:app="http://schemas.android.com/apk/res-auto"         android:id="@+id/overview_coordinator_layout"         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.Dark.ActionBar">               <android.support.v7.widget.Toolbar                 android:id="@+id/toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 android:background="?attr/colorPrimaryDark"                 app:layout_scrollFlags="enterAlways|scroll" />          </android.support.design.widget.AppBarLayout>          <android.support.v4.widget.NestedScrollView             android:layout_width="match_parent"             android:layout_height="wrap_content"             app:layout_behavior="@string/appbar_scrolling_view_behavior">              <TextView                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:text="@string/lorem_ipsum_long" />          </android.support.v4.widget.NestedScrollView>          <android.support.design.widget.FloatingActionButton             android:id="@+id/overview_floating_action_button"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_margin="16dp"             android:clickable="true"             android:src="@drawable/ic_add"             app:layout_anchor="@id/overview_coordinator_layout"             app:layout_anchorGravity="bottom|right|end"             app:layout_behavior="@string/fab_onscroll_behavior" />      </android.support.design.widget.CoordinatorLayout>      <android.support.design.widget.NavigationView         android:id="@+id/nvView"         android:layout_width="wrap_content"         android:layout_height="match_parent"         android:layout_gravity="start"         android:background="@android:color/white"         app:headerLayout="@layout/nav_header"         app:menu="@menu/navigationdrawer_main" />  </android.support.v4.widget.DrawerLayout> 

That should sort it out!