Getting Started with Lottie Animations (Android)

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

You can create your own animations using Adobe After Effects, or feel free to use the ones uploaded by other users on https://lottiefiles.com/
For this tutorial, we will be using one of the already uploaded animations. Without further ado, let’s get started ;)

Select an Animation

1. Go to https://lottiefiles.com/ and select any animation of your choice. For this example, I’m going to choose 3 different animations:-
   https://lottiefiles.com/3269-thumbup,
   https://lottiefiles.com/434-gradient-animated-background, and
   https://lottiefiles.com/440-stop-go-radio-button
2. Download the animations and rename them. For example, the ones used here were renamed to “thumb_up.json”, “gradient_bg.json” and “toggle_switch.json” respectively.

Fire up Android Studio

1. Create a new project.

2. Select Empty Activity.

3. Name your application. In this example, I’ve decided to go with LottiePlayground. Please ensure that the “Use AndroidX artifacts” feature has been enabled. Click on Finish.

4. Once the project is completely loaded, go to app-level Gradle file and under dependencies, add

implementation ‘com.airbnb.android:lottie:$lottieVersion’

At the time of writing the latest version of Lottie is ‘3.5.0’.

5. Sync the project Gradle files.

6. Create a folder “assets” under app > src > main and paste the downloaded animations in it.

Get. Set. CODE!!

1. Modify your colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#0088ff</color>
    <color name="colorPrimaryDark">#005ccb</color>
    <color name="colorAccent">#0c0e59</color>
</resources>

2. Modify your styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#0088ff</item>
        <item name="colorPrimaryDark">#005ccb</item>
        <item name="colorAccent">#0c0e59</item>
    </style>

</resources>

3. Modify your AndroidManifest.xml:

<activity
    android:name=".MainActivity"
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

4. Write the following code in activity_main.xml:

5. Write the following code in MainActivity.java:

Well, that’s pretty much it. Hit that ‘Run app’ button, then sit back while the code compiles and the APK installs on your device.

This is how our final app will look like.

For the complete project files, visit:

ssindher11/LottiePlayground

To know more on how to use Lottie, visit:

Android · Lottie

Thank You for reading :) I would love to discuss and solve any of your queries.