Implementing a Collapsing Toolbar

Implementing Material Designs

With the continuing adoption of Material Design across Android apps, I think there is a bit of a divide between these beautiful/functional designs that are being produced, and the technical knowledge of actually implementing those designs. This gap between design and implementation was recently narrowed with the release of the Design Support Library. There is now an extremely useful set of widgets specifically to make the implementation of Material Design easier on the Android platform.

CollapsingToolbarLayout

I recently spent some time exploring one of these new widgets: the CollapsingToolbarLayout, and wanted share some of what I discovered in implementing an expanded height, collapsing toolbar. The objective of this demo is to simply create an extended height AppBar that contains a title and animates to a standard AppBar height in response to a user scrolling action.

Setup

First off, make sure you have the required dependencies: - `compile 'com.android.support:appcompat-v7:23.0.1` - `compile 'com.android.support:design:23.0.1` Next, ensure you have a new project containing a single `AppCompatActivity`. The code for this activity should look something like this to start:
 public class MainActivity extends AppCompatActivity {  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
   }  
 }  

Create the root layout

For this simple implementation, all the magic takes place within `activity_main.xml`.

First off, update the root element of the layout to be a `CoordinatorLayout`, and make sure to fully qualify the `CoordinatorLayout` class name since it comes from a support library. This will save you from wonderful "Class not found" errors when you deploy and run your app.

 <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">  
   <!--AppBarLayout will go here-->  
   <!--Scrolling content will go here-->  
 </android.support.design.widget.CoordinatorLayout>  

Setup the scrolling content

Now it's time to setup the scrolling content. This is the layout that the user will interact with that will cause the toolbar to collapse and expand.

This example will keep things very simple. The scrolling content will simply consist of a `NestedScrollView` containing a `TextView` displaying a very long string. Notice the use of NestedScrollView rather than ScrollView. `CoordinatorLayout` knows how to interact with `NestedScrollView`, so If you want coordinated scrolling behaviors, you must use it over `ScrollView`.

The scrolling view must be a direct child of the `CoordinatorLayout` as it will later interact with its sibling view (the `AppBarLayout`).

 <!-- Scrolling Content -->  
 <android.support.v4.widget.NestedScrollView  
 android:layout_width="match_parent"  
 android:layout_height="match_parent"  
 app:layout_behavior="@string/appbar_scrolling_view_behavior"  
 android:padding="@dimen/activity_horizontal_margin"  
 android:clipToPadding="false"  
   >  
 <TextView  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   style="@style/TextAppearance.AppCompat.Large"  
   android:text="@string/lorem_ipsum"  
   />  
 </android.support.v4.widget.NestedScrollView>  

Notice the `app:layout_behavior` attribute on the `NestedScrollView`. That attribute informs the `CoordinatorLayout` that the view scrolls and will allow other content to react to those scrolling events accordingly.

Time to add the AppBar

To add a `Toolbar` that can be expanded and collapsed three support library widgets can be used:

1. AppBarLayout
2. CollapsingToolbarLayout
3. Toolbar

These views will be nested in the order in which they were included above. They should be placed within the root layout as a direct child of the `CoordinatorLayout` and as a sibling of the scrolling content.

 <!-- AppBar content -->  
 <android.support.design.widget.AppBarLayout  
 android:layout_width="match_parent"  
 android:layout_height="192dp"  
 >  
 <android.support.design.widget.CollapsingToolbarLayout  
 android:layout_width="match_parent"  
 android:layout_height="match_parent"  
 app:layout_scrollFlags="scroll|exitUntilCollapsed"  
 >  
 <android.support.v7.widget.Toolbar  
   android:id="@+id/toolbar"  
   android:layout_width="match_parent"  
   android:layout_height="?attr/actionBarSize"  
   android:background="?attr/colorPrimary"  
   />  
 </android.support.design.widget.CollapsingToolbarLayout>  

There are a few interesting things in this layout to point out:

1. The expanded size of the AppBar is controlled by the height attribute of the `AppBarLayout`.

2. The collapsing behavior of the AppBar is controlled by the `app:layout_scrollFlags` attribute.  In the example above the `scroll` value specifies that the `CollapsingToolbarLayout` should respond to scroll events, and the `exitUntilCollapsed` value specifies that the AppBar should shrink in size until it reaches it's collapsed (min) height.
3. The min height is controlled by the height of the `Toolbar` within the `CollapsingToolbarLayout`

One of the great things about `CoordinatorLayout` and some of its supporting cast members is that the behaviors of different views can be easily customized through xml without ever touching your code.  This makes it very easy for a developer or designer to quickly try different behaviors withing having to modify any Java code!!!

And there you have it.  A simple implementation of a collapsing, extended height AppBar.  For a information you can follow the video link below, or you can check out the sample code on GitHub.

Video Tutorial
Sample Code

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.