Getting started with splash screen in Jetpack Compose

Introduction
As Jetpack Compose continues to gain popularity in the Android ecosystem, it is important to deliver a smooth user experience and transition in our mobile app. Google has released an API to make splash screen seamless and this post will guide you on how to get started.

Prerequisite

• Android Studio (as of writing this code, hedgehog or later is perfect)
• Project setup with Jetpack Compose

Step-by-step guide
Step 1: Setting up dependency
Step 2: Adding app icon
Step 3: Setting up the splashscreen theme
Step 4: Modify the AndroidManifest.xml
Step 5: Integrating the splash screen into the MainActivity.kt

Step 1: Setting up dependency
In the app build.gradle.kts under the dependencies block, add implementation("androidx.core:core-splashscreen:1.0.1") as seen below

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.1")
}

Step 2: Adding app icon
If you do not have one already created, go to Icon Kitchen create one and download. The downloaded file will come with everything you need just navigate to the folder named android copy everything and paste it into the res folder in your Android project.

Step 3: Setting up the splashscreen theme
In your styles.xml file, create a theme with a parent of Theme.SplashScreen. Set the value of postSplashScreenTheme to the theme that the Activity must use and the value of windowSplashScreenAnimatedIcon to a drawable or animated drawable. The other attributes are optional

<resources>
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <!-- Set the splash screen background, animated icon, and animation
        duration. -->
        <item name="windowSplashScreenBackground">@color/purple_500</item>

        <!-- Use windowSplashScreenAnimatedIcon to add a drawable or an animated
             drawable. One of these is required. -->
        <item name="windowSplashScreenAnimatedIcon">@mipmap/app_icon</item>
        <!-- Required for animated icons. -->
        <item name="windowSplashScreenAnimationDuration">200</item>

        <!-- Set the theme of the Activity that directly follows your splash
        screen. This is required. -->
        <item name="postSplashScreenTheme">@style/Theme.Kotlinarticles</item>
    </style>
</resources>

Step 4: Modify the Android Manifest

Add android:theme="@style/Theme.App.Starting" to the application and activity tag respectively

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/app_icon"
        android:supportsRtl="true"
        android:theme="@style/Theme.App.Starting"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.App.Starting">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

Step 5: Integrating the splash screen into the MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        val splashscreen = installSplashScreen()
        var keepSplashScreen = true
        super.onCreate(savedInstanceState)
        splashscreen.setKeepOnScreenCondition { keepSplashScreen }
        lifecycleScope.launch {
            delay(5000)
            keepSplashScreen = false
        }
        enableEdgeToEdge()
        setContent {
            KotlinarticlesTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

Best Practices

• Keep it simple: Don't overcomplicate your splash screen. A clean, branded design works best.
• Minimize duration: The splash screen should only be visible for as long as necessary to load your app's initial data.
• Provide visual feedback: If your app needs more time to load, consider adding a progress indicator.
• Test on various devices: Ensure your splash screen looks good on different screen sizes and orientations.

Conclusion

Implementing a splash screen in Jetpack Compose is a straightforward process that can significantly enhance your app's user experience. By following these steps and best practices, you can create a professional and smooth introduction to your application.

Remember, while splash screens are useful, they should be used judiciously. The goal is to provide a seamless transition into your app's main content, not to delay the user's access to it.

Happy coding!

Check out the repo

Notable links
Splashscreen API
Icon Kitchen

Comments

[Vitali Kuzniatsou]

Let’s say we could have a SplashActivity, it calls installSplashScreen()… While splash is shown I’m fetching authentication and deciding to navigate LoginActivity or MainActivity after splash is finished.
The problem could be in this postSplashScreenTheme after a splash screen, that contradicts with Login/Main activity Jetpack own theme.
For example: postSplashScreenTheme has white background, Login has green background and Main blue…
After splash is finished - u will see this short transition with white background(300ms) and then it will change to green or blue…

how to deal with such case?