Flutter:Create Animated Splash Screen using Android 12 API (only for Android)
Tags: flutter, android12, tutorial, animation
Published: 2022-06-16 11:41:27

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._


![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6so6nn7ch34q1l4qw7ne.png)


- 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:

![googlelogo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm4sk7gc6ft4fso4rdjo.png)

![android_12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5wax5j9okv3wrrmlb3q.png)

- 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>
```

!['gif'](https://media0.giphy.com/media/l0HdZtLUi9ZTQ8DDi/200.gif)


- 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>
```

![gif2](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOFVY4xbvtnBGyxvwvGMMHkHlQidzotJzvZGJneysYwgudq2TZNox0d8BEV7qXG3G5BEo&usqp=CAU)

- 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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nccn92uaxdui4vmjv162.gif)


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/_**