Skip to content

Instantly share code, notes, and snippets.

@nickbutcher
Last active December 31, 2021 01:03
Show Gist options
  • Star 54 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save nickbutcher/53e5d0f8cbd9e0b5b7687c9e8cb6e8b1 to your computer and use it in GitHub Desktop.
Save nickbutcher/53e5d0f8cbd9e0b5b7687c9e8cb6e8b1 to your computer and use it in GitHub Desktop.
An example of the Android xml bundle format for creating an AnimatedVectorDrawable. See https://plus.google.com/+NickButcher/posts/A8KKxnJdg4r
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2016 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:name="root"
android:strokeWidth="2"
android:strokeLineCap="square"
android:strokeColor="?android:colorControlNormal"
android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
</vector>
</aapt:attr>
<target android:name="root">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
android:duration="300"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:valueType="pathType" />
</aapt:attr>
</target>
</animated-vector>
@nickbutcher
Copy link
Author

nickbutcher commented May 31, 2016

This gist is an example of the new Android XML bundle format which lets you create more succinct AnimatedVectorDrawables.

Previously to create an AnimatedVectorDrawable you would need at least 3 xml files to specify it:

  1. A VectorDrawable you're going to animate.
  2. One or many Animators to run.
  3. An animated-vector definition, essentially tying the drawable and animator(s) together.

The new bundle format lets you specify this in a single file. Notice the aapt namespace and usage; at build time, aapt will create the separate resources for you (1 & 2 in the list above) and reference them in the animated-vector. This requires Build Tools 24+ (currently in RC) but the output is backward compatible.

@gaara87
Copy link

gaara87 commented Aug 2, 2016

After a bunch of trial and error, the only time Animated Vector Drawables seem to work is if I use android:src on the ImageView and not app:srcCompat But there seems to be a huge difference in the rendering. The latter actually looks like a vector while the former looks like a very low res image.

As another form of trial I added
static { AppCompatDelegate.setCompatVectorFromResourcesEnabled(true); }
and it still didint make a difference

How do I achieve high res animated vector?

@nilsi
Copy link

nilsi commented Oct 4, 2016

Wow, this is great! I first didn't get it to work because I did not upgrade my Build Tools to 24+. After reading the post again I see that Nick already mentioned it. Thanks.

@nycodes9
Copy link

I'm still getting a "Attribute missing on Android namespace" for line Line 22 which if I resolve compounds to error at the line in the beginning - 1. requires api 21 2. animated-vector doen't have required attribute android:drawable
AS 2.2.2
Build tool 25.0.0
Gradle Plugin 2.2.2

@seanjfarrell
Copy link

Getting the same problem as nycodes9. Anyone find a solution to this?

@udev
Copy link

udev commented Feb 23, 2017

Found a decent example of how to get this working: https://blog.stylingandroid.com/animatedvectordrawable-bundles/

There were some missing attributes in the provided example above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment