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!