Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android design library CoordinatorLayout, AppBarLayout and DrawerLayout

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?

like image 307
wujek Avatar asked Jun 08 '15 21:06

wujek


People also ask

What is Android CoordinatorLayout?

CoordinatorLayout is a super-powered FrameLayout . CoordinatorLayout is intended for two primary use cases: As a top-level application decor or chrome layout. As a container for a specific interaction with one or more child views.

Is CoordinatorLayout deprecated?

The CoordinatorLayout. DefaultBehavior annotation is deprecated. Use the CoordinatorLayout. AttachedBehavior interface instead.

What is AppBarLayout?

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures. Children should provide their desired scrolling behavior through AppBarLayout.

What is collapsing toolbar Android?

Android CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. This type of layout is commonly seen in the Profile Screen of the Whatsapp Application.


1 Answers

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>
like image 111
mtazamaji Avatar answered Sep 18 '22 01:09

mtazamaji