I’ve previously taken a look at using AirbnbEng’s Lottie to create vector animations on Android:

While Lottie offers a ton of power, it misses out on a lot of the performance benefits of Android’s native vector animation format AnimatedVectorDrawable. I came away wanting the best of both worlds… Lottie’s tight integration with Adobe AfterEffects and AnimatedVectorDrawable‘s performance characteristics. Well it seems that my dreams have come true:

Bodymovin (the AfterEffect’s plugin Lottie also uses) version 4.10 brings direct support for exporting AE compositions as Android AnimatedVectorDrawables! 🙌 🎉 🥂🍾🎈 A huge thanks to Hernan Torrisi for adding this!

Here’s how it works:

1. In AfterEffects, select Window → Extensions → Bodymovin
2. Select the composition to export and open its Settings
3. Select the AVD option.
4. Choose a destination folder and hit Render
5. In the output folder, along with the standard data.json Bodymovin export, you’ll find a new data.xml file – this is the AnimatedVectorDrawable (using the inline resource format)
6. Drop this file into your Android project

Note: I’ve had some issues using the Android Studio 3.0 Alphas (seems to be an issue with aapt2; I’m filing bugs) but it’s working fine on stable.

Get movin’

I’m excited to see what people build with this new tool. It really does seem to combine the best of both worlds: using a rich, powerful industry-standard editor to create great motion design, and then running it in the platform’s native format. There’s definitely still a place for Lottie (see the benefits described in the other article) but for animations better suited to AnimatedVectorDrawables you now have access to great tooling.

Are you using Bodymovin to create vector animations in your apps? I’d love to hear how you got on in the comments.