Skip to content
Related Articles

Related Articles

Improve Article

How to Collapse Toolbar Layout in Android?

  • Difficulty Level : Medium
  • Last Updated : 12 Apr, 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 ‘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: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" />
  
            <!-- Thw 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:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :