Lottie animations in Android

In today's world, apps are expected to bring users some joy when interacting with them. Although not every app has the privilege of having visual elements flying around on your screen, there is plenty of leeway for some creative moments. The difficult part comes when we want to include complex animations, particularly graphic animations.

Enter Lottie

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.

There are open-source libraries for several technologies that allow us to play these Lottie animations with minimal effort. Thanks to the folks at Airbnb for that!

Pick your poison

The first step is to decide which animation to use. There are several options available at LottieFiles, both free and paid.

It's important to test the chosen animation using the LottieFiles app to make sure the animation plays well on Android. Sometimes not all animations are built with features supported by the player.

You can also create your custom animation with Adobe After Effects. These can be exported with Bodymovin into a JSON file that you can consume with the Lottie library. Alternatively, you can use the LottieFiles Adobe AE plugin.

Adding Lottie to the app

As mentioned above, there are several open-source libraries to play Lottie animations. The Android library can be found here.

Include the dependency in your app's build.gradle.

dependencies {
    implementation 'com.airbnb.android:lottie:$lottieVersion'
}

The latest Lottie version is:

Bundling the Lottie file

While there are several approaches to loading the animation, including remotely, we prefer to include it in the app's raw resources (src/main/res/raw).

Rendering the animation

Diving into the real challenge, rendering the animation in an Android view. Just use the LottieAnimationView! 🤯

Thanks to the Airbnb library, it's as easy as including a typical ImageView.

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="256dp"
    android:layout_height="256dp"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:lottie_rawRes="@raw/animation" />

There are several attributes we can leverage to configure the view directly from the XML. In the example above, the animation will loop indefinitely and start animating after being loaded.

Conclusion

Lottie files combined with the ultra-simple library makes complex animations a breeze. Give it a try! You can find additional information about the library in its documentation.

As always, we hope you liked this article and if you have anything to add, we are available via our Support Channel.