How to Implement a Splash Screen in Jetpack Compose with the SplashScreen API.

Photo by Mika Baumeister on Unsplash

Introduction

When designing for a better user experience, the load time of app resources can significantly impact user interactions.

To reduce waiting time when preparing app resources, a splash screen can be helpful. Splash screens offer a unique and appealing experience to users but can be challenging to build.

In this blog post, you’ll learn how to create a simple splash screen using the SplashScreen API. The API includes pre-defined animations at app launch that feature:

• An into-app motion at launch,
• A splash screen displaying an app icon, and
• A transition to the app itself; making it the standard choice for implementing splash screens.

Additionally, the API provides an interface to control the splash screen’s visibility and is backward compatible.

Implementation Steps

Targeting users on Android 11 (API 30) and below:

1. Add the SplashScreen core library in your build.gradle file.

implementation("androidx.core:core-splashscreen:1.0.1")

2. Create a new drawable resource for the splash screen layout in the drawable/splash_screen.xml file.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <color android:color="@color/purple"/>
    </item>

    <item
        android:gravity="center"
        android:drawable="@drawable/logo"/>
</layer-list>

3. Add the new theme style in your res/values/themes.xml file.

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

    <style name="Theme.LazaShop" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/white</item>
    </style>
    
    <style name="Theme.App.Starting." parent="Theme.SplashScreen" >
        <item…