How to collapse toolbar layout in android?

ByJael Lawler

A collapsing toolbar is a useful component in Android for creating flexible toolbars that can expand and collapse in response to scroll events. It allows the toolbar to transition between a collapsed and expanded state smoothly as the user scrolls through content. The collapsed state condenses the toolbar to make more room for content, while the expanded state shows the full toolbar.

Collapsing toolbars are commonly used in Android apps to implement material design patterns for flexible app bars that scroll away as users explore content. They provide an immersive experience and make better use of screen real estate by disappearing when not needed. Apps like Google Photos and the Play Store implement collapsing toolbars.

Overall, collapsing toolbars are useful in Android apps when you want a flexible toolbar that condenses to save space as users scroll through content. Implementing one can create a slick, modern UI that adheres to material design principles. This provides a more seamless experience for users as they navigate and interact with the app.

Prerequisites

To follow along with this tutorial, you’ll need to have Android Studio installed on your computer. Android Studio is the official integrated development environment (IDE) for Android app development from Google. It provides a comprehensive set of tools for building Android apps.

You can download and install Android Studio for free from the official Android Developer website. The latest stable release at the time of writing is Android Studio Dolphin 2021.3.1.

Android Studio has specific system requirements you’ll want to check before installing:

  • Operating System: Windows 8/8.1/10/11 (64-bit)
  • CPU: 2nd gen Intel CPU or newer, or AMD CPU
  • RAM: 4 GB minimum, 8 GB recommended
  • Storage: 4 GB minimum, 8 GB+ recommended

With Android Studio installed, you’ll have everything needed to build an Android app and follow along with this tutorial.

Create a new project

To begin, open Android Studio and create a new project by clicking “Start a new Android Studio project” on the welcome screen. If you already have a project open, you can also start a new project by going to File > New > New Project.

In the Create New Project window, you will be prompted to fill in details about your application including the name, package name, save location, language, and minimum API level. You can use the default values or customize as needed. Make sure to select “Empty Activity” as the activity type before clicking “Finish”.

This will create a new Android Studio project with a basic activity and layout files. The generated files include the manifest, java classes, xml layouts, gradle scripts and other resources needed to build your application.

For more details, refer to the Android developer documentation on creating a new project in Android Studio.

Add dependencies

To enable the collapsing toolbar layout, we need to add the CollapsingToolbarLayout dependency in our app’s build.gradle file. As per the Android scrolling toolbar with other combined views Stack Overflow post, we need to add the following dependency:

implementation 'com.google.android.material:material:1.0.0'

This will include the com.google.android.material.appbar.CollapsingToolbarLayout package that contains the CollapsingToolbarLayout class we need. The collapsingtoolbarlayout dependency Code Example also shows a similar dependency setup.

Create layout

The first step is to create a layout file that will contain the CollapsingToolbarLayout. This layout will be the root view of your activity.

Create a new layout resource file, for example `activity_main.xml`. The root element should be a CollapsingToolbarLayout: 

<com.google.android.material.appbar.CollapsingToolbarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</com.google.android.material.appbar.CollapsingToolbarLayout>

This CollapsingToolbarLayout will be the container for our toolbar and scrollable content.

Add Toolbar

To add a collapsing toolbar, we first need to add a regular toolbar. Inside the activity’s onCreate() method, get a reference to the Toolbar and set it as the activity’s support ActionBar:


Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

This will display a basic toolbar at the top. Next, we need to wrap it in a CollapsingToolbarLayout so it can collapse.

In the activity’s layout XML file, add a CollapsingToolbarLayout and nest the Toolbar inside it like this:


<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />

</com.google.android.material.appbar.CollapsingToolbarLayout>

This allows the toolbar to collapse when scrolling.

Set scroll flags

The key to enabling the collapsing toolbar behavior is to set the proper scrollFlags on the Toolbar. This allows the Toolbar to react to scroll events from the NestedScrollView. The main flags we need are:

  • scroll – this enables scrolling on the view.
  • enterAlways – ensures the Toolbar enters (shows) when scrolling up.
  • snap – makes the Toolbar snap into place as the user scrolls.

For example: 

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways|snap"/>

</com.google.android.material.appbar.AppBarLayout>

This will allow the Toolbar to scroll off screen as the user scrolls down, and snap back into place as they scroll back up. The enterAlways flag ensures it re-enters the screen when scrolling up.

For more details on the available scroll flags, see this article.

Add Content

To add content inside the collapsing toolbar layout, we need to add ImageView and TextView widgets. The ImageView will display the header image that collapses, while the TextView can display a title or description.

In activity_main.xml, add an ImageView with src set to an image file. This will be our collapsing header image. Next, add a TextView below and set the text property to a title or description for the screen.

For example:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:src="@drawable/header_image" />

<TextView
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:text="My Title" />

This will display the image and text inside the CollapsingToolbarLayout. We can then style and tweak their appearance as needed.

Source: https://medium.com/@dugguRK/basic-of-collapsing-toolbar-android-ec03505af876

Style the Toolbar

The CollapsingToolbarLayout allows you to easily customize the look and feel of the toolbar. Some common customizations include:

  • Toolbar color – Set the background color using app:contentScrim="color"
  • Toolbar title – Specify the title text with app:title="My Title"
  • Expanded title text size – Use app:expandedTitleTextAppearance to set the text size when expanded
  • Collapsed title text size – Use app:collapsedTitleTextAppearance to set the text size when collapsed

For example:


<com.google.android.material.appbar.CollapsingToolbarLayout
    app:contentScrim="@color/colorPrimary"
    app:title="My App"
    app:expandedTitleTextAppearance="@style/ExpandedAppBar"
    app:collapsedTitleTextAppearance="@style/CollapsedAppBar">

    <androidx.appcompat.widget.Toolbar
        ... />

</com.google.android.material.appbar.CollapsingToolbarLayout>

This allows you full control over the look and feel of the collapsing toolbar. See the Android CollapsingToolbarLayout tutorial for more details.

Test the app

The final step is to run the app on an Android device or emulator to test the collapsing toolbar behavior.

When you launch the app, you should see the toolbar expanded to show its full height. As you begin scrolling down through the content, the toolbar should smoothly animate and collapse. The title text should transition to become smaller as the toolbar shrinks.

Continue scrolling until the toolbar is fully collapsed into a minimal state. Now scroll back up and verify that the toolbar seamlessly expands again. Test collapsing and expanding several times to ensure smooth performance.

Try adjusting attributes like the expandedTitleMargin and collapsedTitleGravity to customize the transition effect. Also confirm that any content you put behind or overlapped with the collapsing toolbar correctly scrolls beneath it.

If everything functions properly, you now have a collapsing toolbar implemented successfully in your app! Extend this functionality further by coordinating the animation and scroll flags with other UI events in your app.

Leave a Reply

Your email address will not be published. Required fields are marked *