Implement Lottie or GIF Animation Without Any Flutter Package for Android #734
Description
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>