Skip to content
Related Articles

Related Articles

How to Collapse Toolbar Layout in Android?

Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 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 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 ‘’

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. 


    <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.

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 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.-->
    <!--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. -->
        <!-- 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
             so it will scroll until it's is completely collapsed.
         ii) app:contentScrim="@color/green" that specifies the color
              of the collapsed toolbar -->
            <!--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. -->
                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-->
                app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />
    <!--Now add the NestedScollView-->
        <!--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 -->
            android:textSize="20sp" />



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!