android - CoordinatorLayout with RecyclerView And Collapsing header

Question

I have a layout like the following:

(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?

Answer 1

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 include it as a first element of your RecyclerView's Adapter to scroll it away, once user start scrolling through the RecyclerView;
• you can add it into AppBarLayout so it will always stick on top of the RecyclerView, whenever you scroll it or not;

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

I hope, it helps!