Animated Android Toolbar (Expanding and Collapsing)

Android design support library makes us easier to create some amazing animations with less code. Nowadays lots of android applications use Toolbar instead of ActionBar/AppBar because it has lots of functions and we can easily customize according to our needs. To make parallax Toolbar, expandable/collapsible toolbar some widgets like AppBarLayout, CoordinatorLayout, CollapsingToolbarLayout, etc. In this tutorial, you will learn to make expanding and collapsing ActionBar/AppBar/Toolbar and also some animations while scrolling.

The Toolbar/AppBar is expanded right after you run the app and it will collapse and will become small when you scroll up and toolbar will extend while scrolling down the content.

Related:
How to Hide Toolbar/AppBarLayout When Content Scroll
Android Toolbar Example: How to Use Toolbar as ActionBar
How to Hide Android Status/Status Bar Programmatically

Android Example: How to Make Collapsing and Expanding Toolbar with Animation

Create a new android project and give the project name “Material Design Animated Android Toolbar”.

Adding Design Support Library Dependencies

Open your app build.gradle file and add compile 'com.android.support:design:23.1.0' as dependencies like below.

build.gradle

Adding Color Value and Modify Theme

Open the colors.xml file from res > values and add the following color values.

res/values/colors.xml

Open styles.xml file from res > values and replace with below content.

res/values/styles.xml


XML Layout File

To make expanding and collapsing, here I have added AppBarLayout, CoordinatorLayout, CollapsingToolbarLayout, Toolbar, NestedScrollView, etc. with different attributes. Following is the complete content of java activity file.

res/layout/ animated_toolbar_with_background_image.xml

Java Activity File

Open your app’s java activity file and add the following code. Here is little bit java code but very important.

src/AnimatedExpandingCollapsingToolbar.java

Now, run your Animated Android Toolbar (Expanding and Collapsing) application and scroll the content which will look like above demo.