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, w3wiki. Whether programming excites you or you feel stifled, wondering how to prepare for interview questions or how to ace data structures and algorithms, w3wiki 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+ Beginner 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 Beginner 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:
Contact Us