Lottie and Compose: Integrating Airbnb’s Animation library with the modern declarative Android UI

Lottie is a library and file format created by Airbnb that aims to simplify high-quality animation additions in apps. With this API and its files, it is possible to render Adobe After Effects-created animations native and in real-time using JSON-structured files. Although it is available on iOS, Web, and Windows too, this article will concentrate on the Android implementation using the Jetpack Compose.

First, we will divide this implementation into two parts:

• Configuration of the library in the project
• Downloading an example Lottie file and using it with the composable components provided by the library

And I will explain a little bit about animation’s content scale.

Configuring the library

To configure the Lottie in the project, we have to add the implementation ‘com.airbnb.android:lottie-compose:6.0.0’, in the Gradle module at the project level.

And also, you need to add the custom repository URL of the API in the settings.gradle:

After this, you should have access to the Lottie components. Now, we should go ahead and download our example animation.

Downloading the file and using it in the project

We are going to use a Pokeball animation that executes a simple spin. We can find it in this link. Then, we can download the Lottie JSON file.

Image of LottiesFile website

In our Android Studio project, we need to create a new “Android Resource Directory” of resource type ‘Raw’, and then we can paste our downloaded file into this directory.

Image from Android Studio

Now, we will work on some code using some components provided by Lottie. Observe the following code:

This code snippet implements the following Lottie Compose functions:

1. rememberLottieComposition: This is a function from the Lottie library that allows you to create a Lottie composition object to be used in the animation. It takes a LottieCompositionSpec parameter to specify the source of the Lottie file. In this case, the RawRes strategy is used which means the Lottie file is stored as a raw resource with the given ID (R.raw.pokeball_loading_animation).
2. animateLottieCompositionAsState: This is another function from the Lottie library that creates a state object for the animation. The state object (animationAction) will hold the current progress of the animation and update it based on the provided animation parameters. In this case, the animation is set to loop forever with the LottieConstants.IterateForever value.
3. LottieAnimation: The composable function from the Lottie library to display the actual animation on the screen. It takes a Lottie composition (animationLottie), a progress lambda function animationAction, and a modifier to change the appearance or behavior of the UI element. In this case, the Modifier.fillMaxSize() is used, so the Lottie animation will fill the entire available space on the screen.

And by now, if you run your code you should be able to see the animation running in a loop.

Scaling Content with Lottie

There may be situations where you need to adjust the scale of animation to stretch to the full dimensions of your application’s screen. This is where the composable’s ContentScale parameter proves to be essential. By default, Lottie uses ContentScale.Fit, but you have the flexibility to modify this to meet your specific needs. Let’s take a look at the code that enables us to adjust LottieAnimation to fill the screen’s bounds:

And after that, the animation might look something like this:

In conclusion, Lottie is an impressive partner to Jetpack Compose in creating lively and appealing applications. Its flexibility allows developers to implement amazing animations and easily adapt them to the screen. The strength of Lottie lies in its simplicity, transforming the way animations are incorporated into the product. With it, developers can effortlessly tap into many opportunities to make their apps more dynamic and interactive.

Gabriel Bizarria