How to Collapse Toolbar Layout in Android? - GeeksforGeeks

30 Dec, 2021
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 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 sompe 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: 
 
rkbhola5
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Flexbox-Layout in Android
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Android Listview in Java with Example
How to Get Current Location in Android?
Fragment Lifecycle in Android
Difference Between a Fragment and an Activity in Android