Add app bar scrolling view behavior to multiple views in CoordinatorLayout

Question

I am looking to add scroll support to more than just a single, scrollable, child view of CoordinatorLayout in conjunction with an AppBarLayout and CollapsingToolbarLayout. When scrolling the RecyclerView or the AppBarLayout (condensed code below), the app bar and its contents successfully scroll and collapse. However, when attempting to initiate a scroll event on the LinearLayout above the RecyclerView, nothing happens because the LinearLayout does not know to scroll or collapse the view.

The goal is to have the LinearLayout act as a sticky header to the RecyclerView and footer to the AppBarLayout and receive the same scrolling behavior as the RecyclerView, similar to Spotify's shuffle play/available offline header. In fact, it would be great if the appbar_scrolling_view_behavior layout_behavior could be applied to the LinearLayout similarly to the RecyclerView, but I imagine that the behavior is ignored on non-scrollable views. Is anyone aware of a workaround for this that does not require implementing the LinearLayout view as a row in the RecyclerView?

<android.support.design.widget.CoordinatorLayout     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:layout_width="match_parent"     android:layout_height="match_parent">      <android.support.design.widget.AppBarLayout         android:id="@+id/app_bar_layout"         android:layout_width="match_parent"         android:layout_height="@dimen/collapsible_app_bar_height"         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">          <android.support.design.widget.CollapsingToolbarLayout             android:id="@+id/collapsing_toolbar_layout"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:background="@drawable/gradient_banner"             app:contentScrim="@color/background_content_frame"             app:layout_scrollFlags="scroll|exitUntilCollapsed">              <ImageView                 android:id="@+id/image_header"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:src="@drawable/some_image"                 app:layout_collapseMode="parallax"/>              <android.support.v7.widget.Toolbar                 android:id="@+id/collapsible_toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"                 app:layout_collapseMode="pin"/>          </android.support.design.widget.CollapsingToolbarLayout>      </android.support.design.widget.AppBarLayout>      <LinearLayout         android:layout_width="match_parent"         android:layout_height="@dimen/slide_handle_height"         android:orientation="horizontal"         android:background="@color/slide_handle"         android:gravity="center_vertical">          <!-- three buttons -->      </LinearLayout>      <android.support.v7.widget.RecyclerView         android:id="@+id/recycler_view"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_marginTop="@dimen/slide_handle_height"         android:scrollbars="vertical"         app:layout_behavior="@string/appbar_scrolling_view_behavior"/>  </android.support.design.widget.CoordinatorLayout> 

Answer 1

You don't need a workaround or something strange. This behaviour is supported by the library. Just replace your LinearLayout by this and put it below the RecyclerView:

<android.support.v4.widget.NestedScrollView     android:layout_width="match_parent"     android:layout_height="wrap_content"     app:layout_behavior="@string/appbar_scrolling_view_behavior">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical"         android:gravity="center">          <Button             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:padding="15dp"             android:text="Button text"/>      </LinearLayout>  </android.support.v4.widget.NestedScrollView> 

Also you will need to put this in your RecyclerView to show it behind the LinearLayout:

    android:paddingTop="30dp"     android:clipToPadding="false" 

This is how it would look like:

<android.support.design.widget.CoordinatorLayout     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:layout_width="match_parent"     android:layout_height="match_parent">  <android.support.design.widget.AppBarLayout     android:id="@+id/app_bar_layout"     android:layout_width="match_parent"     android:layout_height="@dimen/collapsible_app_bar_height"     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">      <android.support.design.widget.CollapsingToolbarLayout         android:id="@+id/collapsing_toolbar_layout"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:background="@drawable/gradient_banner"         app:contentScrim="@color/background_content_frame"         app:layout_scrollFlags="scroll|exitUntilCollapsed">          <ImageView             android:id="@+id/image_header"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:src="@drawable/some_image"             app:layout_collapseMode="parallax"/>          <android.support.v7.widget.Toolbar             android:id="@+id/collapsible_toolbar"             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"             app:layout_collapseMode="pin"/>      </android.support.design.widget.CollapsingToolbarLayout>  </android.support.design.widget.AppBarLayout>  <android.support.v7.widget.RecyclerView     android:id="@+id/recycler_view"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_marginTop="@dimen/slide_handle_height"     android:scrollbars="vertical"     app:layout_behavior="@string/appbar_scrolling_view_behavior"     android:paddingTop="30dp"     android:clipToPadding="false"/>  <android.support.v4.widget.NestedScrollView     android:layout_width="match_parent"     android:layout_height="wrap_content"     app:layout_behavior="@string/appbar_scrolling_view_behavior">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical"         android:gravity="center">          <Button             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:padding="15dp"             android:text="Button text"/>      </LinearLayout>  </android.support.v4.widget.NestedScrollView>  </android.support.design.widget.CoordinatorLayout> 

This is not a nice design, but it is a solution. You can put a nicer Layout inside the LinearLayout to make it like Spotify.

Edit: Video added