CoordinatorLayout with RecyclerView & CollapsingToolbarLayout

Question

I've been attempting to implement a CollapsingToolbar with a RecyclerView using the small amount of guidance here: http://android-developers.blogspot.co.uk/2015/05/android-design-support-library.html and the project here: https://github.com/chrisbanes/cheesesquare, and I currently have the following 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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    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"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:theme="@style/Toolbar"
        app:contentScrim="@color/primary"
        app:expandedTitleMarginStart="48dp"
        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"
            app:theme="@style/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/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_directions"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

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

The source is as follows:

    setContentView(R.layout.activity_details_image);
    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    loadImage();
    CollapsingToolbarLayout collapsingToolbar =
            (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle(formatName(getIntent().getStringExtra("name")));
    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    ArrayList<DetailsAdapter.Detail> details = new ArrayList<DetailsAdapter.Detail>();
    details.add(new DetailsAdapter.Detail("Main Facilities", "Children's Play Area, Ecotricity Electric Vehicle Charging Point, Lucky Coin, Multi Faith Room (southbound only), Showers", R.drawable.ic_moto));
    details.add(new DetailsAdapter.Detail("Restaurants", "Eat & Drink Co., Burger King, Costa, West Cornwall Pasty Co. (northbound only), Greggs, Costa Express, Krispy Kreme", R.drawable.ic_moto));
    details.add(new DetailsAdapter.Detail("Shops", "WHSmith, M&S Simply Food, Fone Bitz, Cotton Traders, Ladbrokes (southbound only)", R.drawable.ic_moto));
    details.add(new DetailsAdapter.Detail("Motel", "Travelodge", R.drawable.ic_moto));
    details.add(new DetailsAdapter.Detail("Forecourt", "BP (with: LPG), Costa Express, Air1 AdBlue", R.drawable.ic_moto));
    DetailsAdapter mAdapter = new DetailsAdapter(this, details);
    recyclerView.setAdapter(mAdapter);
    recyclerView.setItemAnimator(new DefaultItemAnimator());

I've tested it without the collapsing toolbar and it scrolls fine

However it doesn't scroll, even when the list is longer than the visible parts. What have I done wrong?

I tried using your layout with a simple RecyclerView, it worked nice. The problem could be with the number of items or maybe with the implementation of the adapter? — razzledazzle, May 31 '15 at 02:59
It works without the toolbar, like I said. The adapter & items are fine. Could you upload your project? — Kieron, May 31 '15 at 08:11
Actually, to test I modified the project Cheesesquare, only thing I did was replace the NestedScrollingView in the details view with the RecyclerView in the project, it worked. — razzledazzle, May 31 '15 at 08:18
And the answer below explains why. You got the updated build.gradle, I did not update mine. Overlooked by many it seems. — Kieron, May 31 '15 at 09:48
Glad its working now! I'm aware that not all scrolling views work, such as ListView. The latest update must contain relevant changes for this. — razzledazzle, May 31 '15 at 09:57

score 63 · Accepted Answer · answered May 31 '15 at 08:40

63

Make sure you're using com.android.support:recyclerview-v7:22.2.0

(With version prior to 22.2.0 it didn't work for me either)

answered May 31 '15 at 08:40

Roi Divon

1,147
1
11
16

That fixed it for me. I'm speechless. Thanks Roi! – EboMike May 31 '15 at 08:44
although it's working now, my RecyclerView is not as tall as it should be - it's match_parent, but it seems to be missing exactly as much from the bottom as the toolbar is tall when expanded. Is that another sign of an older library? I might spawn off another question, just posting this in case you have a quick answer. I'm using essentially the same layout as above. – EboMike May 31 '15 at 08:47
3

For now what I did was making the RecyclerView with layout_height="wrap_content" and layout_marginBottom="?attr/actionBarSize" (the height of the toolbar) – Roi Divon May 31 '15 at 08:55
This did indeed fix it. It's not on the blogspot page, which is annoying. This also explains why it didn't work for me but did for razzledazzle above – Kieron May 31 '15 at 09:47
Roi - the most obvious answer, and I didn't even try it because I was so bent on using the same values from the sample code in the blog! That works. Thanks again. – EboMike May 31 '15 at 16:27
does it work with RecyclerView ONLY ??? or can i add RelativeLayout with scrolling enabled ? – nadav Jun 02 '15 at 17:29
@nadav it will work only with recycler or NestedScrollview from what I read in the documentation. Maybe they will add support for other layout later. – Kevin LE GOFF Jun 03 '15 at 19:49
1

@RoiDivon I guess you meant layout_marginTop="?attr/actionBarSize". But when the app bar is not shown (when you scroll) there is an empty space between the status bar and the RecyclerView. Could someone fix this issue? – Moshik L Jun 17 '15 at 09:35
Confirm: 22.1.0 didn't work whatever I do. Changed to 22.2.0 - now works. – Den Drobiazko Jul 02 '15 at 13:35
Thanks, this fixed it for me, too! – DDsix Aug 25 '15 at 20:30
4

23.1.1 here. Same issue. Has anyone found a work around? This is not fun. – Luke Allison Mar 02 '16 at 05:20
same issue with ```androidx.recyclerview:recyclerview:1.0.0``` – nAkhmedov Aug 23 '19 at 10:57

score 7 · Answer 2 · answered May 15 '16 at 12:05

im probably 1 year late to answer this. I found a solution. Here it is, add layout_marginBottom in the nested scroll view:

<?xml version="1.0" encoding="utf-8"?>

<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/main_coord_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android.minhnguyencv.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:id="@+id/appbar"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:elevation="4dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags = "scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary"
            android:fitsSystemWindows="true"
            app:expandedTitleTextAppearance="@android:color/transparent">

            <ImageView
                android:id="@+id/coverPhoto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:fitsSystemWindows="true"
                android:src="@drawable/coverphoto"
                app:layout_collapseMode="parallax"
                android:clickable="true" />

            <ImageView
                android:id="@+id/profilePhoto"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_gravity="center_horizontal|bottom"
                android:scaleType="fitXY"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:clickable="true" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:layout_collapseMode = "pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/main_nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity = "fill_vertical"
        android:layout_marginBottom="?attr/actionBarSize"
        app:layout_behavior = "@string/appbar_scrolling_view_behavior">

        <include layout="@layout/content_main" />

    </android.support.v4.widget.NestedScrollView>

    <include layout="@layout/floating_button_menu"/>

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

I am using androidx, and faced the same problem. The above code did not work. — Madina Saidova, Mar 12 '20 at 11:14

CoordinatorLayout with RecyclerView & CollapsingToolbarLayout

2 Answers2

Linked