How to Collapse Toolbar Layout in Android?

In this article, we are going to create the CollapsingToolbar app that is fascinating and much useful. CollapsingToolbarLayout gives the facility of adjusting the size of toolbar title text when it is expanded or contracted. A sample GIF is given below to get an idea about how CollapsingToolbarLayout looks like.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Add Design Support Library

Go to build.gradle file and add the below dependency if you are using an older version of Android Studio. A newer version of Android Studio contains this dependency as default, so you don’t need to add it if you are using the latest version. 

implementation ‘com.android.support:design:29.0.0’

Step 3: Add Image 

Copy the image that you want to use as a background image for the toolbar and paste it into the drawable folder. We will be using this image in activity_main.xml file.

Step 4: Working with strings.xml file

Navigate to res > values > strings.xml and add a long text that we will be using later in the activity_main.xml file. Here we are using a portion of Lorem Ipsum text. You can add the text whatever you want to use. 

XML

<resources>
    <string name="app_name">GFG | CollapseToolbar</string>
    <string name="content">With the idea of imparting programming
      knowledge, Mr. Sandeep Jain, an IIT Roorkee alumnus started a
      dream, GeeksforGeeks. Whether programming excites you or you feel
      stifled, wondering how to prepare for interview questions or how to
      ace data structures and algorithms, GeeksforGeeks is a one-stop solution.
      With every tick of time, we are adding arrows in our quiver. From articles
      on various computer science subjects to programming problems for practice,
      from basic to premium courses, from technologies to entrance examinations,
      we have been building ample content with superior quality. In a short span,
      we have built a community of 1 Million+ Geeks around the world, 20,000+
      Contributors and 500+ Campus Ambassadors in various colleges across the nation.
      Our success stories include a lot of students who benefitted in their placements
      and landed jobs at tech giants. Our vision is to build a gigantic network of
      geeks and we are only a fraction of it yet.
  </string>
</resources>

Step 5: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.  

XML

<?xml version="1.0" encoding="utf-8"?>

<!--first of all you have to change
    the layout as CoordinatorLayout.
    This is the first thing we need to do.-->
<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">

    <!--AppBarLayout helps the toolbar and other components to react on
        scroll changes. I am using Dark theme for AppBarLayout.
        Inside this AppBarLayout i
        have used CollapsingToolbarLayout. -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <!-- In CollapsingToolbarLayout some important attributes are:
         i)  app:layout_scrollFlags which is used to specify how collapsing
             layout behaves when content is scrolled.I have used
             app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
             so it will scroll until it's is completely collapsed.
         ii) app:contentScrim="@color/green" that specifies the color
              of the collapsed toolbar -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/green"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
            app:title="@string/app_name">

            <!--We are adding the image that we have added earlier
                  in the drawable folder.The attribute app:layout_collapseMode="parallax"
                  causes the image to move when user scrolls at a specific ratio. -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                android:src="@drawable/image"
                app:layout_collapseMode="parallax" />

            <!-- The attribute app:layout_collapseMode="pin" is set so that
                 sticks to the top when the user scrolls the view up-->
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

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

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

    <!--Now add the NestedScollView-->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!--In textview we will be adding the text that i have
            added earlier in strings.xml file.This is simply the
            the content to be scrolled -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="8sp"
            android:padding="16dp"
            android:text="@string/content"
            android:textSize="20sp" />
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Output: