How to use Animated Vector Drawable in your app

Animated Vector Drawable added in Lollipop is a feature which provides you the ability to make your vector drawable images start moving.

First, you want to learn how to draw vector drawable in XML. To draw VectorDrawable you want to learn SVG path. If you have SVG file, you can convert it to VectorDrawable using vector asset tool in you Android Studio.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240dp"
    android:height="240dp">

    <path
        android:fillColor="#E0E0E0"
        android:pathData="M100,100m-99.5,0a99.5,99.5 0,1 1,199 0a99.5,99.5 0,1 1,-199 0" />

    <path
        android:fillColor="@color/primary_color"
        android:pathData="M114.3,57.2H72.1c-2.2,0 -4,1.8 -4,4v77.6c0,2.2 1.8,4 4,4h55.7c2.2,0 4,-1.8 4,-4V75.2L114.3,57.2zM94.9,100.7V80.5h10.3v20.2h6.8l-12,12l-12,-12H94.9zM113.9,119.5H86.1v-3.5h27.9V119.5z" />
    <path
        android:fillColor="@color/dark_primary_color"
        android:pathData="M131.8,75.2l-17.5,-18l0,17.9z" />

</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"

android:width="240dp"

android:height="240dp">

<path

android:fillColor="#E0E0E0"

android:pathData="M100,100m-99.5,0a99.5,99.5 0,1 1,199 0a99.5,99.5 0,1 1,-199 0" />

<path

android:fillColor="@color/primary_color"

android:pathData="M114.3,57.2H72.1c-2.2,0 -4,1.8 -4,4v77.6c0,2.2 1.8,4 4,4h55.7c2.2,0 4,-1.8 4,-4V75.2L114.3,57.2zM94.9,100.7V80.5h10.3v20.2h6.8l-12,12l-12,-12H94.9zM113.9,119.5H86.1v-3.5h27.9V119.5z" />

<path

android:fillColor="@color/dark_primary_color"

android:pathData="M131.8,75.2l-17.5,-18l0,17.9z" />

</vector>

The above code segment is an example of a vector drawable (let’s say ic_download.xml) and each path represents a line or figure. The image generated by this segment is given below

Now to make a particular path move you have to define that path inside a group tag and must provide it with a specific name. There can be more than one group in a single vector drawable XML.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240dp"
    android:height="240dp"
    android:viewportHeight="200.0"
    android:viewportWidth="200.0">
    <path
        android:fillColor="#E0E0E0"
        android:pathData="M100,100m-99.5,0a99.5,99.5 0,1 1,199 0a99.5,99.5 0,1 1,-199 0" />

    <group android:name="page">

        <path
            android:fillColor="@color/primary_color"
            android:pathData="M114.3,57.2H72.1c-2.2,0 -4,1.8 -4,4v77.6c0,2.2 1.8,4 4,4h55.7c2.2,0 4,-1.8 4,-4V75.2L114.3,57.2zM94.9,100.7V80.5h10.3v20.2h6.8l-12,12l-12,-12H94.9zM113.9,119.5H86.1v-3.5h27.9V119.5z" />
        <path
            android:fillColor="@color/dark_primary_color"
            android:pathData="M131.8,75.2l-17.5,-18l0,17.9z" />
    </group>

</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"

android:width="240dp"

android:height="240dp"

android:viewportHeight="200.0"

android:viewportWidth="200.0">

<path

android:fillColor="#E0E0E0"

android:pathData="M100,100m-99.5,0a99.5,99.5 0,1 1,199 0a99.5,99.5 0,1 1,-199 0" />

<path

android:fillColor="@color/primary_color"

<path

android:fillColor="@color/dark_primary_color"

android:pathData="M131.8,75.2l-17.5,-18l0,17.9z" />

</group>

</vector>

Now your vector drawable is ready. Its time to create an animator.

Create a new folder “animator”under “res” folder if its not there and inside it create a new XML file (let’s say ic_download_animator.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:duration="1000"
        android:propertyName="translateY"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:valueFrom="-20"
        android:valueTo="20"
        android:valueType="floatType" />

</set>

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator

android:duration="1000"

android:propertyName="translateY"

android:repeatCount="infinite"

android:repeatMode="reverse"

android:valueFrom="-20"

android:valueTo="20"

android:valueType="floatType" />

</set>

as you can see there are several tags, so now lets discuss about some main tags.

<set> = this is an animation set which contains different animators and a particular set is executed to show the movement.

<objectAnimator> = This is one animation. it can be either along X axis or Y axis or in a rotation which is to be mentioned in propertyName attribute.

Now your vector drawable and animator is ready its time to combine them to create an animation. For that, you have to create an XML file in your “drawable” folder (lets say ic_download_animation.xml)

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/ic_download">

    <target
        android:animation="@anim/ic_download_animator"
        android:name="page" />

</animated-vector>

<?xml version="1.0" encoding="utf-8"?>

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:drawable="@drawable/ic_download">

<target

android:animation="@anim/ic_download_animator"

android:name="page" />

</animated-vector>

As you can see in the above code segment the

<animated-vector> = It defines that this particular vector drawable is can be animated and inside it the attribute android:drawable defines which drawable to use for the animation.

<target> = This tag is used to combine the group and the animator so that a group can be animated according to the animator.

Now when you have combined your vector drawable and animator you can use this (ic_download_animation.xml) in your main layout XML.

<ImageView
       android:id="@+id/ic_download_iv"
       android:layout_width="120dp"
       android:layout_height="120dp"
       app:srcCompat="@drawable/ic_download_animation"/>

<ImageView

android:id="@+id/ic_download_iv"

android:layout_width="120dp"

android:layout_height="120dp"

app:srcCompat="@drawable/ic_download_animation"/>

No, still your animation will not work. To start the animation you have to call the start() function Drawable class whenever you want to start the animation. You can use the below code segment for that.

ImageView mIcDownloadAnimator = (ImageView) mDownloadListLayout.findViewById(R.id.ic_downloads_iv);
Drawable drawable = mIcDownloadAnimator.getDrawable();
if (drawable instanceof Animatable) {
      ((Animatable) drawable).start();
}

ImageView mIcDownloadAnimator = (ImageView) mDownloadListLayout.findViewById(R.id.ic_downloads_iv);

Drawable drawable = mIcDownloadAnimator.getDrawable();

if (drawable instanceof Animatable) {

((Animatable) drawable).start();

}

That’s all !!! make your own animator and animate your vector drawables.

Thank you very much, this is Vedesh Kumar signing off.

Vedesh Kumar

Developer at WEBKUL

7 Dec, 2016
Created by - Vedesh Kumar

. . .

7 comments

Shubham Agarwal 8 years ago

really Cool stuff.

Vedesh Kumar 6 years ago
Thanks for the appreciation.

Reply

yuvraj 6 years ago

Greate work yaar ..This is what I was looking for

Vedesh Kumar (Moderator) 6 years ago
I am glad that the blog helped you, Yuvraj.

Reply

Piotr Obst 5 years ago

Thank you very much, you really helped me!
I also recomend:
https://sourcediving.com/android-recipes-the-easy-path-to-animated-icons-878bffcb0920
https://shapeshifter.design/

Piotr Obst 5 years ago

Thank you very much, you really helped me!
I also recommend:
https://sourcediving.com/android-recipes-the-easy-path-to-animated-icons-878bffcb0920
https://shapeshifter.design/

Vedesh Kumar (Moderator) 5 years ago
You’re Welcome, Piotr Obst.

Reply

How to use Animated Vector Drawable in your app

Leave a Comment Cancel Reply

7 comments

Message Sent!