ZOFTINO.COM android and web dev tutorials

Collapsing Toolbar Layout Example

CollapsingToolbarLayout is provided to help in creating toolbars that follow material design. It is a wrapper for tool bar adding additional features to toolbar in the coordinator layout and app bar layout context.

Collapsing toolbar layout should be used as a child of app bar layout. To make functionality provided by app bar layout work, app bar layout needs to be part of coordinator layout. Collapsing toolbar layout, app bar layout and coordinator layout framework is provided in design support library.

To use these layouts in your project, you need to include design support library by adding below dependency in your gradle build file.

compile 'com.android.support:design:25.0.1'

For more information about coordinator layout and app bar layout, please read coordinator layout and app bar layout related articles.

How to use collapsing toolbar layout

Collapsing toolbar layout allows you to customize toolbar in app bar layout meaning depending on positional changes applied to tool bar by app bar layout and coordinator layout, collapsing toolbar layout lets you configure toolbar, changing tool bar UI experience.

Collapsing toolbar layout output

android collapsing toolbar layout example

Collapsing toolbar layout code

Layout xml

 <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/appbar_layout_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.materialdesign.AppBarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        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">
            <TextView
                android:id="@+id/page_nme"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorAccent"
                android:height="250dp"
                app:layout_collapseMode="parallax"></TextView>
            <android.support.v7.widget.Toolbar
                android:id="@+id/z_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:elevation="4dp"
                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:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/coupons_lst"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></TextView>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
 

Activity

 package com.zoftino.materialdesign;

import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

public class CollapsingToolbarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_toolbar_layout);

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);

        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        ctl.setTitle("Best Coupons Deals");


        TextView tv =(TextView)findViewById(R.id.coupons_lst);
        tv.setText(CouponStoreData.arrayOfCoupons.toString());

    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.z_menu, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {
            case R.id.latest_coupons:
                Toast.makeText(this,"latest coupons action clicked", Toast.LENGTH_LONG).show();
                return true;

            case R.id.top_stores:
                Toast.makeText(this,"top stores action clicked", Toast.LENGTH_LONG).show();
                return true;

            case R.id.action_settings:
                Toast.makeText(this," action clicked", Toast.LENGTH_LONG).show();
                return true;

            default:
                return super.onOptionsItemSelected(item);

        }
    }
}
 

Collapsing toolbar layout title configuration

android collapsing toolbar layout title

As seen above, collapsing toolbar layout title can be set using setTitle method. You can apply different text styles for collapsing and expanding toolbar.

CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
ctl.setTitle("Best Coupons Deals");
ctl.setCollapsedTitleTextAppearance(R.style.coll_toolbar_title);
ctl.setExpandedTitleTextAppearance(R.style.exp_toolbar_title);

Styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="exp_toolbar_title" parent="@android:style/TextAppearance.Holo.Medium">
        <item name="android:textSize">36dp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textAlignment">center</item>
        <item name="android:textStyle">bold</item>
    </style>
    <style name="coll_toolbar_title" parent="@android:style/TextAppearance.Medium">
        <item name="android:textSize">20dp</item>
        <item name="android:textColor">@android:color/white</item>
    </style>
</resources>

Parallax scrolling and pinned position childern

Attribute layout_collapseMode controls how child views of collapsing toolbar layout move when layout is moving. If layout_collapseMode of a view is set to parallax, it moves in parallax fashion. When layout_collapseMode attribute is set to pin, view is placed in a fixed position. Below screens show toolbar when layout_collapseMode is set to pin and without the layout_collapseMode setting.

android collapsing toolbar layout pin position