1. Choose your Lottie

Pick the Lottie for your Android app. You may have your own or you may want to select one from the 1000s of Lottie animations available for free on LottieFiles.

It's important to test your selected Lottie using the LottieFiles app for Android to make sure the animation you've chosen will play the same Android as sometimes not all animations are built with features supported in the Lottie Android player.

Just scan the QR code under the animation on LottieFiles with the app to preview the animation.

2. Setup your project

Getting started with Lottie is very straightforward. This guide assumes that you are using Android Studio as your IDE. If you’re using a different IDE, you can still use the same instructions.

From your project structure panel, select your projects build.gradle file and add the following lines inside your dependencies block:

def lottieVersion = "3.4.0" 
implementation "com.airbnb.android:lottie:$lottieVersion"

Replace lottieVersion with the latest available.

The latest version is:

Add LottieAnimationView to your layout

The lottie-android library provides a LottieAnimationView which will take care of rendering your animations for you. Add it to your layouts where you want to place your animations.

<com.airbnb.lottie.LottieAnimationView
     android:id="@+id/animationView"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:lottie_url="REPLACE_JSON_URL"
     app:lottie_autoPlay="true"
     app:lottie_loop="true"/>

Bundling animations with your app

If you need your animations to work offline, you can bundle your animations with your application by including them in your projects raw resources.

If your project does not have one, create it by going to File>New>Folder>Raw Resources Folder. If your animation contains images, you can bundle them all together in a .zip with your .json and follow the same procedure.

Download the animation, rename it to animation.json or animation.zip depending on your use-case, and place into your raw resources folder.

Update your layout code to use the bundled animation

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"/>

Your first Android project with Lottie animations is ready to go! All that’s left for you to do from here is to configure your project further and customize the animation behaviour. The official documentation for lottie-android provides further information on these configurations.

That's how you get started but there's so much more you can do. For more tips on how to use Lottie with your projects, check out our blogs on working with Lottie animations.