AnimatedVectorDrawableCompat

A simple step-by-step solution to actually make it work.

(source: https://dribbble.com/shots/1618281-Material-Design-Animation)

Although the AnimatedVectorDrawableCompat has been available for quite some time now (since February 2016 — Support Library 23.2.0), Google still haven’t managed to provide a straightforward guide on how you should use it. You can find bits of information here and there, but nothing solid. Nothing containing all the needed knowledge.

Here’s my attempt at gathering all the required information and compressing it to something you can easily digest.

This is what you need to do:

1. Add AppCompat dependency to your build.gradle

• I was using the newest (for the moment) 25.0.0 version, but any version from 23.2.0 should work correctly and in a similar manner.

2. Create vector drawable file

• This is the actual thing to be animated.
• A vector drawable file needs to be put in the res/drawable directory in your project.
• More information on it’s contents here.

The above code represents a basic black menu (hamburger) icon:

3. Create animation files

• Those specify the way vector drawable parts are animated.
• There can be multiple animations for a single vector drawable. Each specifying animation of a different part of the vector drawable.
• Parts of the vector drawable can be referenced using name tags (menu, bottom_container, bottom, stem_container, stem, top_container, top in the example).
• The root animation object can be either set or objectAnimator.
• Those files need to be put in res/anim.

The following code specifies the animation of the top_container. It modifies its four parameters translateX, translateY, scaleX and rotation:

4. Create the animated-vector drawable file

• animated-vector file ties all things together (vector drawable with all the animation files).
• Needs to be put in the res/drawable directory in your project.

One important thing here:

If your minSdkVersion is lower than 21 (and if it’s not, then I don’t really know what you’re doing considering AnimatedVectorDrawableCompat… just use a regular AnimatedVectorDrawable), Android Studio will probably raise a Lint warning in your animated-vector drawable file:

Do not worry about that! If you do everything else correctly, your AnimatedVectorDrawableCompat will work despite this Lint warning. You can add tools:ignore="NewApi" if you don’t wanna see it anymore.

5. Modify your build.gradle

• Add vectorDrawables.useSupportLibrary = true to your defaultConfig in the android section of your module’s build.gradle.
• You need this so your animated-vector drawable file is compatible with APIs lower than Lollipop.

6. Set your AnimatedVectorDrawableCompat to an ImageView or ImageButton

• You can add it in xml, using app:srcCompat:

• Or through code:

7. Start your animation when needed

• Obtain a reference to the AnimatedVectorDrawableCompat (or just to an interface it implements — Animatable). If you added your AnimatedVectorDrawableCompat through code, you can use the reference, you obtained before (and skip this point):

• Start the animation:

Good and bad news

Let’s start with the good ones:

You can simplify steps 1–3 using the new tool from Roman Nurik (currently in pre-release state, but already highly useful): AndroidIconAnimator. It can take an svg file, and spit out an animated-vector drawable file, based on the animation parameters specified by you.

The one really interesting thing here is that the returned animated-vector file uses some cool tricks provided by the aapt tool. The returned drawable file contains all the needed data for the entire animation (vector drawable and animation files are included in it). Think of it as all files from steps 1–3 merged into one animated-vector drawable file.

As for the bad news:

AnimatedVectorDrawableCompat for APIs < 21 has some major limitations:

From Chris Banes post:

There are also some limitations to what kind of things animated vectors can do when running on platforms < API 21. The following are the things which do not work currently on those platforms:

Path Morphing (PathType evaluator). This is used for morphing one path into another path.

Path Interpolation. This is used to defined a flexible interpolator (represented as a path) instead of the system defined ones like LinearInterpolator.

Move along path. This is rarely used. The geometry object can move around, along an arbitrary path.

This basically means that currently you can forget about animating pathData property of the path objects, which is a major caveat. Let’s just hope smart guys at Google can figure out a way to bring that functionality to the older platforms.

One more thing:

There seems to be a small bug with the AnimatedVectorDrawableCompat(unless it’s a feature). If you’re trying to delay the whole AnimatedVectorDrawableCompat by adding startOffset to all animations in your animated-vector, your animation won’t work at all (at least it wouldn’t work for me). It will just jump from the beginning state to the end state (with some delay). There has to be at least a single animation running from the beginning of the entire animated-vector. Watch out for that…

If you enjoyed this post, please show your support! Recommend, follow, comment. This means a lot!