How can I achieve "double" collapsing toolbar with two pinned views

Question

I am trying to achieve a layout shown in the image.

So I would like to have two views that pin on top of the screen after the users scrolls to a certain point. Other views should collapse until they are fully hidden (except for View 3 which is basically the main view of the layout. So far I have tried a few approaches.
One, that kinda works, is to use the collapsing toolbar with Pinnable View 1 and Pinnable View 2 anchored to other views (I attached the snippet of the code so you know what I managed to achieve). The problem with this approach is that, because these pinnable views are not inside a nestedScrollView, it is impossible to scroll when user starts the scroll from these two views.
So my question is, is that possible to achieve the desired effect using my current approach or is there a way to do it differently?

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

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <View
                android:id="@+id/view_1"
                android:layout_width="match_parent"
                android:layout_marginBottom="32dp"
                android:layout_height="200dp"
                android:background="#0071BD"
                app:layout_collapseMode="parallax">
            </View>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_marginTop="32dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context=".ScrollingActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <View
                android:id="@+id/view_2"
                android:layout_width="wrap_content"
                android:background="#5495BD"
                android:layout_height="300dp"/>

            <View
                android:id="@+id/pinnable_view_2_anchor_view"
                android:layout_width="match_parent"
                android:layout_height="41dp"
                android:background="@null" />

            <View
                android:id="@+id/view_3"
                android:layout_width="match_parent"
                android:background="#57B1BC"
                android:layout_height="1000dp" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

    <View
        android:id="@+id/pinnable_view_1"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:background="#00015E"
        android:nestedScrollingEnabled="true"
        app:layout_anchor="@id/app_bar_layout_view"
        app:layout_anchorGravity="bottom">
    </View>

    <View
        android:id="@+id/pinnable_view_2"
        android:layout_width="match_parent"
        android:background="#000002"
        android:layout_height="40dp"
        android:layout_marginTop="64dp"
        app:layout_anchor="@id/pinnable_view_2_anchor_view"
        app:layout_anchorGravity="center">
    </View>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Soubrette

Hi there, are you by any chance trying to implement a list of things with headers that can be pinned? – Pedantry

Well, not really. These views have complately different content inside, but please elaborate, cuz that might also help ;) – Soubrette

Well if it were a list and the headers needed pinning, I had to do something like that and I could help there. Good luck man – Pedantry

Answer 1

maybe it's too late, anyway, check code from here https://github.com/Y-E-P/DoubleCollapsingToolbar, maybe it will helps other developers, who faced with the same problem. I've prepared two example how to use it, free to use this code in your projects. Here is result below.

Enjoy!

Clumsy

There is one problem on lifo_ordering branch: after fling gesture the first toolbar doesn't expand :( – Meuser