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>

Maybe it is not possible because Spotify does not use the Design Support Library, but I don't know — Mario Velasco, Sep 09 '15 at 15:00
@MarioVelasco Correct, Spotify does not use a CollapsingToolbarLayout implementation, but I referenced it as an example for the behavior that I'm looking to achieve via some sort of workaround. — Ryan, Sep 09 '15 at 15:29
Good news! I have a real solution for you. This will solve what you were trying to do, take a look, and mark as solved if you like it. — Mario Velasco, Sep 09 '15 at 15:37

score 62 · Answer 1 · edited Jun 19 '17 at 07:46

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

It seems like that should work. However, I tried a similar approach awhile back (and just now), and the `NestedScrollView` does not react to scrolling - even with the `appbar_scrolling_view_behavior` `layout_behavior`. I believe `CoordinatorLayout` only looks for a single view to map to `AppBarLayout` via the `appbar_scrolling_view_behavior` behavior. So once it finds it on the `RecyclerView`, the search is over. I am currently messing with a way to add a `TouchEvent` to the `LinearLayout` and redirect the `MotionEvent` to trigger a `RecyclerView`+`AppBarLayout` scroll. No luck thus far. — Ryan, Sep 09 '15 at 17:57
I have tested with another `NestedScrollView` instead of your `RecyclerView` and it worked, I will check again with a `RecyclerView` and I will show you a video. Try to copy and paste the xml I gave you, and tell me the results. — Mario Velasco, Sep 09 '15 at 18:14
I have also tried the anchor approach to no avail. The problem comes down to the `LinearLayout` either exiting the screen or covering the `Toolbar` once its scrolled to the top. — Ryan, Sep 09 '15 at 18:48
I have tested the `NestedScrollView` with `RecyclerView` and works perfectly. Both of them use the same `layout_behavior`, so it doesn't work as you said befor. I have added a video demo, take a look. — Mario Velasco, Sep 10 '15 at 09:12
Thanks for the video demos to clarify what you are doing. My overall goal is to be able to select and drag up/down (scroll) my LinearLayout header. It looks like you are touching the RecyclerView directly to scroll the view in your video demos. Are you able to initiate a scroll on your Button view? — Ryan, Sep 10 '15 at 22:10
@Ryan I get it now, but no, you cannot scroll from header with this code. You will need to put a custom behavior in `app:layout_behavior` to get what you want. Like the [CoordinatorLayoutExample](https://github.com/saulmm/CoordinatorLayoutExample). — Mario Velasco, Sep 11 '15 at 08:36
I think what I am trying to achieve may be possible by moving the LinearLayout right below the Toolbar within the CollapsingToolbarLayout. I am able to achieve scrolling on the LinearLayout in this case. However, I also have two buttons inside the CollapsingToolbarLayout that are now causing an issue. Even though they are positioned above the LinearLayout in the XML file, they scroll above the LinearLayout instead of below (as what I would expect from appropriately positioned children of a FrameLayout) as the CollapsingToolbarLayout collapses. — Ryan, Oct 02 '15 at 14:19
Post your solution when you manage to do it. I would like to see the final result — Mario Velasco, Oct 02 '15 at 23:01
The standard way should be to use the anchoring support of CoordinatorLayout. The OP's intention appears to me exactly as the way FAB is anchored to the CoordinatorLayout. — WindRider, Jan 29 '16 at 11:50
How can I support for multiple header? While scrolling up, if one header comes over to other than first header started moving upwards and second one becomes sticky. I want to implement the sticky header for the recycler view using coordinate layout. — Shanki Bansal, Jul 07 '16 at 12:33
In the 1st gif the title ("spain") hides when scrolling down and is shown after scrolling all the way up. Can anyone point to the implementation? Thanks — mrahimygk, Feb 08 '19 at 19:58
@m.vincent [transparent CollapsingToolbarLayout title](https://stackoverflow.com/a/31669817/2232889) — Mario Velasco, Feb 25 '19 at 12:11

Mario Velasco · Answer 2 · 2015-10-03T20:30:01.957

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.CoordinatorLayout
xmlns: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 Toolbarbut 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.CoordinatorLayout
xmlns: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:

the solution without overlap is great if use image in AppBarLayout — Alexandr, Mar 23 '16 at 21:50
I have tried your XML layout code but in my case Shuffle Play Button is overlapped by toolbar. so what should i do to avoid this? — Muhammad Maqsood, Sep 21 '17 at 10:30
@MuhammadMaqsood If you just copy paste the code you will see something like the demo. Maybe you are changing the order of elements or adding a new toolbar bellow. — Mario Velasco, Sep 21 '17 at 12:37
@Mario Velasco , i am just exactly copying your code, but one thing i don't know is "@dimen/slide_handle_height", might be this causing the problem. — Muhammad Maqsood, Sep 21 '17 at 14:50
@MuhammadMaqsood I could reproduce it. It stopped working with newer versions so a new solution is needed for this — Mario Velasco, Sep 21 '17 at 18:28

Ryan · Accepted Answer · 2017-01-20T16:04:02.353

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"/>

hey @Ryan, can you attach a screenshot or a video demo of your solution? — carlosmaciel, Mar 03 '16 at 14:40
This should not be the accepted answer. There is no screenshot or video displaying the layout. Also, there styles and dimens which are not referenced in the response. — George Bikas, Feb 21 '18 at 11:26
@GeorgeBikas as Ryan is the asker of the question, I think its only fair to allow him to determine that his own response is the correct answer.. — Mikael Ohlson, Aug 27 '18 at 13:32

score 5 · Answer 4 · edited May 09 '19 at 13:19

You can try this

    <android.support.design.widget.CoordinatorLayout>
         <android.support.design.widget.AppBarLayout>
             <!-- another xml code -->
         </<android.support.design.widget.AppBarLayout>

         <android.support.v4.widget.NestedScrollView
              android:layout_width="match_parent"
              android:layout_height="match_parent"              
              app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

<!-- your recyler view or button or textview xml code -->        
   </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

or

you can write this code in strings.xml

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

and you can use:

app:layout_behavior="@strings/appbar_scrolling_view_behavior">

score 3 · Answer 5 · edited Sep 26 '16 at 11:49

3

Ryan's approach is good but might be a little complicated. You can achieve the same effect easier by using CoordinatorLayout's attributes to its children. Use

layout_anchor="@id/app_bar_layout"

and

layout_anchorGravity="bottom|right|end"

in a view(containing your buttons) and place it under the Toolbar. Also increase elevation on this view because when you scroll down the Toolbar will overlap your view.

edited Sep 26 '16 at 11:49

Shashanth

4,995
7
41
51

answered Apr 11 '16 at 09:53

George Kravas

51
2
7

This 'layout_anchor' answer helped my boat. :-D – beginner Mar 11 '18 at 20:24

Add app bar scrolling view behavior to multiple views in CoordinatorLayout

5 Answers5

Linked