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.

. . .

Leave a Comment

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


  • Shubham Agarwal
    really Cool stuff.
    • Vedesh Kumar
      Thanks for the appreciation.
  • yuvraj
    Greate work yaar ..This is what I was looking for
    • Vedesh Kumar (Moderator)
      I am glad that the blog helped you, Yuvraj.
  • Piotr Obst
  • Piotr Obst
    • Vedesh Kumar (Moderator)
      You’re Welcome, Piotr Obst.
  • css.php

    It was a successful collaboration. The Mobikul team provided the client everything they needed in a timely and high-quality manner. They were very professional, reliable, and accessible during the entire process. The client also saw no room for any improvements in the vendor's performance.

    Vincenzo Carrano

    Vincenzo Carrano

    Administrator, Segshop

    Talk to Sales


    Live Chat
    Start a Project

      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home