How to create animated toolbar with CoordinatorLayout, DrawerLayout, AppBarLayout, CollapsingToolbarLayout, and NestedScrollView widget.

Collapsing toolbar is the higher version of normal toolbar widget used with CollapsingToolbarLayout widget. This widget gives us the facility to create an amazing toolbar animation feature called as expanding and collapsing toolbar on screen dragging. This feature will automatically increase the toolbar size which we have defined into AppBarLayout widget. So here is the complete step by step tutorial for Android Material design Collapsing Expanding Toolbar example tutorial.

Please follow the below steps :

1. Open your project’s build.gradle ( Module : app ) file.

2. Please add below code inside your build.gradle ( Module : app ) file.

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

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

Here your go friends….Now We are going start coding.

Android Material design Collapsing Expanding Toolbar example tutorial.

Code for styles.xml file.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>

Code for MainActivity.java file.

package com.android_examples.collapsingtoolbarlayout_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    CollapsingToolbarLayout collapsingToolbarLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar1);
        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.CollapsingToolbarLayout1);

        setSupportActionBar(toolbar);

        collapsingToolbarLayout.setTitle("Collapsing Toolbar");

    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    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:id="@+id/drawerlayout1">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorlayout"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        app:expandedTitleMarginStart="70dp">

        <android.support.design.widget.AppBarLayout
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:layout_width="fill_parent"
            android:layout_height="230dp">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/CollapsingToolbarLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar1"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    android:background="?attr/colorPrimary"
                    android:minHeight="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />

            </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:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:text="TextView 1"
                    android:id="@+id/textview1"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#F44336"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 2"
                    android:id="@+id/textview2"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#E91E63"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 3"
                    android:id="@+id/textview3"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#2196F3"
                    android:textColor="#FAFAFA"/>


                <TextView
                    android:text="TextView 4"
                    android:id="@+id/textview4"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#FF9800"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 5"
                    android:id="@+id/textview5"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#009688"
                    android:textColor="#FAFAFA"/>

                <TextView
                    android:text="TextView 6"
                    android:id="@+id/textview6"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#F4FF81"
                    android:textColor="#000000"/>

                <TextView
                    android:text="TextView 7"
                    android:id="@+id/textview7"
                    android:layout_width="fill_parent"
                    android:layout_height="70dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:gravity="center"
                    android:background="#FFEB3B"
                    android:textColor="#000000"/>

            </LinearLayout>

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

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

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

Screenshot: