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