androidandroid-layoutandroid-coordinatorlayoutandroid-appbarlayoutandroid-drawer

CoordinatorLayout + AppBarLayout + NavigationDrawer


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>

Solution

  • 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!