DEV Community

Md. Mobin
Md. Mobin

Posted on

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.

Image

  • Now open Build.gradle(Module:android.app) file add following lines
dependencies {
..............
    implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.4'
.............
}
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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

android_12

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

Enter fullscreen mode Exit fullscreen mode
  • 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>

Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

'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>
Enter fullscreen mode Exit fullscreen mode

gif2

  • 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)

    }
Enter fullscreen mode Exit fullscreen mode

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

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/

Top comments (0)