Jetpack Compose: Splash Screen API

Migrate your existing splash screen implementation to Android 12

Photo by John Schnobrich on Unsplash

In this post, I’m going to explain the step by step process of building the Splash Screen with SplashScreen API.

I won’t go into too much detail on SplashScreen API. If you want, you can check the link here.

Introduction

Android 12 adds the SplashScreen API, which enables a new app launch animation for all apps when running on a device with Android 12 or higher. This includes an into-app motion at launch, a splash screen showing your app icon, and a transition to your app itself.

If you have previously implemented a custom splash screen in Android 11 or lower, you’ll need to migrate your app to the SplashScreen API to ensure that it displays correctly in Android 12 and higher.

Starting in Android 12, the system always applies the new Android system default splash screen on cold and warm starts for all apps. By default, this system default splash screen is constructed using your app’s launcher icon element and the windowBackground of your theme (if it's a single color).

Building Step by Step

##First we are gonna create splash screen for Android 11 and below.##

Step 1: Create Splash Theme for Android 11 and below

• Create a drawable resource file that name drawable/bg_splash.xml in the Drawable folder. The bitmap is the icon or the image we want to show.

splash logo

• Create the style for the splash screen in the res/values/themes.xml file. If you don't have a themes.xml file in your project, you’ll need to create one and add the code below.

<style name="Theme.SplashScreenApp" parent="android:Theme.Material.Light.NoActionBar">
    <item name="android:statusBarColor">@color/blue_primary</item>

</style>

<style name="SplashScreenTheme" parent="Theme.SplashScreenApp">
    <item name="android:windowBackground">@drawable/bg_splash</item>
</style>

Step 2: Create SplashActivity

Create SplashActivity for Android 12 and above and Android 11 and below.

• Before your application starts, you can perform the actions you need on the splash screen. For Example; Check App Version, Register Push Token, Init some data before start your app. So we separate activity for splash.

@SuppressLint("CustomSplashScreen")
class SplashActivity: ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        .......
        super.onCreate(savedInstanceState)
        lifecycleScope.launchWhenCreated {
            delay(3000)

            val intent = Intent(this@SplashActivity, MainActivity::class.java)
            startActivity(intent)
            finish()
        }
    }

}

• After 3 seconds it will navigate to MainActivity.

Step 3: Set theme in manifest for SplashActivity

Add the splash screen theme to the SplashActvity , in the AndroidManifest.xml file.

<application
    ............
android:theme="@style/Theme.SplashScreenApp">
<activity
        android:name=".SplashActivity"
        android:exported="true"
        android:label="@string/app_name"
        android:theme="@style/SplashScreenTheme">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <activity android:name=".MainActivity" />

</application>

##Complete the following steps to migrate your existing splash screen implementation to the new experience for Android 12 and higher.##

Step 1: Update SDK to API

In the build.gradle file, change your compileSdk to min 31.

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.developersancho.splashscreen"
        minSdk 23
        targetSdk 31
        versionCode 1
        versionName "1.0"
        .........
    }
}

Step 2: Include splash dependency

In the build.gradle file, add the implementation below code and sync the project.

dependencies {

    // Splash screen Api
    implementation("androidx.core:core-splashscreen:1.0.0")
}

Step 3: Create Splash Theme for Android 12 same theme name (SplashScreenTheme)

• Create a drawable resource file that name drawable/bg_splash_12.xml in the Drawable folder. The bitmap is the icon or the image we want to show.

splash logo for android 12+

• Create the style for the splash screen in the res/values-v31/themes.xml file. If you don't have a themes.xml file in your project, you’ll need to create one and add the code below.

values-v31/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="SplashScreenTheme" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/blue_primary</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/bg_splash_12</item>
        <item name="windowSplashScreenAnimationDuration">800</item>
        <item name="postSplashScreenTheme">@style/Theme.SplashScreenApp</item>
    </style>

</resources>

themes.xml under values-v31 directory

• Background color: The background color for the splash screen, if not specify then system will calculate from windowBackground.

<item name="windowSplashScreenBackground">@color/blue_primary</item>

• Animation duration: Maximum duration should be below 1000ms.

<item name="windowSplashScreenAnimationDuration">800</item>

• Animated icon: To replace an icon in the center of the starting window.

<item name="windowSplashScreenAnimatedIcon">@drawable/bg_splash_12</item>

Step 4: Set theme in manifest for SplashActivity

We already created our theme with the same theme name. For this reason, automatically it was applied in the manifest file.

<application
    ............
    android:theme="@style/Theme.SplashScreenApp">
    <activity
        android:name=".SplashActivity"
        android:exported="true"
        android:label="@string/app_name"
        android:theme="@style/SplashScreenTheme">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <activity android:name=".MainActivity" />

</application>

Step 5: Configure SplashActivity

Add this code below to onCreate() method in SplashActivity.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S){
    val splashScreen = installSplashScreen()
    splashScreen.setKeepOnScreenCondition { true }
}

Full Code of SplashActivity.kt

@SuppressLint("CustomSplashScreen")
class SplashActivity: ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S){
            val splashScreen = installSplashScreen()
            splashScreen.setKeepOnScreenCondition { true }
        }
        super.onCreate(savedInstanceState)
        lifecycleScope.launchWhenCreated {
            delay(3000)

            val intent = Intent(this@SplashActivity, MainActivity::class.java)
            startActivity(intent)
            finish()
        }
    }
}

Screenshots

Android 12 and Android 11

Conclusion

The splash screen api will work for Android 12 and above. For Android 11 and below, the existing splash in our project will work. We have used both together.

References

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

Full Project

You can access the source code about SplashScreen API of the project from the link below.

GitHub — developersancho/SplashScreenMigrationTo12

You can check and review my jet compose training project link the below.

Jetpack Compose Modular Clean Architecture with Rorty App

GitHub - developersancho/JetRorty.Android: 🚀 Sample Android Clean Architecture on JetRorty App…

Also you can check and review my native android training project link the below.

Android Modular Clean Architecture with Rorty App

GitHub - developersancho/Rorty.Android: 🚀 Sample Android Clean Architecture on Rorty App focused…

Thanks 🚀

I hope it helps you. If it is useful to you, you can clap this article and follow me for such these articles.

Happy and healthy coding!

Que tengas un buen día, continuará 😊 🏄‍🚀