Implement Lottie or GIF Animation Without Any Flutter Package for Android

[AliAkrem]

Alternative Way to Implement Lottie or GIF Animation Without Any Flutter Package for Android

(Retain this section for users who may need a solution)

---

This guide explains how to add Lottie or GIF animations to your Android app without using any Flutter package. It demonstrates setting up animations directly in Android by configuring the assets folder, adding dependencies, and creating custom splash screens.

Step 1: Add Your Animation to the Assets Folder

Ensure that you have an /assets folder at android/app/src/main/assets. If it doesn’t exist, create it. Place your animation file (.json for Lottie) in this folder, or place your .gif file in android/app/src/main/res/raw.

Step 2: Add Required Dependencies

In your project’s build.gradle file, add the following dependencies:

dependencies {
    implementation 'com.airbnb.android:lottie:6.5.2' // For Lottie animation 
    implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.25' // For GIF animation
    implementation 'androidx.appcompat:appcompat:1.4.1' // Required for backward compatibility
}

Step 3: Create the Splash Screen Layout

Next, create a splash_screen.xml file inside res/layout/. This file will define the layout for your splash screen, depending on whether you’re using Lottie or GIF animation.

For Lottie Animation:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottieAnimationView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:lottie_fileName="splash_animation.json"
        app:lottie_autoPlay="true"
        app:lottie_loop="false" />
</RelativeLayout>

Check out the official Lottie Android Documentation for more customization options.

For GIF Animation:

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

    <pl.droidsonroids.gif.GifImageView
        android:id="@+id/gifImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@raw/splash_animation" />
</RelativeLayout>

Step 4: Create SplashActivity

Now, create a new SplashActivity to display the splash screen.

For Lottie Animation:

package com.example.app

import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.airbnb.lottie.LottieAnimationView

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.splash_screen)

        val lottieView = findViewById<LottieAnimationView>(R.id.lottieAnimationView)

        lottieView.addAnimatorListener(object : android.animation.Animator.AnimatorListener {
            override fun onAnimationStart(animation: android.animation.Animator) {}
            override fun onAnimationEnd(animation: android.animation.Animator) {
                startActivity(Intent(this@SplashActivity, MainActivity::class.java))
                finish()
            }
            override fun onAnimationCancel(animation: android.animation.Animator) {}
            override fun onAnimationRepeat(animation: android.animation.Animator) {}
        })
    }
}

For GIF Animation:

package com.example.app

import android.content.Intent
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import androidx.appcompat.app.AppCompatActivity

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.splash_screen)

        // Delay to match the GIF animation duration
        Handler(Looper.getMainLooper()).postDelayed({
            startActivity(Intent(this, MainActivity::class.java))
            finish()
        }, 3000) // Adjust this delay to your GIF length
    }
}

Step 5: Set SplashActivity as the Launcher Activity

To ensure the splash screen is shown first when the app launches, configure AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="YourAppName"
        android:icon="@mipmap/ic_launcher"
        android:name="${applicationName}">

        <activity
            android:name=".SplashActivity"
            android:theme="@style/Theme.AppCompat.NoActionBar"
            android:exported="true">

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

            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />
        </activity>

        <activity
            android:name=".MainActivity"
            android:theme="@style/LaunchTheme"
            android:exported="true"
            android:launchMode="singleTop"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">

            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />
        </activity>

        <meta-data android:name="flutterEmbedding" android:value="2" />
    </application>
</manifest>

now build your app.

[jeremiahseun]

One of the best issues I have read in a long time. Thanks @AliAkrem

[fatihdurmaz]

Thank you @AliAkrem

[CAPJITESH]

@AliAkrem Thanks allot for the tutorial of gif in splash screen

I added all files and I am seeing my splash animation... But before animation starts i am seeing my launcher icon in splash screen I tried allot to remove it, but it's still showing

[paulfrankallan]

I am also seeing launcher icon first. Does anyone have a work around for this?

[CAPJITESH]

Hello, I found a way around it works in all androids except Android 11 for some reason.. I will send you code changes what i did

Also if you publish the code directly from that PR, App will crash on older android 11 and 10.I know this as ilI published my app on Play Store

On Thu, 14 Nov 2024, 5:23 am Paul Frank Allan, @.***> wrote:

I am also seeing launcher icon first. Does anyone have a work around for this?

— Reply to this email directly, view it on GitHub https://github.com/jonbhanson/flutter_native_splash/issues/734#issuecomment-2475059493, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6HWNWRXH7JWLHF4PZ5ZRQT2APQ7VAVCNFSM6AAAAABOUPSEI2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZVGA2TSNBZGM . You are receiving this because you commented.Message ID: @.***>