androidandroid-layoutmaterial-designandroid-coordinatorlayoutandroiddesignsupport

CoordinatorLayout with RecyclerView And Collapsing header


I have a layout like the following:

enter image description here

(Toolbar, Header View, Text View, RecyclerView)

I need the header to be collapsed when I scrolling recyclerview's items. So that the view "Choose item" and recyclerview left on the screen.

I saw examples when toolbar is being collapsed, but I need toolbar to be present always.

Which layouts/behavior should I use to get this work?


Solution

  • You can achieve it by having this layout:

    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        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.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <!-- HEADER -->
                <RelativeLayout
                    ...
                    app:layout_collapseMode="parallax">
                    .....
                </RelativeLayout>
    
                <android.support.v7.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />
    
            </android.support.design.widget.CollapsingToolbarLayout>
    
           <!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
            <TextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_gravity="bottom"
                 android:text="choose item" />
           -->
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    </android.support.design.widget.CoordinatorLayout>
    

    You pin your toolbar by having the app:layout_collapseMode="pin" property set. You make RecyclerView properly scrollable by setting app:layout_behavior="@string/appbar_scrolling_view_behavior" and that's pretty much it.

    NB! Position of "Choose item" TextView depends on the particular behaviour you want to achieve:

    You can read more here Android Design Support Library and here Design Support Library (III): Coordinator Layout

    I hope, it helps!