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.

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.

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)

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)

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.

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.

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

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