CollapsingToolbarLayout expansion not working with RecyclerView

6.5k views Asked by At

The behavior of CollapsibleToolbarLayout with regards to the RecyclerView seems broken. When setting a value for

app:layout_scrollFlags

If you do not use "scroll|enterAlways", the Collabsible layout will never expand. It will always contract, but when you pull down, it does not expand anymore, so it just gets locked to the top.

If you use "scroll|enterAlways", it works as expected, meaning it instantly expands the header to its full height whenever you scroll down.

Without knowing anymore, it seems as if the Collapsible layout cannot properly determine when the RecyclerView is at the top of the list, as that is the criteria for when it should expand to full height in the other cases.

Here is the layout that I am testing with. The java code isn't really important, it is just populating the recyclerview with dummy data and using a LinearLayoutManager.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:theme="@style/ThemeOverlay.AppCompat.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:fitsSystemWindows="true"
        app:toolbarId="@id/toolbar_id"
        app:contentScrim="@color/white"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_id"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin"/>

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

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

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

There are 2 answers

8
natario On

Try with scroll|enterAlways|enterAlwaysCollapsed. This way the toolbar should always enter in the collapsed mode, and then expand when you reach the top of the sibling view.

0
Luis Pe On

If you want to show a list with RecyclerView under the AppBarLayout you should place the RecyclerView XML under

<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:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:theme="@style/ThemeOverlay.AppCompat.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:fitsSystemWindows="true"
    app:toolbarId="@id/toolbar_id"
    app:contentScrim="@color/white"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_id"
        android:layout_width="match_parent"
        android:layout_height="?android: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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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