How to show Lottie animation in Splash Screen of Android?

In Android development, displaying Lottie animations in the Splash Screen can be achieved through several steps.

Step 1: Add Dependencies

First, add the Lottie dependency to your project's build.gradle file. Open the build.gradle(Module: app) file and include the following dependency:

gradle
dependencies {
    implementation 'com.airbnb.android:lottie:3.4.0'
}

Step 2: Prepare Animation Files

Lottie uses JSON-formatted animation files. You can download suitable animations from websites like LottieFiles or create your own using design software such as Adobe After Effects with the Bodymovin plugin, then export them as JSON files. Place the downloaded JSON files in the res/raw directory.

Step 3: Create Splash Screen Layout

Create a new layout file, for example activity_splash.xml, and add a LottieAnimationView to it:

xml
<RelativeLayout 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"
    tools:context=".SplashActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottieAnimationView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/your_animation" />
</RelativeLayout>

Within this layout, the app:lottie_rawRes attribute of LottieAnimationView is set to reference the animation JSON file located in the raw directory.

Step 4: Configure Splash Activity

Create a new Activity, such as SplashActivity.java, and set its content view to the newly created layout file. Implement the logic for automatic navigation to the main interface within this Activity, for example, using Handler to achieve a delayed transition:

java
public class SplashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent(SplashActivity.this, MainActivity.class);
                startActivity(intent);
                finish();
            }
        }, 3000);  // Delayed transition after 3 seconds
    }
}

Step 5: Configure Manifest

Set SplashActivity as the launch Activity in AndroidManifest.xml:

xml
<application
    ...
    <activity android:name=".SplashActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    ...
</application>

Step 6: Build and Test

Build and run your application. If configured correctly, you should observe the Lottie animation playing when the Splash Screen launches.

By following these steps, you can integrate a dynamic Lottie animation into your Android application's launch screen, significantly enhancing user experience.