IMPLEMENTING A COLLAPSING TOOLBARThe CoordinatorLayout is a new type of element introduced in the Android Design Library. Basically, it “coordinates” the behavior between its child

WITH ANDROID MATERIAL DESIGNIMPLEMENTING A COLLAPSING TOOLBAR

CONTENTS3 Introduction

4-5 Code

6 CoordinatorLayout 7 AppBarLayout

8 CollapsingToolBarLayout

9 ImageView

10 Toolbar 11 NestedScrollView

12 TextView

13 Conclusion

14 About Mindgrub

Copyright © Mindgrub Technologies, LLC | 1215 East Fort Avenue Suite 200 Baltimore, MD 21230 | 410-988-2444 | www.mindgrub.com | [email protected]

INTRODUCTION 3

INTRODUCTION

Mindgrub designs modern mobile applications using creative, innovative

programming methods. Recently, we were tasked with implementing a user profile

view in an Android app. This profile view would fill the top of the screen with an image,

and then collapse into a “normal” toolbar

as the user scrolled down the screen.

We’ve noticed a lot of interest in the

methodology we use to implement this

animation into our mobile apps, like the

Shuttle Dash app we made for Under

Armour. This white paper o�ers readers

a guide to incorporating a collapsing toolbar

into a mobile application.

Read through for a step-by-step

breakdown of the code used to create

a simplified demo of this animation.


We wrote up a basic code used to create a collapsing toolbar animation for a mobile

app. It might appear complicated at first glance, but it’s a lot simpler than it looks. In the next

few pages, we’ll walk you through the code and analyze each XML piece-by-piece.

The code is continued on page 5:

CODE 4

CODE

<android.support.design.widget.CoordinatorLayout 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">

<android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content">

<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:contentScrim="?attr/colorPrimary">

<ImageView android:id="@+id/expandedImage" android:layout_width="match_parent" android:layout_height="200dp" android:src="@drawable/beach_scene"

android:scaleType="centerCrop" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" />


<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" >

</android.support.v7.widget.Toolbar>

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

</android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" app:layout_behavior="@string/appbar_scrolling_view_behavior">

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/sample_string"/>

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

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

CODE 5

CODE


This piece should be the top level element in your fragment or activity. The CoordinatorLayout is a new type of element introduced in the Android Design Library.

Basically, it “coordinates” the behavior between its child views. The behavior is specified by

attributes set in its child views that are specific to the CoordinatorLayout. These behaviors may implement an array of interactions.

COORDINATORLAYOUT 6

COORDINATORLAYOUT

CoordinatorLayout is meant for two

use cases!1 As a top-level application decor or chrome layout

2 As a container for a specific interaction with one or more child views

<android.support.design.widget.CoordinatorLayout 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">


APPBARLAYOUT 7

APPBARLAYOUT

The AppBarLayout is another new element from the Android Design Library

that declares a layout for the toolbar. The children of this element will define the behavior

of the elements within the toolbar.

AppBarLayouts are actually required to be children of CoordinatorLayouts, and are also

required to have a sibling element that has the “layout_behavior” attribute set to

“AppBarLayout.ScrollingViewBehavior.” Setting this attribute on the sibling element binds

that element to the AppBarLayout, which lets it know when it should scroll.

We bind the AppBarLayout to the NestedScrollView. This is further discussed on page

10.

<android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content">


CollapsingToolbarLayout is a wrapper for Toolbar. This element is the child of the “AppBarLayout” and declares the “Collapsing” behavior we want

to implement.

The children of this element will declare how the toolbar is collapsing.

COLLAPSINGTOOLBARLAYOUT 8

COLLAPSINGTOOLBARLAYOUT

<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:contentScrim="?attr/colorPrimary">

CollapsingToolBarLayout Features

•Collapsing Title

•Content Scrim

•Status Bar Scrim

•Parallax Scrolling Children

•Pinned Position Children


IMAGEVIEW 9

IMAGEVIEW

You may be familiar with the ImageView class. For our collapsing toolbar,

we utilize a normal ImageView, just with a few exceptions.

We are setting the “layout_collapseMode” to “parallax.” This causes the ImageView to

move at a specific ratioas the user scrolls. You can set this ratio with the (optional)

“layout_collapseParallaxMultiplier” setting.

<ImageView android:id="@+id/expandedImage" android:layout_width="match_parent" android:layout_height="200dp" android:src="@drawable/beach_scene"

android:scaleType="centerCrop" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" />


TOOLBAR 10

TOOLBAR

This is another normal and familiar element. The di�erence is the layout

behavior set by the “layout_collapseMode” property.

For this element, we are setting it to “pin,” which causes it to stick to the top as the user

scrolls the view up.

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" >

</android.support.v7.widget.Toolbar>


As seen with many of the previous elements, this attribute is just a

normal NestedScrollView, with the exception of the “layout_behavior” attribute set.

It acts as the sibling element to the “AppBarLayout.”

NESTEDSCROLLVIEW 11

NESTEDSCROLLVIEW<android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" app:layout_behavior="@string/appbar_scrolling_view_behavior">


The last element we’ll break down is the TextView, which is simply allows

us to display text on the screen, and thus input the scrollable content for the app.

This can be used with any kind of layout or recyclerview. We used a TextView for our demo for

the sake of simplicity.

TEXTVIEW 12

TEXTVIEW<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/sample_string"/>


Thanks for downloading and reading! After working your way through

the code, you should be able to implement your own Collapsing Toolbar view.

You can still check out the original blog post on our website, as well as the code

from our example on GitHub.

We’re looking forward to publishing more informative and interesting White

Papers in the future. It’s part of our motto to Do Digital Good.

CONCLUSION 13

CONCLUSION

http://www.mindgrub.com/blog/matt-stanford/implementing-collapsing-toolbar-android-material-design

https://github.com/mindgrub-mstanford/blog_material_design_demo


Mindgrub Technologies, LLC (Mindgrub) is a privately-owned, award-winning technology innovation agency that creates custom mobile, social, and web apps for enterprise brands, industry leaders and educational organizations.

As a fully-sta�ed agency, Mindgrub cultivates top-tier talent in design, user experience, and development. Our team is driven by a hunger for knowledge and advancement. Instead of just churning out code and pixels, we pioneer creative methods of user interaction. Each member of our team is hand-selected for their mind and unique set of abilities. As the core contributors to Mindgrub’s ultimate mission, they devour new technology trends, techniques and methods to ensure innovative project solutions.

For more information on how Mindgrub can help develop your mobile presence visit mindgrub.com.

ABOUT MINDGRUB 14

ABOUT MINDGRUB

Documents

IMPLEMENTING A COLLAPSING TOOLBARThe CoordinatorLayout is a new type of element introduced in the Android Design Library. Basically, it “coordinates” the behavior between its child