Implementing a Splash Animation with the core-splashscreen API on Android

With the release of Android 12 a new API was introduced for developers in order to unify the splash animations that are usually shown when launching an app, giving consistency to the system UI. Until now, if someone wanted to show this kind of animation, a custom solution was needed, for example, with a specific activity or fragment for the splash animation, that navigates to the main screen after the animation finishes.

However, there are limited functions if the device is not running Android 12, that we are going to see later in the post. It’s also good to know that If the developer doesn’t want to implement this API, the operative system is going to make a default splash animation with the app icon, and this can’t be avoided.

Now, let’s start with the implementation, you can see here an example of what we are going to achieve.

Splash API on Android 12

When is the system going to show the splash animation?

The operative system will show the animation based in two conditions. First, the device must run Android 12 if we want to animate the splash screen, and second, based on the state of the app. If it’s a cold boot, that is to say, the app is already in memory, then the splash animation is going to be shown, but if the case is a warm boot, with the app already launched in memory, then the animation is going to hide.

How to implement the API?

In this tutorial, we are going to see how to implement the API for devices with Android 12 and below. Sadly, in versions lower than 12, we will need to show a static image instead of an animated one, and we won’t be allowed to show a branding image in the lower section of the screen.

For this example I’m going to use an SVG that I’ve designed and animated myself with a tool called Shapeshifter (I did check some YouTube videos and articles, but they didn’t end up very helpful, so I recommend checking the documentation of Shapeshifter if you want to design your own SVG).

The icon must be inside a square of 300×300 and the content that you want to show needs to be center with 200×200, otherwise, the content will be cut. If you don’t have any file that meets these constraints, and you don’t want to use the files that I’ve share in my repository, you can use this files that Google gives us.

In order to use the API we need to configure first our Gradle project to include the dependencies, so add in your Gradle module the next line.

implementation "androidx.core:core-splashscreen:1.0.0-rc01"

Once the Gradle sync is finished, the next step is to tell the app that we are going to use the API with some XML themes. For that, in res/values/splash_themes we need to create four files. Two are for the implementation in Android 12, where one is for dark mode, and the other for light mode. And then the other two files are for versions below 12.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.AppSplash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/icon_animated</item>
        <item name="windowSplashScreenAnimationDuration">1000</item>
        <item name="postSplashScreenTheme">@style/Theme.SplashAPISample</item>
        <item name="android:windowSplashScreenBrandingImage">@drawable/branding</item>

        <!-- Status bar and Nav bar configs -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
        <item name="android:navigationBarColor">@color/white</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>
</resources>

The parent theme must be Theme.SplashScreen and is also mandatory to indicate what theme is going to use the app after the splash animation is finished with postSplashScreenTheme .

With windowSplashScreenBackground we can set the background color and with windowSplashScreenAnimatedIcon and windowSplashScreenBrandingImage we tell the app what images to use for the logo and for the branding image (those are going to be converted to VectorDrawable/AnimatedVectorDrawable after adding them to the Android Studio project). This branding property is exclusive for Android 12, and we are not going to be able to use it in lower versions. Also, the animated icon is going to be static as stated before.

Splash API for versiones below Android 12

With our themes defined, the last step is to indicate to our application that it needs to use the new theme. It can be done in the application section or in the activity that works as launcher.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.molidev.splashapisample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppSplash">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Conclusion

And that’s all, with this simple and small code we can achieve a clean and elegant splash animation for every Android version. There are also more customizations that we can do, for example, keep the animation showing until a service or resource is loaded, show a custom exit animation…

If you want to know more about the API, you can check as always the official docs in Android Developers and if you need the repository with the project, I will link my GitHub below.

Repo with the code samples: https://github.com/molidev8/splash-api-sample

Featured image by Oğuzhan Akdoğan on Unsplash

If you want to read more content like this without ads and support me, don’t forget to check my profile, or give Medium a chance by becoming a member to access unlimited stories from me and other writers. It’s only $5 a month and if you use this link I get a small commission.

Share Article: