Android Toolbar Animation Using Design Support Library

Android Toolbar Animation Using Design Support Library

With the new Design support library for Android, it has become easier for us to create some great animations with minimal effort.

We have seen WhatsApp profile view design with user image hide on scrolling. For that we need Design Support Library. In one of my earlier tutorial i had shown how to hide and show ToolBar you can see the tutorial here.

For this tutorial you need to learn how to implement material design in android that you can check here.

Example

In this tutorial, we are going to learn how to implement ToolBar Animation using Design Support Library.

VIDEO DEMO

1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.

2. Open build.gradle and include this libraries show below:

3. Open res ⇒ values and create a new xml file naming colors.xml and add the following colors to it.   

4. For material design we need to modify to our styles.xml file by adding below codes :

Now, for 21 Api Level we need to create a new folder  under res directory naming values-v21 and create styles.xml file and add this code to it :

5. Now create a layout xml file naming activity_main.xml and add the below code to it. This code will help us to do toolbar animation by hiding image. The parent should be CoordinatorLayout and inside that we need AppBarLayout inside this add CollapsingToolbarLayout that will help us to achieve the animation.

You must set the layout_scrollFlags for the CollapsingToolbarLayout :

  • scroll: this flag should be set for all views that want to scroll off the screen – for views that do not use this flag, they’ll remain pinned to the top of the screen
  • exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting.

In CollapsingToolbarLayout add this flags :

Now put your ImageView inside CollapseToolbar similarly you can put here any view that you want to hide on scroll and add the collapse mode:

The Toolbar must use pin as its collapseMode because we want the Toolbar to persist and remain on top as the user scrolls down. Note I haven’t set any color for the Toolbar. That will be taken care of by the CollapsingToolbarLayout which will dynamically pick a color from our image and set it to the Toolbar on scroll.

Now add RecyclerView or any your view with below layout behaviour:

6. Since we are using RecyclerView so we need custom layout. So create custom layout naming item_row.xml and add the code.

If you want to learn how to implement recycler view than you can see my RecyclerView tutorial.

7. Now create a ViewHolder class for RecyclerView naming DemoViewHolder.java and add the following code.

8. Now create RecyclerViewAdapter class naming RecyclerView_Adapter.java and add the following code.

9. Finally come to your MainActivity.java and add the following code. In this we have to set title to CollapsingToolbarLayout only otherwise it won’t show title.

I had uses the palette that will generate the color based on our image in AsyncTask and set it over Toolbar.

10. Finally, all done  –  run the app and you will get the output as shown in video.

Thanks. :)

Download Source Code – >

 

 

 

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)