Part Of The Content Of A Collapsingtoolbarlayout Is Getting Sticky On Top, When Used With Viewpager And Recyclerview

I am trying to implement a layout like this: The issue is that when scrolling up the card touches the toolbar and it does not go up anymore like this: I want it to scroll

Solution 1:

Finally Solved my issue. I added the card inside the collapsing layout like Kalyans answer and added a dummy view and a -ve margin to the card to have the overlap behavior effect like

<com.google.android.material.appbar.CollapsingToolbarLayoutandroid:id="@+id/toolbarCollapse"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:layout_scrollFlags="scroll|exitUntilCollapsed"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?actionBarSize"app:layout_collapseMode="pin" /><Viewandroid:layout_width="match_parent"android:layout_height="200dp"android:background="#000" /><includelayout="@layout/debit_card_item"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="-90dp"app:layout_collapseMode="parallax" /></LinearLayout></com.google.android.material.appbar.CollapsingToolbarLayout>

I have also pushed my code to the github.

Solution 2:

In order to achieve that effect, the card layout should be inside the collapsing toolbar.

Try replacing this:

<ImageViewandroid:layout_width="match_parent"android:layout_height="190dp"android:minHeight="190dp"android:src="@drawable/ic_launcher_foreground"app:layout_collapseMode="parallax" />

with:

<include layout="@layout/debit_card_item"
            android:layout_width="match_parent"
            android:layout_height="190dp"
            android:minHeight="190dp"
            android:layout_marginTop="32dp"
            android:layout_marginBottom="72dp"
            app:layout_collapseMode="parallax"/>

and remove <include layout="@layout/debit_card_item" /> in the NestedScrollView.

Hope this helps.