Add app bar scrolling view behavior to multiple views in CoordinatorLayout
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
This is a sticky header put in the middle between Toolbar
and RecyclerView
:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@+id/app_bar_layout" app:layout_anchorGravity="center|bottom" android:text="Shuffle Play"/>
To avoid overlaping with the Toolbar
you can set different heights to AppBarLayout
and CollapsingToolbarLayout
:
<android.support.design.widget.CoordinatorLayoutxmlns: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:fitsSystemWindows="true"><android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="240dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="210dip" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginBottom="30dp" app:expandedTitleMarginEnd="64dp"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 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"/><Button android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/appbar" app:layout_anchorGravity="center|bottom" android:text="Shuffle Play"/></android.support.design.widget.CoordinatorLayout>
Video demo:
Also, you can set a height to the Toolbar
but will need to make a custom title with a custom behaviour like this proyect CoordinatorLayoutExample. I made it with a custom title without behavior:
<android.support.design.widget.CoordinatorLayoutxmlns: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:fitsSystemWindows="true"><android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="240dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:collapsedTitleTextAppearance="@style/TransparentText" app:expandedTitleTextAppearance="@style/TransparentText" app:contentScrim="?attr/colorPrimary"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="80dp" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:gravity="top" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Title" android:textSize="20sp" android:textColor="@android:color/white"/> </android.support.v7.widget.Toolbar> </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"/><Button android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/appbar" app:layout_anchorGravity="center|bottom" android:text="Shuffle Play"/></android.support.design.widget.CoordinatorLayout>
Styles:
<style name="TransparentText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00000000</item></style>
Video demo:
After some trial and error, this is the condensed version of the layout that ended up working for me:
<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:id="@+id/coordinator_layout" 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" 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:layout_gravity="center_horizontal" android:layout_marginBottom="@dimen/button_bar_height" android:scaleType="centerCrop" android:background="@android:color/transparent" android:src="@drawable/default_header" android:contentDescription="@string/description_content_image" app:layout_collapseMode="parallax"/> <ImageView android:id="@+id/image_header_gradient" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="@dimen/button_bar_height" android:src="@drawable/scrim_top_bottom_banner" app:layout_collapseMode="parallax" tools:ignore="ContentDescription"/> <android.support.v7.widget.Toolbar android:id="@+id/collapsible_toolbar" android:layout_width="match_parent" android:layout_height="104dp" android:minHeight="?attr/actionBarSize" android:gravity="top" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentInsetStart="0dp" app:titleMargins="0dp" app:layout_collapseMode="pin"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="@dimen/landing_header_button_margin_horizontal" android:layout_marginEnd="@dimen/landing_header_button_margin_horizontal" android:layout_marginBottom="@dimen/button_bar_height" android:layout_gravity="bottom" android:gravity="center_vertical" app:layout_collapseMode="parallax"> <Button android:id="@+id/button_one" android:layout_alignParentStart="true" android:drawableStart="@drawable/selector_one" android:textColor="@color/alabaster_white" android:visibility="gone" style="@style/Button.TextCount"/> <Button android:id="@+id/button_two" android:layout_alignParentEnd="true" android:layout_gravity="end" android:drawableStart="@drawable/selector_two" android:textColor="@color/alabaster_white" android:visibility="gone" style="@style/Button.TextCount"/> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/button_bar_height" android:layout_gravity="bottom" android:gravity="center_vertical" android:orientation="horizontal" android:background="@color/slide_handle"> <!-- three buttons --> </LinearLayout> </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:scrollbars="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"/>