Android design library CoordinatorLayout, AppBarLayout and DrawerLayout

Question

I'm using the Android design library on API 22. I would like to:

1. have a Toolbar and a DrawerLayout inside which there is a RecyclerView
2. have the DrawerLayout be below the Toolbar; for example, when the toolbar is visible, the drawer's main content should be below it, and the (left) drawer should also be below it so that when it is expanded, the toolbar is still visible
3. have Toolbar be scrolled off the screen when the recycler view is scrolled down

Is this even possible? I have problems to marry #2 and #3. The way it is now is that the toolbar is always above the drawer layout, covering the first entry in the recycler, and the top of the left drawer as well. Here is my layout file (incomplete, but showing my structure):

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"/>

    </android.support.v4.widget.DrawerLayout>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Toolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

It looks like though the RecyclerView's app:layout_behavior="@string/appbar_scrolling_view_behavior" setting has no effect, because when deleted, the behavior is the same.

I tried adding a RelativeLayout as a child of the CoordinatorLayout to define that the drawer is below the toolbar etc. but nothing seems to work.

Is what I'm trying to achieve possible with the library?

Solution 1

Try the following if you want to see the animation of the hamburger icon and arrow. If you include the top margin (layout_marginTop) for NavigationView it will move it down.

<?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:id="@+id/navigation_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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="match_parent">

        <android.support.design.widget.AppBarLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways" />

        </android.support.design.widget.AppBarLayout>

        <!-- main content view -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/background_light"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>

    <!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_menu"/>

</android.support.v4.widget.DrawerLayout>

Solution 2

Yes! It is possible.

<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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".StartupActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/Theme.AppCompat.NoActionBar"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/scrollRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

    </android.support.design.widget.CoordinatorLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/drawer_recycler_view"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@color/WhiteColor"
        android:fitsSystemWindows="true"
        android:scrollbars="vertical"/>

</android.support.v4.widget.DrawerLayout>

As you can see, what matters is basically that you set app:layout_scrollFlags="scroll|enterAlways" for your toolbar to hide when you scroll. The RecyclerView at the bottom of the code is the one inside the DrawerLayout, the one above is the one in your main activity layout.

Comments

[wujek]

I know what happens, I tried it. If I put the Toolbar within the main content of the DrawerLayout (with the RecyclerView), the drawer will cover the toolbar. I would like the drawer to be below the Toolbar. Otherwise I won't see the fancy animation of the hamburger icon and arrow. But, maybe it is the way now, as all the new apps (even the Photos app etc.) simply have the drawer cover the toolbar as well? I really don't like the way the standard drower looks like, with the header covering the toolbar, as it seems to heavy weighted, but it seems to be the standard.

[wujek]

I am not using the NavigationView yet as I am taking it step by step and replacing the existing, custom code with the library code, and haven't come to the drawer yet. But, I am not sure if I can use it - it requires a menu, i.e. it is static what it can present, and my drawer is basically a RecyclerView whose entries come from a database, which means its content is dynamic and completely unknown at compile time. I don't know yet if the NavigationView supports this use case.

[radley]

The new NavigationView is meant to go all the way to the top, including the status bar. If you want it to show lower, add empty margins at the top.