Android CoordinatorLayout and CollapsingToolbarLayout Tutorial

In this android programming tip of the day, we are going to learn how to implement CoordinatorLayout and CollapsingToolbarLayout in android.

This is always handy when you want to implement a single detailed activity page.

According android developer guide – CoordinatorLayout is a super-powered FrameLayout. CoordinatorLayout is intended for two primary use cases:

As a top-level application decor or chrome layout

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

By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.

On the other hand, CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. CollapsingToolbarLayout contains the following features: Collapsing title, Content scrim, Status bar scrim, Parallax scrolling children and Pinned position children.

We are going to create a simple activity page that will contain an image within android CollapsingToolbarLayout. The text content section will be wrapped inside a NestedScrollView.

Below is a screen shot of what we will create

androidcoordinatorlayout

 

Lets start to soil our hands in code. Start up your IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 10

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 23

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidCoordinatorLayout

Package: com.inducesmile.androidcoordinatorLayout

Select Blank Activity

Name your activity : MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

Open the main xml layout and we are going to use Android CoordinatorLayout as the root parent in the layout.

You can see that the CollapsingToolbarLayout is placed inside the AppBarLayout and it contains an ImageView and Toolbar widget.

The FloatingActionButton control is place at the end of the CoordinatorLayout but with app:layout_anchor=“@id/app_bar_layout”, it will be attached to the bottom right of the AppBarLayout

Copy and add the code below to your layout file

app:layout_anchor="@id/app_bar_layout”
<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true">
    
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">
        
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@android:color/transparent"
            android:fitsSystemWindows="true">
            
            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:contentDescription="@string/app_name"
                android:src="@drawable/festival"
                app:layout_collapseMode="parallax"/>
            
             <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:title="@string/recent_news"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        
        <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/direction_card_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            card_view:cardElevation="@dimen/_5sdp"
            card_view:cardUseCompatPadding="true">
            
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                
                <TextView
                    android:id="@+id/single_news_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/in_news"
                    android:textColor="@color/colorPrimaryText"
                    android:textStyle="bold"
                    android:layout_marginTop="@dimen/_12sdp"
                    android:textSize="@dimen/_20sdp"
                    android:padding="@dimen/_12sdp"/>
                
                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/_12sdp"
                    android:orientation="horizontal">
                    
                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:src="@drawable/clock"
                        android:contentDescription="@string/app_name"/>
                    
                     <TextView
                        android:id="@+id/publish_date"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:text="@string/published_date"
                        android:textSize="@dimen/_14sdp"
                        android:textStyle="bold"
                        android:layout_weight="9"/>
                </LinearLayout>
                
                <TextView
                    android:id="@+id/news_main_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/in_news"
                    android:padding="@dimen/_12sdp"
                    android:textColor="@color/colorPrimaryText"
                    android:lineSpacingMultiplier="1.5"
                    android:textSize="@dimen/_13sdp"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </android.support.v4.widget.NestedScrollView>
    
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/favoriteicon"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

In the MainActivity file, if you have Toolbar already enable or added, you can remove it with the code sample below.

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if(getSupportActionBar() != null){
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

This is the end of the android programming tips. If you have any question, kindly use the comment box below and I will try as much as possible to provide a solution.

Remember to subscribe with your email address to be among the first to receive my new android blog post once it is published.

OTHER INTERESTING POSTS:

Add a Comment