From File to Fetch

Mastering Lottie Animation Sources in Jetpack Compose

Lottie logo animation from https://lottie.airbnb.tech/#/

Note: I am not affiliated with Airbnb or their Lottie development. I have recently just been implementing it in an app and wanted to share some examples to support the official documentation.

Getting to know Lottie

Now, I have written about animations before and talked on the subject, and how I wanted to create native animations. Sometimes though, we want something more artistic and don’t need to move composable elements on the screen; instead, a pre-built animation is called for.

Enter Lottie.

If you have not used Lottie before, it is a library from the developers at Airbnb that parses Adobe After Effects animations and exports them as Json. The idea is that a designer can create a complex animation and it does not need to be rendered natively by hand. There are many plugins for design tools to help create animations such as Figma and if you have a bit of design talent (I do not!) it is easy to get started.

Lottie has been around for a while and can be rendered on multiple platforms such as iOS, Web, Windows and of course Android. It is available to use with XML Views, but what I am going to focus on today is integration with Jetpack Compose.

The official documentation is here but it doesn’t give a detailed look at how we can use the multiple different source types in LottieCompositionSpec to provide our Lottie file in the most convenient way. Indeed, some apps may require multiple source types to be handled, especially if a specific animation may be specified by a backend call.

We’ll step through each type, but first, let’s get a basic set up by using a string to hold our Lottie animation data.

String Source

First thing with any SDK is adding the dependency:

[embed]

Then, in a Composable we need to create the LottieCompositionSpec, for a Json string, we can use LottieCompositionSpec.JsonString(val jsonString: String) and pass in the string. Then, remember the composition state using rememberLottieComposition and passing in the spec. This can then be passed into LottieAnimation to show the animation.

[embed]

Lottie animation from https://github.com/airbnb/lottie-android

Now, storing an animation in a string is not the most readable or sustainable way, a better option is to use a Lottie Json file. One option is to store it in the assets directory…

Asset File

We can store the Lottie file as a .json or .lottie file (they are the same thing — just a different extension) in the app/assets directory.

The only difference here is we need to use the LottieCompositionSpec.Asset(val assetName: String) and pass the path within the assets directory (you can organise this how you wish).

[embed]

In a similar way we can use LottieCompositionSpec.File(val fileName: String) to load the animation file from anywhere in the device file system — just make sure that the app has been granted access to the file first!

Using an asset file means that we don’t get compile time protection to ensure the file exists, we can instead, use the res/raw directory.

Raw Resource File

Again, this is simple, after adding the file to the raw directory:

We can now get compile time safety by accessing the raw resource using R.raw with LottieCompositionSpec.RawRes.

[embed]

Finally, if we want our Lottie file to be fetched dynamically when we need it and not packaged with the app, we can load it from a url.

URL Source

Just like the above, we can use the LottieCompositionSpec.Url to load a Lottie file stored as a url:

[embed]

Now, this is good if everything goes to plan and the user has a good internet connection, but we need to make sure we handle any errors.

Responding to Errors & Adding a Loading State

It may take some time for the animation to load as well, especially if it is large or the user is on a poor internet connection. For this we can use the LottieCompositionResult to detect the state of the animation.

LottieCompositionResult.isLoading will be true while the animation is downloading or being parsed, LottieCompositionResult.isSuccess will be true when the parsing is successful and the composition is ready to be shown. We have two more states, LottieCompositionResult.isComplete which will be true once isLoading is false (whether the composition is successful or not) and finally LottieCompositionResult.isFailure when there is an unrecoverable error (when the onRetry lambda discussed below returns false)

To show standard loading, error and success behaviours we can use isLoading and isSuccess like so:

[embed]

Retry an Animation Load Error

Lottie provides an easy to use way of retrying the animation load using onRetry in rememberLottieComposition. We can use it in two ways:

Retry repeatedly until we reach a certain limit

When constructing the rememberLottieComposition we can specify the onRetry lambda and return true to continue to retry and false to stop. onRetry includes a failCount parameter. This allows a limit or an exponential backoff to be applied. For example:

[embed]

Here I have set the animation to retry 5 times before stopping. You can add error messaging or anything else useful in this lambda (but use the LottieCompositionResult.isLoading boolean described above to show a loading behaviour rather than setting another variable here.

Await a Retry Signal

We can also allow the animation to await retrying until a certain external condition has changed, such as the press of a button or regaining internet access.

For this we use rememberLottieRetrySignal.

[embed]

In this simple contrived example, I have set the url to be an invalid url, then in onRetry when the error occurs we can use the remembered retrySignal to await the retry using retrySignal.awaitRetry(). The animation will stay in loading state until the retrySignal.retry() is called on the button click. If you don’t want the loading state and instead want to just show an error until it is retried you can just can just omit retrySignal entirely and update the remembered url state and the LottieCompositionSpec will recompose.

Animation Configuration

Finally, once we have the animation loading correctly there are a few other configuration items we can use to make the animation looking it’s best.

While it is probably best to control these animation behaviours from the Lottie file itself (done when creating it), you can tweak the way the animation plays from the LottieAnimation composable itself. To see what is available, it is best to look at some of the available arguments:

[embed]An excerpt from version 6.6.6 of the SDK

Here we can control:

• clipSpec: which frames of the animation play
• speed: the animation speed
• iterations: number of times to run the animation (use LottieConstants.IterateForever to repeat forever)
• reverseOnRepeat: play backwards after repeating
• alignment & contentScale: just like images we can adjust how the animation is laid out within the supplied bounds.

Now you can see all the ways we can use Lottie, be sure to choose the best option for the app you are working on and the most convenient way of getting the files from your design team without having to go to the effort of converting between one file format and another.

Bye for now!

You can find the above demo code in the jc-lottie module of my Github repository.

[embed]Experiments/jc-lottie at main · KatieBarnett/Experiments Android development experiments and demos. Contribute to KatieBarnett/Experiments development by creating an account on…github.com