Mobile Development

Collapsing Toolbar

  • Android
  • Software
  • Mobile Dev
  • Animations




Implementing a collapsing toolbar will give your app a nice and professional look. The code to implement it takes place in the XML file of your main activity.

The code for this tutorial can be found at my GitHub repo.

Let's get started.

Step #1: Dependencies

Start by adding the following dependency to your project:

  // Design library
  implementation 'com.android.support:design:28.0.0'

Additionally, get any picture of your preference, save it in your drawables folder, and called it background.jpg. This picture will be collapsed and expanded when scrolling.

As a side note, pexels.com is a great website for finding HD pictures for free.

Step #2: Styles.xml

In your styles.xml file change the parent theme to Theme.AppCompat.Light.NoActionBar. Your styles.xml should look as follows:

  <resources>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>

  </resources>

Step #3: Strings.xml

To your strings.xml file add a new item called long_string and, as the name implies, set a long value to it. This value will be set to a textview that when scrolled, will collapse or expand the image downloaded in step #1.

The string resource file should look as follows:

  <resources>
    <string name="app_name">collapsingToolbar</string>
    <string name="long_string">Lorem ipsum dolor sit amet ... (more text here)</string>
  </resources>

Step #4: activity_main.xml

Here is where the magic happens.

I will start by showing the various components of this xml file and little by little we are going to build it together. Feel free to jump to part# 5 to see the complete code.

Part #1: The Root

This shows a high-level overview of the xml components. It looks as follows:

  <?xml version="1.0" encoding="utf-8"?>

  <!--Root-->
  <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <!--Part 2-->
    <android.support.design.widget.AppBarLayout ...>

    <!--Part 3-->
    <android.support.design.widget.FloatingActionButton ...>

    <!--Part 4-->
    <android.support.v4.widget.NestedScrollView ...>

  </android.support.design.widget.CoordinatorLayout>

As observed, the root view is a CoordinatorLayout and inside we have an AppBarLayout, FloatingActionButton, and a NestedScrollView. Let's explore each of those views.

Part #2: AppBarLayout

Let me start by showing the children of the AppBarLayout view and then explain what they do.

  <!--Part 2-->
  <android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <!--Child #1-->
    <android.support.design.widget.CollapsingToolbarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
      app:contentScrim="@color/colorPrimary"
      app:title="My Title">

        <!--Subchild #1-->
        <ImageView
          android:layout_width="match_parent"
          android:layout_height="300dp"
          android:src="@drawable/background"
          android:scaleType="centerCrop"/>

        <!--Subchild #2-->
        <android.support.v7.widget.Toolbar
          android:layout_width="wrap_content"
          android:layout_height="?attr/actionBarSize"
          android:theme="@style/ThemeOverlay.AppCompat.Dark"/>

    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>

As seen above, the AppBarLayout has a CollapsingToolbarLayout as its only child. Inside the CollapsingToolbarLayout there are two more children: An ImageView used for showing the image we downloaded in step #1 and a Toolbar. When the app opens the image will be shown. As the user scrolls the image will collapse and turn into a toolbar.

Important:
  • The attribute app:layout_scrollFlags in the CollapsingToolbarLayout specifies collapsing scrolling behavior. I recommend this Medium article to learn more about the available scrolling behaviors
  • The attribute app:title specifies the text to be shown in the toolbar.

Part #3: FloatingActionButton (FAB)

The FAB appears and disappears based on the scrolling behavior of the user. We achieve this behavior by anchoring it to the AppBarLayout from part #1. The FAB looks as follows:

  <!--Part 3-->
  <android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_input_add"
    android:tint="@android:color/white"
    android:layout_marginEnd="30dp"
    app:layout_anchor="@id/appBarLayout"
    app:layout_anchorGravity="bottom|right|end"/>

The important things to keep in mind is that it is anchored to the AppBarLayout with a specific anchor gravity.

Part #4: NestedScrollView

The NestedScrollView contains the Textview that will display the long text we created in step #3. To the NestedScrollView we specify a scrolling behavior that will produce the collapse and expansion of the AppBarLayout. The NestedScrollView looks as follows:

  <!--Part 4-->
  <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
      android:layout_marginTop="30dp"
      android:layout_marginStart="10dp"
      android:layout_marginEnd="10dp"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:text="@string/long_string"/>

  </android.support.v4.widget.NestedScrollView>

Part #5: All together

At this stage we have shown all the part of the activity_main.xml. The complete file looks as follows:

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <!--Part 2-->
    <android.support.design.widget.AppBarLayout
      android:id="@+id/appBarLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

      <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
        app:contentScrim="@color/colorPrimary"
        app:title="My Title">

        <ImageView
          android:layout_width="match_parent"
          android:layout_height="300dp"
          android:src="@drawable/background"
          android:scaleType="centerCrop"/>

        <android.support.v7.widget.Toolbar
          android:layout_width="wrap_content"
          android:layout_height="?attr/actionBarSize"
          android:theme="@style/ThemeOverlay.AppCompat.Dark"/>

      </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <!--Part 3-->
    <android.support.design.widget.FloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@android:drawable/ic_input_add"
      android:tint="@android:color/white"
      android:layout_marginEnd="30dp"
      app:layout_anchor="@id/appBarLayout"
      app:layout_anchorGravity="bottom|right|end"/>

    <!--Part 4-->
    <android.support.v4.widget.NestedScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior">

      <TextView
        android:layout_marginTop="30dp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/long_string"/>

    </android.support.v4.widget.NestedScrollView>

  </android.support.design.widget.CoordinatorLayout>

That's it!

We have now written all the necessary code for implementing a collapsing toolbar. If you run your application it should behave as follows:


As mentioned before you can find the complete code of this tutorial in my GitHub repo.

Stay tuned for the next one.

● ● ●

How would you rate this article?