Эту статью я решил написать, как гайд для создания sticky header'а, который вы можете наблюдать во многих современных приложениях, например, как instagram, додо пицца, vk и так далее. Покажу данный элемент дизайна сразу на примере приложения, которым я занимаюсь в данный момент:
На первом экране кругом обведена та часть, которую мы будем скрывать при скролле вниз и открывать при обратном скролле вверх.
На втором изображении кругом обведена часть, которая будет слипаться, так называемый, sticky header.
Логика верстки данного экрана: у нас есть layout(конкретно у меня это ConstraintLayout) в котором содержится Toolbar(это верхняя часть экрана с выбором города), все остальное, что находится ниже Toolbar'а будет заключено в CoordinatorLayout(так как CollapsingToolbarLayout мы можем использовать только внутри CoordinatorLayout). Именно та часть, которая находится внутри CollapsingToolbarLayout и будет скрываться и раскрываться при скроллинге. Еще пару моментов, перед тем, как мы перейдем к самому коду. CollapsingToolbarLayout должен находится внутри AppBarLayout. Для того, чтобы поставить наш кастомный Toolbar на экран, нам нужно в res->values->themes убрать наш стандартный ActionBar. Для этого заменим в themes.xml <style name="Theme.FinalPizzaDeliveryApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> на <style name="Theme.FinalPizzaDeliveryApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">.
Перейдем к самому коду:
Наш основной layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".presentation.delivery.DeliveryFragment">
Toolbar
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="54dp"
android:id="@+id/top_tb"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Москва"
android:textColor="@color/black"
android:textSize="16sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/bt_choose_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_arrov" />
<ImageView
android:id="@+id/bt_qr_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="224dp"
app:srcCompat="@drawable/ic_qr" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.Toolbar>
CoordinatorLayout
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="54dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/top_tb">
AppBarLayout + CollapsingToolbarLayout - та самая часть, которая будет скрываться и раскрываться при скроллинге
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="144dp"
android:fitsSystemWindows="true"
app:contentScrim="@color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:scrimAnimationDuration="0">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:contentDescription="@string/app_name">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal"
>
<ImageView
android:layout_width="265dp"
android:layout_height="144dp"
android:src="@drawable/sale30_banner"
app:layout_collapseMode="parallax" />
<ImageView
android:layout_width="265dp"
android:layout_height="144dp"
android:src="@drawable/sale30_banner"
app:layout_collapseMode="parallax" />
<ImageView
android:layout_width="265dp"
android:layout_height="144dp"
android:src="@drawable/sale30_banner"
app:layout_collapseMode="parallax" />
</LinearLayout>
</HorizontalScrollView>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
Далее идет еще один layout, который содержит в себе Tablayout(который визуально будет сливаться с Toolbar'ом) и FrameLayout, который служит для отображения других фрагментов(списка продуктов)
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<com.google.android.material.tabs.TabLayout
android:id="@+id/category_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabMode="scrollable"
app:tabPaddingStart="40dp">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Пицца" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Комбо" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Десерт" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Напитки" />
</com.google.android.material.tabs.TabLayout>
<FrameLayout
android:id="@+id/placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/category_tab_layout">
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
PS: не обращайте внимание на хард код при верстке xml, так как моя задача - показать вам, как можно сделать липкий заголовок. Спасибо за прочтение, надеюсь это помогло тебе узнать что-то новое и применить в своём проекте!