Bodymovin to Android

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

A Lottie to Like

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:

A demo of converting an AfterEffects composition to an AnimatedVectorDrawable

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

N̶o̶t̶e̶:̶ ̶I̶’̶v̶e̶ ̶h̶a̶d̶ ̶s̶o̶m̶e̶ ̶i̶s̶s̶u̶e̶s̶ ̶u̶s̶i̶n̶g̶ ̶t̶h̶e̶ ̶A̶n̶d̶r̶o̶i̶d̶ ̶S̶t̶u̶d̶i̶o̶ ̶3̶.̶0̶ ̶A̶l̶p̶h̶a̶s̶ ̶(̶s̶e̶e̶m̶s̶ ̶t̶o̶ ̶b̶e̶ ̶a̶n̶ ̶i̶s̶s̶u̶e̶ ̶w̶i̶t̶h̶ ̶a̶a̶p̶t̶2̶;̶ ̶I̶’̶m̶ ̶f̶i̶l̶i̶n̶g̶ ̶b̶u̶g̶s̶)̶ ̶b̶u̶t̶ ̶i̶t̶’̶s̶ ̶w̶o̶r̶k̶i̶n̶g̶ ̶f̶i̶n̶e̶ ̶o̶n̶ ̶s̶t̶a̶b̶l̶e̶.̶

Update: buildToolsVersion 27.0.1 fixes issues with nested inline resources 🙌

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.