Welcome to Android CollapsingToolbarLayout Example. In this tutorial, we’ll discuss and implement CollapsingToolBarLayout in our application.

Android CollapsingToolbarLayout

Android CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. This type of layout is commonly seen in the Profile Screen of the Whatsapp Application.
This layout consists of:

  • Collapsing Title: The title is larger when the layout is expanded. The text size becomes smaller as the layout is collapsed and scrolled off the screen.
  • app:layout_scrollFlags: The scroll flags of this layout is typically set to “scroll|exitUntilCollapsed”.
  • app:collapsedTitleGravity: Specifies the gravity of title in the container when collapsed.
  • app:contentScrim: This requires specifying a drawable or color value of the CollapsingToolbarLayouts content when it has been scrolled sufficiently off screen eg. ?attr/colorPrimary.
  • app:scrimAnimationDuration: Specifies the duration used for scrim visibility animations. This requires an integer value such as “100”.

If you’ve updated to the latest SDK recently choose the Scrolling Activity type (it contains a ready-made implementation of CollapsingToolbarLayout) while creating a new project.


Running the default new project should show an output like this:

android collapsing toolbar example

In this tutorial, we’ll be doing changes in the default project such as showing an ImageView, showing the toolbar equivalent icon from the FAB button, when it’s collapsed.

Android CollapsingToolbarLayout Example Project Structure


Android CollapsingToolbarLayout Code

The activity_scrolling.xml is given below:

app:layout_anchor and app:layout_anchorGravity anchors the FAB to the bottom right of the AppBarLayout

Note: content_scrolling.xml stays as the default for this tutorial.

The menu_scrolling.xml file is defined as given below

The code for ScrollingActivity.java is defined below:

In the above code, to know whether the CollapsingToolbarLayout is collapsed or expanded, we add a listener addOnOffsetChangedListener on the AppBarLayout instance. Depending upon the if else conditions we show or hide the toolbar info option.

The output of the application in action is given below

android CollapsingToolbarLayout example app

This brings an end to this tutorial. You can download the Android CollapsingToolbarLayout Project from the link given below.

By admin

Leave a Reply

%d bloggers like this: