Bodymovin to Android

Nick Butcher
Aug 4, 2017 · 2 min read

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 . I came away wanting the best of both worlds… Lottie’s tight integration with Adobe AfterEffects and '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 s! 🙌 🎉 🥂🍾🎈 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
  2. Select the composition to export and open its
  3. Select the option.
  4. Choose a destination folder and hit
  5. In the output folder, along with the standard Bodymovin export, you’ll find a new file – this is the (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: 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 s 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.

Google Design

Stories by Googlers on the people, product, and practice of UX at Google

Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

Nick Butcher

Written by

Android designer + developer @ Google

Google Design

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google