How to Implement Splash Screen in Jetpack Compose?

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

Prerequisites:

State Management

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

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.

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.

Add the following code to the file.

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

    <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>   
    </style>

</resources>

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.

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.

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.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
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?) {
        super.onCreate(savedInstanceState)

        // add it before setContent
        installSplashScreen().apply {
            setKeepOnScreenCondition {
                viewModel.loading.value
            }
        }

        setContent {
            YourProjectNameTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Box(
                        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
            delay(2000)
            _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.

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="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#000000"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <group
        android:pivotX="12"
        android:pivotY="12"
        android:scaleX="0.5"
        android:scaleY="0.5">
        <path
            android:fillColor="@android:color/white"
            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" />
        <path
            android:fillColor="@android:color/white"
            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" />   
    </group>

</vector>

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:

References:

Android docs

What is a Splash Screen?

Leave a Comment Cancel reply