Collapsing Toolbar with Material Design 3

Collapsing Toolbar Layout

In this article, we are going to create a wrapper for our Toolbar which implements a collapsing app bar. We designed it as a child of a AppBarLayout.

Read How to create Bottom sheet

Steps (in 5 )

1. Create a new project named Collapsing ToolBar MDC. 

2. paste an image in drawable filder.

3. Now Go res > values > themes  and Change both themes as NoActionBar

👉 See How to create Bottom navigation

4. Use the following code in activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="340dp">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
            app:title="@string/app_name">
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:background="#AE1487"
                android:src="@drawable/img1"
                app:layout_collapseMode="parallax" />
            <View
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_gravity="bottom"
                android:background="@color/material_dynamic_primary90"/>
            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

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

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <com.google.android.material.textview.MaterialTextView
            android:layout_width="420dp"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="@string/contents"
            android:textSize="20sp"/>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

5. Run app

👉Note :- In 

MaterialTextView As contents I used  string in values folder .

OUTPUT

On Scrolling up

Thanks for reading!😊😊😊😊😊😊

If you enjoyed reading , Show some Love by

 clapping 👏 on this post!

If you have any suggestion share with me.