How to create a scrolling top view effect in Android with AppBarLayout and CoordinatorLayout?

I am building an Android layout where I want the top section (which includes an image, icons, and some controls) to scroll out of view, but I want only the search view to stick to the top when scrolling down. The rest of the content (including the RecyclerView for the list of items) should scroll normally after that.

This is what I want to achieve:

Here is the XML code I’ve used so far:

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

      <!-- Collapsing Toolbar for the top section -->
      <com.google.android.material.appbar.CollapsingToolbarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

         <!-- Banner Image -->
         <ImageView
             android:layout_width="match_parent"
             android:layout_height="200dp"
             android:scaleType="centerCrop"
             app:layout_collapseMode="parallax"
             android:src="@drawable/banner_img" />

         <!-- Icons and information section -->
         <androidx.constraintlayout.widget.ConstraintLayout
             android:id="@+id/containerCollapsing"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:padding="10dp"
             android:background="@color/black"
             app:layout_collapseMode="parallax">

            <!-- Your icons and text here (location, account, etc.) -->

         </androidx.constraintlayout.widget.ConstraintLayout>

         <!-- Search bar layout that should stick to the top -->
         <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/round_edge_bg"
             android:padding="15dp"
             android:layout_marginTop="80dp"
             android:layout_marginBottom="10dp"
             android:layout_marginStart="5dp"
             android:layout_marginEnd="5dp"
             app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/searchIcon"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/baseline_search_24"
                app:tint="@color/white"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="parent" />

            <ImageView
                android:id="@+id/micIcon"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/mic_24"
                app:tint="@color/white"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toEndOf="@id/searchIcon"
                app:layout_constraintEnd_toStartOf="@id/micIcon"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:text="search"
                android:paddingStart="10dp" />

         </androidx.constraintlayout.widget.ConstraintLayout>

      </com.google.android.material.appbar.CollapsingToolbarLayout>

   </com.google.android.material.appbar.AppBarLayout>

   <!-- RecyclerView for items below the search bar -->
   <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/postRV"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

         </LinearLayout>

   </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Any help or pointers would be greatly appreciated! Thank you.

You need to sign in to view this answers