Collapsing Toolbar in Android

Hello! In this tutorial, we will learn about Collapsing Toolbar in Android. It is modified version of the regular toolbar. It expands and shrinks according to the scrolling direction. Let’s first see what is a toolbar.

What is Toolbar in Android?

In its most basic form, the toolbar displays the title for the activity on one side and an overflow menu on the other. Even in this simple form, the app bar provides useful information to the users and helps to give Android apps a consistent look and feel. It can also contain different icons for ease of use.

What are Collapsing Toolbar and its uses:

Collapsing Toolbar Layout is the newly introduced in Lollipop (5.0). Whenever user scrolls up, this control will provide the animating effect. With help of Design Library, we can provide same animation effect from Android 2.1 onward devices.

We can wrap ImageView & Toolbar as the child of Collapsing Toolbar Layout, whenever scroll event occurs the wrapped toolbar goes up & image gets diminished, pinned at the top. The size of the title gets reduced slowly. We can also provide custom color effects at runtime, to give a consistent look and feel of our application.

Seems very interesting right! Let’s get started!

Sample output:

Sample APK: collapsing Toolbar2_1.0

Sample project: collapsingToolbar2

Creating a New Project:

Open your Android Studio & create a new Project, give name whatever you like and We’ll keep all the things by default and clicked finish.

Adding Dependencies to Gradle:

We’ll need following dependencies to design collapsing toolbar using Google’s support design library.

No specific permissions are required from user.

To implement Collapsing toolbar, CoordinatorLayout would be needed. It CoordinatorLayout, we’ll use CollapsingToolbarLayout. And for the main content of the activity, we’ll use NestedScrollView. Therefore, in your MainActivity’s layout file, add following code:


Here, note the hierarchy of the layouts, as described above. As the main content of the activity, we are including different cards of information as you can see in the sample output. Following the layout of a card.


For the demo, only this card layout is included in the main activity. You can create your own content as per your need and then include them in your activity, using <include> tag.

Now to set the title of the toolbar, add following lines of code in your main activity’s Java file.

This will set the title of your toolbar, dynamically at run time.

You can also change colors of the toolbar when it is extended or in shrunk state. For that add following listener in your main activity, where you’ve initialized your toolbar.

and call this method from onCreate() method. You can set different colors according to your app’s theme, using this method.

Now, run your app and scroll up and down, you can see the animated collapsing toolbar, extending and shrinking according to the scroll.


Collapsing Toolbar in Android


4 سال پیش

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.