Introduction

CoordinatorLayout is a super-powered FrameLayout in that child-view behaviours can be provided to 'coordinate' their interactive with their parent or siblings. Reference

AppBarLayout is a vertical LinearLayout which implements many of the features of Material design appbar concepts, namely scrolling gestures. Reference

CollapsingToolbarLayout is a wrapper for a Toolbar to be used as a direct child of an AppBarLayout to provide a multitude of features, for example Collapsing title, and Parallax scrolling children. Reference

Palette is a helper class to extract prominent colours from an image. Reference

Goal

The goal of this kata is to add a CoordinatorLayout, AppBarLayout and CollapsingToolbarLayout to apply the material design, in the form of a parallax collapsing toolbar. You'll also create a palette colour from the AppBar image to apply to the header and footer toolbars. [Source reference]

Exercise

Begin by adding an android.support.design.widget.CoordinatorLayout around RecyclerView in your main_activity.xml layout.

...
<!-- CoordinatorLayout -->
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_marginBottom="?attr/actionBarSize">
    <!-- RecyclerView -->
    ...
</android.support.design.widget.CoordinatorLayout>
...

Next, to replace the previously implemented header Toolbar with an AppBar, add an android.support.design.widget.AppBarLayout as the first child layout inside of the CoordinatorLayout (above the RecyclerView), that will manage the behaviour of the AppBar/Toolbar:

...
<!-- CoordinatorLayout -->
<android.support.design.widget.CoordinatorLayout
    ...
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbar_height">
    </android.support.design.widget.AppBarLayout>
    <!-- RecyclerView -->
    ...
</android.support.design.widget.CoordinatorLayout>
...

Now, add a CollapsingToolbarLayout as a child within the AppBarLayout that will serve as the Toolbar with a parallax scrolling effect:

...
<!-- CoordinatorLayout -->
<android.support.design.widget.CoordinatorLayout
    ...
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbar_height">
        <!-- Collapsing Toolbar -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/image"
                app:layout_collapseMode="parallax" />
            <!-- Header Toolbar -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/header_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>
    <!-- RecyclerView -->
    ...
</android.support.design.widget.CoordinatorLayout>
...

Finally, generate the Palette colour for the CollapsingToolbarLayout and footer Toolbar. This is done programmatically and your MainActivity activity:

...
protected void onCreate(Bundle savedInstanceState) {
    // Generate palette
    final CollapsingToolbarLayout ctb = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
    final Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.image);
    Palette.from(bmp).generate(new Palette.PaletteAsyncListener() {
        @Override
        public void onGenerated(final Palette palette) {
            mutedColour = palette.getMutedColor(R.attr.colorPrimary);
            ctb.setContentScrimColor(mutedColour);
            footerToolbar.setBackgroundColor(mutedColour);
        }
    });
...
}