Flutter:Create Animated Splash Screen using Android 12 API (only for Android)

Hi guys, As we all are aware that Google is releasing a lot of useful libraries.
Google has released beta version of Splash Screen Library for Android 12 or higher.

For more info click here:

https://developer.android.com/guide/topics/ui/splash-screen

But sadly There is no package available for flutter that enable Animated splash screen Natively in android.

Lets Start....

• First Create new flutter project or you can continue in existing Project.

• Open Android Folder and go to android/app/src/main/res/drawable/launch_background.xml and Click on "open for editing in android studio".

Note: Android studio preferred for View drawable contents or you can also vs code but you won't be able to view drawables.

• Now open Build.gradle(Module:android.app) file add following lines

dependencies {
..............
    implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.4'
.............
}

• Now create a new file in /values/splash.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@android:color/background_dark</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/animator</item>
        <item name="android:windowSplashScreenBrandingImage">@drawable/branding_centered</item>
        <item name="postSplashScreenTheme">@style/LaunchTheme</item>
        <item name="windowSplashScreenAnimationDuration">2147483647</item>
    </style>
</resources>

Do not worry about errors,first lets understand what is the meaning of these lines.

• style name="Theme.App.Starting" : is name of theme and it will be use in app and called as soon as app starts.
• item name="windowSplashScreenBackground": to fill the background with a specific single color
• item name="windowSplashScreenAnimatedIcon": to show animated vector or some drawable on screen.
• item name="android:windowSplashScreenBrandingImage": to show branding image. Note this is only available for android api -V31 or higher.

• item name="postSplashScreenTheme": After splash Theme which theme should be called that specify it. We will use flutter LaunchTheme

• item name="windowSplashScreenAnimationDuration":Specify Duration of animation.

In this tutorial i gonna use simple animation list animation that's mean it will show some images in sequences with specified duration for an image.

You can download image from here:

• add these two image in drawable using resource manager.

• Create a new file animator.xml in drawable folder and following lines of codes.
  

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"
    >
    <item android:drawable="@drawable/android_12" android:duration="600" />
    <item android:drawable="@drawable/googlelogo" android:duration="600" />
</animation-list>

• Now create a branding images,create a new file in drawable named *"ic_android_black_24dp.xml" *(of course you can change as you want) and following lines

<vector android:height="50dp" android:tint="#4184C5"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="50dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
   <group
       android:name="BrandingGroup"
       android:pivotX="16"
       android:pivotY="16.5"
       android:scaleY="1"
       android:scaleX="1">
       <path android:fillColor="#FF000000"
           android:pathData="M17.6,11.48 L19.44,8.3a0.63,0.63 0,0 0,-1.09 -0.63l-1.88,3.24a11.43,11.43 0,0 0,-8.94 0L5.65,7.67a0.63,0.63 0,0 0,-1.09 0.63L6.4,11.48A10.81,10.81 0,0 0,1 20L23,20A10.81,10.81 0,0 0,17.6 11.48ZM7,17.25A1.25,1.25 0,1 1,8.25 16,1.25 1.25,0 0,1 7,17.25ZM17,17.25A1.25,1.25 0,1 1,18.25 16,1.25 1.25,0 0,1 17,17.25Z"/>
   </group>
</vector>

• Now we need to center branding image so create a new file in drawable named "branding_centered.xml" and add following code

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_android_black_24dp"

        android:gravity="center" />
</layer-list>

• Now Lets edit AndroidManifest.xml and change android:theme to android:theme="@style/Theme.App.Starting".

<activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
          android:theme="@style/Theme.App.Starting"
  </activity>

• open** MainActiviy.kt** file and add following lines

 private var keepSplashOnScreen = true
    private val delay by lazy { 10000L }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Handle the splash screen transition.
        val splashScreen = installSplashScreen()
        splashScreen.setKeepOnScreenCondition   { keepSplashOnScreen }
        Handler(Looper.getMainLooper()).postDelayed({keepSplashOnScreen=false},delay)

    }

In this code first we are during duration,how long we want to keep splash screen (in ms).

setKeepOnScreenCondition(), hold splash screen and after post delayed Splash Screen will be removed.

Note:Splash Screen will be not be visible if app runs automatically after build, if you face this just terminate the app and re-run the app manually.

And Finally Output

You can make your own Animated vector for custom animation like YouTube,gmail etc.

More info about custom animated vector go through this:
https://medium.com/mobile-app-development-publication/create-your-own-animated-vector-drawable-on-android-app-3f8fa9bb08c3

If you facing some issue then you can refer to my GitHub repository
https://github.com/Djsmk123/fluterAndroid12splashScreen/