How to Implement Splash Screen in Jetpack Compose?

Jetpack Compose Splash Screen

In this article, we’ll learn how to implement the splash screen in Jetpack Compose.


What is a Splash Screen?

The first screen you see when you open an app is called the splash screen. It usually contains the company logo and other branding elements and disappears after a few seconds to reveal the main UI (MainActivity).

Splash Screen Jetpack Compose

In the above example, the screen with chair is the splash screen. Let’s implement it.

First, create an empty Compose project and add the following dependency in the app-level gradle file.

// splash screen
implementation "androidx.core:core-splashscreen:1.0.1"   

Add the icon to the drawable folder. I added chair.xml.

icon to drawable folder

Next, we need to create a theme for our splash screen. Right-click on the values folder and select New > Values Resource File. Create a file with the name splash.xml.

Splash screen resource file

Add the following code to the file.

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

    <style name="Theme.App.First" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">#FFD580</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/chair</item>
        <item name="postSplashScreenTheme">@style/Theme.YourProjectName</item>   


We created a new theme called Theme.App.First, which inherits default values from the Theme.SplashScreen. We added three items.

  • windowSplashScreenBackground – It is the background color of the splash screen.
  • windowSplashScreenAnimatedIcon – It is the icon that is displayed on the screen.
  • postSplashScreenTheme – This is the theme that is applied to the app after the splash screen. We should add our app theme. You will find its name in the themes.xml file.
themes app theme

Here, Theme.YourProjectName is our app theme. We added it to the postSplashScreenTheme item.

Next, open AndroidManifest.xml and apply Theme.App.First to the application and activity tags.

android manifest theme edited

In the MainActivity, add the following code.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen   
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    private val viewModel: MyViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {

        // add it before setContent
        installSplashScreen().apply {
            setKeepOnScreenCondition {

        setContent {
            YourProjectNameTheme {
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(text = "Hello World")

class MyViewModel : ViewModel() {
    private val _loading = MutableStateFlow(true)
    val loading = _loading.asStateFlow()

    init {
        viewModelScope.launch {
            // run background task here
            _loading.value = false

To display the splash screen, call the installSplashScreen() before the setContent block. The setKeepOnScreenCondition takes the condition parameter. As long as the its value is true, it shows the screen. We added the view model because we can run any background task (like a network call) while the screen is visible.

Now, run the project. Sometimes, the splash screen is not shown when you open the app by clicking on the run button. In this case, open the app manually.

Splash Screen Jetpack Compose

If the image is cropped, you can scale it down using the XML code. Put the path tags inside a group tag and set the pivot and scale values. For example, we can scale down the chair icon, using the following code:

<vector xmlns:android=""

            android:pathData="M7,11v2h10v-2c0,-1.86 1.28,-3.41 3,-3.86V6c0,-1.65 -1.35,-3 -3,-3H7C5.35,3 4,4.35 4,6v1.14C5.72,7.59 7,9.14 7,11z" />
            android:pathData="M21,9c-1.1,0 -2,0.9 -2,2v4H5v-4c0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2v5c0,1.65 1.35,3 3,3v1c0,0.55 0.45,1 1,1c0.55,0 1,-0.45 1,-1v-1h12v1c0,0.55 0.45,1 1,1c0.55,0 1,-0.45 1,-1v-1c1.65,0 3,-1.35 3,-3v-5C23,9.9 22.1,9 21,9z" />   


Look at the official docs for the recommended image dimensions.

This is all about the splash screen in Jetpack Compose. I hope you have learned something new. If you have any doubts, leave a comment below.

Related Articles:


Leave a Comment