Hide Cardview & ImageView inside CollapsingToolbarLayout - android-layout

Question

Whenever I'll scroll my activity, I want toolbar should remain stable and else everything should go below the toolbar. I have used CollapsingToolbarLayout and AppBarLayout, but still I'm not getting proper solution.
Here in this code, CircleImageView and CardView are comming above the toolbar while scrolling.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/contact_photo_height"
android:elevation="8dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsideToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorAccent"
app:title="back"
app:titleEnabled="false"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/verify_image"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool_bar"
app:title="back"
app:titleTextColor="#color/white"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
android:theme="#style/ToolbarTheme"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:cardElevation="5dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:src="#drawable/bg4"
app:layout_anchor="#+id/cardView"
app:layout_anchorGravity="top|center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

You are missing one of the most important property app:layout_behavior in card view.
If you want eveything else like cardview, circular ImageView and rest to scroll till toolbar then club them in Relative or LinearLayout and assign app:layout_behavior="#string/appbar_scrolling_view_behavior".
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:cardElevation="5dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:src="#drawable/bg4"
app:layout_anchor="#+id/cardView"
app:layout_anchorGravity="top|center" />
</LinearLayout>
Now, everything will just scroll properly. Hope it helps.