Quick look on the CoordinatorLayout

 

As you might have noticed, Google recently released the Android Design Support Library, which allows you to bring Material Design Patterns to previous Android versions – back to Eclair – with relatively low effort. The design support library library ships with a number of handy components, all of which introduced in the original announcement by Ian Lake.

This blog post will briefly demonstrate the usage of the CoordinatorLayout to achieve a parallax header image effect and a floating action button which is aware of a snackbar being displayed and automatically animating itself out of the way. And that with pretty minimal effort – meaning that there’s no manual position calculation and animations required. This works right out of the box.

 

 

So, let’s get started by adding the support library dependencies to your gradle:

compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'

 

With that we’re able to populate our layout. The CoordinatorLayout works pretty much like the FrameLayout that we’re already familiar with. So, we’ll add an AppBarLayout, a NestedScrollView and a FloatingActionButton in it.

To achieve the desired parallax effect when scrolling, we need to disable the ActionBar in our Theme, or alternatively choose a base theme with no ActionBar in the first place. Like so:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/im_green</item>
    <item name="colorPrimaryDark">@color/im_green_trans</item>
    <item name="colorAccent">@color/im_green_trans</item>
    <item name="android:windowBackground">@color/window_background</item>
</style>

 

Then adding a Toolbar and an ImageView wrapped in CollapsingToolbarLayout into our AppBarLayout. We’ll give the image view the collapseMode parallax, the app bar a desired height for our parallax image and we’re good to go. The AppBarLayout may look like this:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="240dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/beachsunset"
            app:layout_collapseMode="parallax" />

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

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

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

 

The NestedScrollView works just like the good old ScrollView we used to know, except that we can tell it to react to scroll events from our AppBarLayout by specifying a fully qualified name to a CoordinatorLayout.Behaviour class in layout_behaviour . In our case we can use @string/appbar_scrolling_view_behavior which points to android.support.design.widget.AppBarLayout$ScrollingViewBehavior and is a predefined behavior that comes with the support library. This is where our magic happens. And the FAB behaves just like a normal ImageView. We’ll just let it float to the bottom|end. Scroll view and the fab declaration might look something like this:

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

    <!-- scrollable content -->
</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:layout_marginEnd="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:src="@mipmap/ic_launcher" />

 

Last, we need make our toolbar known by invoking setSupportActionBar() method in our activity and setting our desired title in our collapsing toolbar. A good place would be the in onCreate:

setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle(getString(R.string.app_name));

 

And that’s all it takes. No need for us to move pixels around. The support library does the heavy lifting. Nifty, huh? Here’s what our app looks like:

CoordinatorLayout Demo - expanded

CoordinatorLayout Demo - collapsed

 

 

You can find this demo’s source code on Github. And be sure to check out what else the CoordinatorLayout is capable of and what other components the design support library comes with. This nice summary by Ian Lake is a good starting point:

 

 

 

 

2 thoughts on “Quick look on the CoordinatorLayout

  • September 21, 2015 at 1:16 pm
    Permalink

    Do you know how to define when the toolbar to start colour transformation from the image to green(in your case)?I mean that the transformations begins when the collapsing is almost done and I want to make it to start from the begging(when the user start collapsing).

    Reply
  • November 17, 2015 at 6:40 am
    Permalink

    Hey
    Do you know how can i allow to visible image when collapse in palace of color ?
    i have seen it in many apps but i can’t find any hint so can you tell me ?

    Thanks for other info…

    Reply

Leave a Reply

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