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.0version, but any version from
23.2.0should work correctly and in a similar manner.
vector drawable file
- This is the actual thing to be animated.
vectordrawable file needs to be put in the
res/drawabledirectory in your project.
- More information on it’s contents here.
The above code represents a basic black menu (hamburger) icon:
- Those specify the way
vectordrawable parts are animated.
- There can be multiple animations for a single
vectordrawable. Each specifying animation of a different part of the
- Parts of the
vectordrawable can be referenced using
topin the example).
- The root animation object can be either
- Those files need to be put in
The following code specifies the animation of the
top_container. It modifies its four parameters
4. Create the
animated-vector drawable file
animated-vectorfile ties all things together (
vectordrawable with all the
- Needs to be put in the
res/drawabledirectory in your project.
One important thing here:
minSdkVersionis 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
Do not worry about that! If you do everything else correctly, your
AnimatedVectorDrawableCompatwill work despite this Lint warning. You can add
tools:ignore="NewApi"if you don’t wanna see it anymore.
5. Modify your build.gradle
vectorDrawables.useSupportLibrary = trueto your
androidsection of your module’s
- You need this so your
animated-vectordrawable file is compatible with APIs lower than Lollipop.
6. Set your
AnimatedVectorDrawableCompat to an ImageView or ImageButton
- You can add it in
- 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
AnimatedVectorDrawableCompatthrough 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:
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…