Part of the content of a CollapsingToolbarLayout is getting sticky on top, when used with viewpager and recyclerview

Question

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

Answer 1

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

Try replacing this:

<ImageView
            android: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.

Answer 2

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.CollapsingToolbarLayout
        android: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">

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

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:layout_collapseMode="pin" />

        <View
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#000" />

        <include
            layout="@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.