Creating a Splash Screen in Android Using the New Splash Screen API

4 min readJun 25, 2023

The Android Splash Screen API introduced in Android 12 provides a convenient way to create a splash screen without the need for additional activities. It allows for customization, doing background processing tasks, and smooth transition to the main screen. Furthermore, it offers a compatibility API so we can use it on earlier Android versions too and that’s what we will be doing in this post.

Setting Up the Project and Dependencies

To get started, set up a new Android project or open an existing one in Android Studio. Add the following Splash Screen API dependency. It is required if you want to support Android versions earlier than 12.

implementation 'androidx.core:core-splashscreen:1.0.0-alpha02'

Choosing and Customizing the Splash Screen Icon

Select an icon or logo that represents your app. If you don’t have a logo or icon you can just create a new drawable resource and customize it according to your preferences. If you want to use animations, use an animated vector drawable.

Creating the Splash Screen Theme

Define a new theme for the splash screen in the styles.xml file or you can create a new values resource file and add the following to it.

<style name="Theme.App.Starting" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">#D8D7D7</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/baseline_shopping_cart_24</item>
    <item name="postSplashScreenTheme">@style/Theme.SplashScreenDemo</item>
</style>

Set a background color using the windowSplashScreenBackground property. To set the splash screen icon you need to set the windowSplashScreenAnimatedIcon property. Even if you don’t have an animated icon you have to use this property. Next you can use the postSplashScreenTheme property to define a different theme that the app will switch to after the splash screen has been shown. So if you don’t want to keep using this theme after the splash screen is over you can do so by specifying your main app theme here. This allows you to transition to the main app theme seamlessly.

Modifying the Activity Theme and Applying the Splash Screen

Update the activity theme in the AndroidManifest.xml file to use the splash screen theme so that your app boots up with the splash screen theme. Next in the MainActivity.kt add the following line before setContentView to install the splash screen using the Splash Screen API.

installSplashScreen()

Hiding the Splash Screen When Loading is Complete

You can use setKeepVisibleCondition function of the Splash Screen API to set a boolean value which indicates whether to keep showing the splash screen or hide it. This way you can keep showing the splash screen while the app is performing background processing tasks like fetching data, checking user login status, or any other necessary operations. Use view model or any other mechanism to track the loading status. Once the loading is complete, update the condition to hide the splash screen automatically.

Here I have used a very simple view model to detect if the splash screen should still show or not based on the state saved in the view model. You can create and use the view model follows:

class MainViewModel : ViewModel() {
    //isLoading state with initial value true
    private val _isLoading = MutableStateFlow(true);
    val isLoading = _isLoading.asStateFlow();

    init {
        viewModelScope.launch {
            //Delay to simulate some background processsing like fetching data
            delay(3000)
            //After task is done set isLoading to false to hide splash screen
            _isLoading.value = false
        }
    }
}

//In MainActivity.kt
private val viewModel : MainViewModel by viewModels()

//Inside onCreate()
installSplashScreen().apply {
  setKeepVisibleCondition{
    viewModel.isLoading.value
  }
}

Fixing Icon Scaling Issues

When you run the app you may notice that the splash screen icon is scaled up a lot and hence cropped out. To fix scaling issues like this adjust the scaling properties within the icon’s XML file as follows:

<group android:pivotX="12" android:pivotY="12" android:scaleX="0.5" android:scaleY="0.5">
    <path android:fillColor="@android:color/white" android:pathData="M7,18c-1.1,0 -1.99,0.9 -1.99,2S5.9,22 7,22s2,-0.9 2,-2 -0.9,-2 -2,-2zM1,2v2h2l3.6,7.59 -1.35,2.45c-0.16,0.28 -0.25,0.61 -0.25,0.96 0,1.1 0.9,2 2,2h12v-2L7.42,15c-0.14,0 -0.25,-0.11 -0.25,-0.25l0.03,-0.12 0.9,-1.63h7.45c0.75,0 1.41,-0.41 1.75,-1.03l3.58,-6.49c0.08,-0.14 0.12,-0.31 0.12,-0.48 0,-0.55 -0.45,-1 -1,-1L5.21,4l-0.94,-2L1,2zM17,18c-1.1,0 -1.99,0.9 -1.99,2s0.89,2 1.99,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
</group>

Here I have wrapped the path with a group and set the pivot and scale properties on the group. You can adjust these values for your icon and test and iterate until the icon appears correctly.

And that’s it! In this post, we explored the new Splash Screen API and learned how to create a splash screen without the need for extra activities. Embrace the new Splash Screen API and enhance the user experience of your Android app.

You can find the demo app code here.