Using Lottie on Android to display dynamic animations in your apps

Introduction

There’s a saying that goes like this: A picture is worth a thousand words, while an animation is worth a thousand pictures (which in turn means that it is worth a million words 😉)!

This is especially true in mobile applications, where effective animations can communicate to users what an app (or certain features within an app) is supposed to do. This is always a tough task, but tougher when we only rely on text or static images.

Users won’t read large chunks of explanatory text; and using onboarding screens in and of themselves has limited success, as users tend to skip it altogether!

So to effectively communicate what your app (or a feature in your app) is supposed to do, animations often come across as a viable alternative.

Not only do animations take up less space, but it’s also intuitive in terms of what the user has to do in order to execute the task successfully.

To see how effective this is, think back and consider how many times you yourself resorted to a video tutorial about something you wanted to do vs reading a user manual about it.

Here’s an example of what I’m talking about:

If an app has this animation, you’ll instinctively know that the app is performing an upload action onto the cloud, even when the developer hasn’t explicitly mentioned it using text.

Such is the power of using animations in your app—you can convey more with less, provided that you do it correctly and don’t overstuff everything with animations).

The state of animations in Android

While animations are everyone’s darling, displaying them in Android was and in many ways still is a pain. Upon getting the assets from your designer, likely made in Adobe AfterEffects, it’s a painstaking task to code these entire graphics (or so-called Views) in Java/Kotlin with custom views. A simple animation like the one above can take a few days for an average Android developer to code and implement from scratch.

Enter Lottie

Lottie essentially changes the game here, as you can directly take the assets provided by your designer and display them in your app. The same animation displayed above can be integrated into your app in less than 5 minutes with Lottie!

Lottie is an open-sourced library introduced by AirBnb in 2017. Since then, it’s only been improved upon, adding support for additional features and platforms, a marketplace of animations, and much more.

Using Lottie

For the scope of this blog, we’ll be discussing adding Lottie to an Android app—but using it on iOS, Web, or with React Native isn’t any more difficult in most cases, and you can find some good examples on how to go about it in the official GitHub repos for said platforms.

Step 1: Finding an animation file to display in your app

The first step is to find an animation file fit for your use case. If you have an in-house designer and a known use case for adding an animation to your app, this step won’t be hard.

But if you are an indie developer and want to add animations (i.e. for a loading or splash screen) to your app, it’s much harder to get ahold of a designer to do it for you.

For those of you in this category, you can head over to LottieFiles, which is a marketplace for animations compatible with Lottie that contains both free and paid animations for a wide variety of use cases.

Simply searching for a “loading” animation, brings up the following results :

Once you’ve found your animation, simply download the .json file and save it to the res/raw folder of your app.

Step 2: Adding Lottie Dependency

This is a simple one, add the dependency to your app’s build.gradle file and sync the changes once they’re done.

dependencies {
  // Replace lottieVersion with the latest version available
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

Step 3: Adding LottieAnimationView to your layout xml file

Simply add the LottieAnimationView like any other layout element to your xml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:scaleType="centerCrop"
        android:layout_weight="4"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/loading" />

    <TextView
        android:id="@+id/tvStatus"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Processing : 1 out of 25"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Headline3"
        android:textSize="32sp"
        android:textStyle="bold" />

</LinearLayout>

Over here, I’ve added my LottieAnimationView to a vertical LinearLayout. You can also modify other parameters for the view, like autoPlay, loop, speed, scale, progress, etc. to affect how the animation looks and behaves.

Lastly, don’t forget to let the view know which animation it has to display by adding app:lottie_rawRes=”@raw/your_animation_file_name”

(Optional) Step 4: Control the animation from Java/Kotlin code

It’s possible that you might want to control the animation from Java or Kotlin code to configure when the animation starts, when it ends, how fast it should move, whether it should loop or not, etc.

To do this, you can access the LottieAnimationView in your Java/Kotlin code and call the available methods on it.

Here’s how this can be done :

fun setupAnimation(){
    val animation = findViewById<LottieAnimationView>(R.id.progressBar)
    animation.speed = 2.0F // How fast does the animation play
    animation.progress = 50F // Starts the animation from 50% of the beginning 
    animation.addAnimatorUpdateListener { 
        // Called everytime the frame of the animation changes
    }
    animation.repeatMode = LottieDrawable.RESTART // Restarts the animation (you can choose to reverse it as well)
    animation.cancelAnimation() // Cancels the animation
}

You can find all the available methods that you can call on the view, here :

And that’s it!

You can now start the app, and you’ll see that sweet animation being played in your app 😄

Here’s how I used Lottie in an app of mine, which I submitted for the AndroidDevChallenge!

You can learn more about this app at the GitHub repository here :

Feel free to star it to show your support for the app!

Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others find it! Feel free to leave a comment 💬 below.

Have feedback? Let’s connect on Twitter.

Avatar photo

Fritz

Our team has been at the forefront of Artificial Intelligence and Machine Learning research for more than 15 years and we're using our collective intelligence to help others learn, understand and grow using these new technologies in ethical and sustainable ways.

Comments 0 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

wix banner square