All CategoriesAndroid App Development

How to Create Animated Icons in Android

Introduction to Animated Icons in Android

Do you want to improve the user interface of our application? If yes, you have an excellent option of doing so – by creating animated icons. A very common features in today’s applications, it can help you come up with fabulous applications.
Android design support library provides us with the feature to use it in our application by creating vector drawable. Along with the help of Vector drawable, we can easily create vector images.
The main utility of Vector images is in allowing to scale without losing its definitions.
Once the Vector image is created it will always adjust to various densities. We can also set the duration for transforming one icon into another.
It is just the transformation of images from one to another. Here in this example, we are going to create menu icon which performs dual functions – one is menu option and the other is a back option after transformation. It shows the animation when we press on this icon. That is where it gets its name from – animated icons.
Similarly, we can do the transformation on another icon as well i.e. Floating Action Button which shows plus sign by default and then gets transformed into check sign.
So, by using this functionality we can create many animated icons according to the need of the application.
Here we will transform menu icon into arrow icon and also the Floating Action Button plus sign into check sign.

Real Time Example:

We can see this feature in many applications. One significant usage of this is in the app Hangout. It uses the feature of Floating Action Button at the bottom right side. When we select this, it animates and fades the background of the screen and transforms the Floating Action Button icons into new conversation icon with two more options i.e. new group and new video call.

build.gradle:

Add the dependency in your build.gradle file.

dependencies {
compile 'com.android.support:design:23.2.0'
}

Class:

AnimatedVectorDrawable:

It is a class which comes from “android.graphics.drawable.AnimatedVectorDrawable”. It uses 3 XML files to animate the properties of Vector Drawable and to create an animated drawable. Means it uses ObjectAnimator and Animator-set.
First XML file is for VectorDrawable, Second XML file defines the target VectorDrawable and Third one is Animator xml file which is the same ObjectAnimator or Animator-set for rotation.
Let’s explain these features with the help of an example.

Example with code:

This is a simple example of how to create animated icons in Android.
Create an application AnimatedIconsAndroidExample.

Requirements:

Here, in this example, we are going to create a simple application having animated icons. So for this we will require all these files:
MainActivity.java, activity_main.xml, strings.xml.
res/anim/ res/drawable

clockwise_rotation.xml ic_add_animatable.xml
counter_clockwise_rotation.xml ic_add_vector.xml
ic_add_morph.xml ic_back_animatable.xml
ic_back_morph.xml ic_back_vector.xml
ic_check_morph.xml ic_check_animatable.xml
ic_menu_morph.xml ic_check_vector.xml
ic_menu_animatable.xml
ic_menu_vector.xml.

Now let’s do it.
As we discussed above, to create vector images we will require three XML files. So create it one by one.

ic_add_vector.xml:

Create this XML file in res/drawable folder and Add the code here.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="100"
android:viewportWidth="100">
<group
android:name="rotation"
android:pivotX="50"
android:pivotY="50">
<path
android:name="add"
android:pathData="@string/add_vector_path"
android:strokeColor="@android:color/white"
android:strokeLineCap="round"
android:strokeWidth="7"/>
</group>
</vector>

Here, we allow the animation to happen on group and path attributes.

strings.xml:

Add the code here

<string name="menu_vector_path" translatable="false">M20 30,L80 30,M20 50,L80 50,M20 70,L80 70</string>
<string name="back_vector_path" translatable="false">M50 25,L80 50,M20 50,L80 50,M50 75,L80 50</string>
<string name="add_vector_path" translatable="false">M50 20,L50 80,M20 50,L80 50</string>
<string name="remove_vector_path" translatable="false">M60 25,L75 45,M25 75,L60 25</string>

Here, we set the path data.
M is “Moveto”, it sets a new starting point. L is “Lineto”, it draws a line from the previous point to the new point.

clockwise_rotation.xml:

Create this XML file in res/anim/ folder and add the code here.

<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_longAnimTime"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="180"
android:valueType="floatType"/>

Here, we set the properties of target object like the duration of animation and etc.

ic_add_morph.xml:

Create this XML file same as we had created above. But here, the animator will transform the path from previous to the new one.

Add the code here

objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_longAnimTime"
android:propertyName="pathData"
android:valueFrom="@string/add_vector_path"
android:valueTo="@string/remove_vector_path"
android:valueType="pathType"/>

We can see very well, that here we have set the properties for path data. The above is for rotation.

ic_add_animatable.xml:

Create this XML file in res/drawable folder. It links the target vector drawable path and the groups to animate.
Add the code here.

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_add_vector">
<target
android:name="add"
android:animation="@anim/ic_add_morph"/>
<target
android:name="rotation"
android:animation="@anim/clockwise_rotation"/>
</animated-vector>

Here, we link all the files into a final animated vector icon.
Here, we show only for add, Like this create all the XML files.
Transformation of menu icon with the help of image:
See the figure below to see the transformation of icons.

activity_main.xml:

Create this XML file for our main layout and add the code inside CoordinatorLayout.

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/activity_horizontal_margin"
android:src="@drawable/ic_add_vector"
app:fabSize="normal"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|end"/>

MainActivity.java:

This is our MainActivity file where we can take all the references and set the properties of AnimatedVectorDrawable.
Initialize the AnimatedVectorDrawable and FloatingActionButton:

private AnimatedVectorDrawable mMenuDrawable;
private AnimatedVectorDrawable mBackDrawable;
private boolean mMenuFlag;
private AnimatedVectorDrawable mAddDrawable;
private AnimatedVectorDrawable mCheckDrawable;
private boolean mFabFlag;
private FloatingActionButton mFloatingActionButton;

Add the code in onCreate(){..}
Here, we take the reference of all the animated drawable and floating action button and set the listeners on them.

mFloatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
mMenuDrawable = (AnimatedVectorDrawable) getDrawable(R.drawable.ic_menu_animatable);
mBackDrawable = (AnimatedVectorDrawable) getDrawable(R.drawable.ic_back_animatable);
mAddDrawable = (AnimatedVectorDrawable) getDrawable(R.drawable.ic_add_animatable);
mCheckDrawable = (AnimatedVectorDrawable) getDrawable(R.drawable.ic_check_animatable);
After clicking on Floating Action Button
if (mFabFlag) {
mFloatingActionButton.setImageDrawable(mCheckDrawable);
mCheckDrawable.start();
} else {
mFloatingActionButton.setImageDrawable(mAddDrawable);
mAddDrawable.start();
}
mFabFlag = !mFabFlag;

Here, when we call the start() method then the animation starts otherwise it shows normal.
Same as for menu icon

if (mMenuFlag) {
getSupportActionBar().setHomeAsUpIndicator(mBackDrawable);
mBackDrawable.start();
} else {
getSupportActionBar().setHomeAsUpIndicator(mMenuDrawable);
mMenuDrawable.start();
}
mMenuFlag = !mMenuFlag;

Output:

At Starting

 

After Menu Click

 

 After Fab Click 

Download Source code: GitHub

 

Conclusion:

It is just a simple example of how to create Animated icons in Android by using Android design support library with the help of vector drawable. We can create many applications with the help of this feature and customize it according to the need of the application. This feature is significantly used in some application like Hangout.
Keep visiting www.acadgild.com for more updates on the courses.
Android Programming

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Close