jonbhanson
Implement Lottie or GIF Animation Without Any Flutter Package for Android
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.
@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
I am also seeing launcher icon first. Does anyone have a work around for this?
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: @.***>
hello @CAPJITESH , If you want to avoid a white screen or a delayed launcher icon when launching your Android app, you should use this dependency: implementation "androidx.core:core-splashscreen:1.0.0" Here’s the official documentation link to help you get started: 👉 Android Splash Screen Documentation
You can use the starter code snippet from the documentation to implement it properly.
