Collapsing Toolbars Android Example

CollapsingToolbarLayout is the newly introduced in Lollipop. Whenever user scrolls up, this control will provide animating effect. With help of Design Library we can provide same animation effect from Android 2.1 onward devices.

We can wrap ImageView & Toolbar as child of CollapsingToolbarLayout, whenever scroll event occurs the wrapped toolbar goes up & image gets diminished, pinned at the top. The size of the title gets reduced slowly.

Add the following dependency into build.gradle file.

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

In this example, we have included two cardview, you can observe the change as the card views scrolls up slowly.

Collapsing_toolbar_example

If you are new to AppbarLayout first read this post and then proceed. Set CollapsingToolbarLayout as child, set the  scroll flags, background color & for toolbar set collapseMode properties like Paralax mode etc.., this properties  is about the effect of animation, learn more about collapse mode here.

You must Add NestedScrollView for the smooth scrolling effect, inside this place the contents in desired layout. If the number of views inside the scroll view is less, then set layout_gravity , else this will leave empty white space between layout & toolbar.

activity_main.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/MyAppbar"
        android:layout_width="match_parent"
        android:layout_height="256dp" <!-- height of appbar -->
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:background="@color/material_deep_teal_500"
            android:fitsSystemWindows="true">

            <android.support.v7.widget.Toolbar
                android:id="@+id/MyToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax" />

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

        <android.support.v7.widget.CardView
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="@color/error_color"
                    android:textSize="20sp"
                    android:text="This text is part of first Cardview\n\n"/>

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:textColor="@color/abc_search_url_text"
                    android:text="This text is part of second Cardview\n\n"/>

            </LinearLayout>

        </android.support.v7.widget.CardView>

        </LinearLayout>

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

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

In Activity OnCreate method set the toolbar & title for CollapsingToolbar.

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

        final Toolbar toolbar = (Toolbar) findViewById(R.id.MyToolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar);
        collapsingToolbar.setTitle("My Toolbar Tittle"); 
    }

Update the styles.xml

  <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

Now run the program and scroll up, you will see the output like

Collapsing_toolbar_scroll_up

To set image as background of collapsing toolbar, simply add Imageview as part of Collapsingtoolbarlayout

Collapsing_toolbar_image_background

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

            <ImageView
                android:id="@+id/bgheader"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:background="@drawable/sunflowerpic"
                app:layout_collapseMode="pin" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/MyToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax" />

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

After scrolling up, here how the output looks. Image gets pinned at the top as background of appbar.

Scrolled_collapsed_image_toolbar

To Change the text color before and after collapsing toolbar follow this code.

        //this will change the display title text color.

        collapsingToolbar.setCollapsedTitleTextColor(getResources().getColor(R.color.white));
        collapsingToolbar.setExpandedTitleColor(getResources().getColor(R.color.Yellow));

To Change the color of Toolbar after scroll up or collapsing, just use the app:contentscrim  propertie.
collapsing_toolbar_contentScrim_example
To Change appbar color statically & dynamically.

 app:contentScrim="@color/blue"
 collapsingToolbar.setContentScrimColor(getResources().getColor(R.color.blue));

Now simply scroll up to see the effects.

To set the position of title in CollapsingToolbarLayout use the below properties.

  app:expandedTitleMarginStart="78dp"
  app:expandedTitleMarginEnd="124dp"

collapsing_toolbar_text_position

To change the title size of text in appbar or in collapsing toolbar layout, use the below code.

Declare style in style.xml

<style name="expandedappbar" parent="@android:style/TextAppearance.Medium">
        <item name="android:textSize">48sp</item>
        <item name="android:textColor">#ffff3017</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="collapsedappbar" parent="@android:style/TextAppearance.Medium">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@color/white</item>
    </style>

Set the style programmatically

 collapsingToolbar.setExpandedTitleTextAppearance(R.style.expandedappbar);
 collapsingToolbar.setCollapsedTitleTextAppearance(R.style.collapsedappbar);

Customized Collapsing toolbar before and after scroll up

Collapseing Toolbar Bold Font

 

Collapseing Toolbar Text customization

If you have any queries drop us comment thank you.