Android Lottie Animation on Splash Screen Using Kotlin

Step-by-step guide through which you’ll learn to use Lottie Animation in Android Projects.

What is Lottie Animation?

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

Lottie animations are free to use vector animation file.Many popular apps such as Uber, Netflix, Google, Airbnb, Shopify use this library.

Now, how do we use this library in android app?

1. Creating New Project

For this tutorial, we are starting with an entirely new project to show you how you can add the animation. If you already have a project you are working on, skip ahead to the next step Getting Lottie Animation.

Step 1: Run Android Studio

Step 2: Click on “Create New Project”

Step 3: Select Empty Activity and click on “Next.”

Step 4: Give a name to this project; here, we are naming it as “Todo” and Click on “Finish”

2.Adding lottie Dependencies (build.gradle)

To have a smooth running animation in our Android project, we need to set up dependencies first. It is crucial to set it up correctly to be able to continue on the next step.

Gradle is the only supported build configuration, so just add the dependency to app/build.gradle file –

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

Click on Sync Now button shown at top-right corner of Android Studio IDE.

3. Download Lottie Animation File

Now, we need to download animation files we want to use in our project. They are present in various formats — JSON, ZIP or GIF formats etc. In this article, we will be using json format. So, We will download json file.

Follow steps below to download lottie animation file –

• Go to official website for animation files. Screen like below will be shown –

• Now, browse and select any file of your choice. In this article, we want to show task. So, we have searched for task text and selected below task–

• Click on any animation to see it’s detail. After clicking on above ui, ui like below is shown as popup. –

• Note: You can explore various options shown in this window. For example, change speed of animation, background change etc.
• Click on Download link. It opens dropdown like below –

• We want to use Lottie as JSON file. So, click on Lottie JSON to download json file.
• Now, create raw folder, if not created, in src/main/res folder.
• Then, move downloaded json file, renamed as splashanim.json, in src/main/res/raw folder. Folder structure will be like –

4. Using Lottie Animation in XML file

Now when we have our Lottie animation in it, the last thing we need to do is insert program statements and edit attributes based on our requirements.

Step 1: Go to app > java > first package name > right-click > New > Activity > Empty Activity and create another activity and named it as SplashScreen. Edit the activity_splash_screen.xml file and copy paste below code in it –

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".SplashScreenActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/ltAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_rawRes="@raw/splashanim"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Here,

• app:lottie_autoPlay=””: Sets if youwant to auto play animation or not. Default value is false.
• app:lottie_loop=””: Sets if youwant to run animation only one time or infinitely. Default value is false.
• app:lottie_rawRes=””: Reference to resource file where json file is stored. You have stored it in main/res/raw folder. Similarly, you can use other attributes of lottie animation to customise it as per your need.

Step-2: Go to the SplashScreen.kt file, and refer to the following code. Below is the code for the SplashScreen.kt file.

import android.content.Intent
import android.os.Bundle
import android.os.Handler
import androidx.appcompat.app.AppCompatActivity
class SplashScreenActivity : AppCompatActivity() {

    companion object {
        const val ANIMATION_TIME: Long = 4000  //in milliseconds
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash_screen)

        Handler(this.mainLooper).postDelayed({
            startActivity(Intent(this, MainActivity::class.java))
            finish()

        }, ANIMATION_TIME)
    }
}

Step 3: Working with the AndroidManifest.xml file

Go to the AndroidManifest.xml file and add the following code in the Splash Screen Activity , add <intent-filter> inside the Splash Screen Activity to make this activity as the starting activity. So whenever the app will execute the user can see the splash screen at the beginning. Below is the complete code for the AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.Todo"
        tools:targetApi="31">
        <activity
            android:name=".SplashScreenActivity"
            android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

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

        </activity>
    </application>

Now, “Build” the application and Install the App on your device. If you have followed the instructions correctly, your application should be running smoothly without any errors.

Great job!

And that’s how you implement Lottie Animation in your Android Project. Feel free to play around and modify the animation by changing its attributes.