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

Viewed 869

I am trying to achieve a layout shown in the image.
This is how I would like it to work
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>
1 Answers

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.

enter image description here

Enjoy!

Related