Having 2 CollapsingToolbarLayout that can be expanded / collapsed one after the other

Question

Is there a way to have 2 CollapsingToolbarLayouts (one below the other) that can be expanded / collapsed one after the other ?

Let's take this image as an example :

The section 1 and 2 are two CollapsingToolbarLayouts (and each one contains a Toolbar I suppose), and the section 3 is a list (a RecyclerView) that can be scrolled.

The user can scroll on the section 3, and it will collapse the section 1. Once the section 1 is fully collapsed, it will collapse the section 2. Once the 2 layouts are collapsed, the user can continue to scroll on the list.

If the user scrolls in the other direction, he will first have to reach the top of the list, and then if he continues scrolling, it will expand the section 2, and then expand the section 1 once the section 2 is fully expanded.

Answer 1

Maybe it`t too late response, but I found solution that it may help for other developers. Here is code, that worked as expected: When user scroll NestedScrollView, the top collapsingContainerFirst will be collapsed and after that, collapsingContainerSecond become collapsed. Enjoy!

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainFragment">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingContainerFirst"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|snap">

            <FrameLayout
                android:id="@+id/someContainerWithData"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@color/red" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingContainerSecond"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|snap">

            <FrameLayout
                android:id="@+id/someContainerWithOtherData"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@color/black" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>


    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/lorem_ipsum"
                android:textColor="#000000" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>