Today’s tutorial will teach us to integrate splash screens in KMM Android & iOS applications. This tutorial will discuss all the step-by-step guides for adding a splash screen in KMP with the shared commonMain code.
Add Splash Screen in KMP Compose Multiplatform App
A Splash screen is the first screen that appears on a mobile application during app launch time for a few seconds. This screen contains a small description of the app in visualization form. This screen can contain Text Images or app logos as well. The splash screen helps us reduce the app data loading time when loading data from APIs. When displaying the splash screen, we start loading data from the internet into our application.
1. I have designed a demo splash screen image for this tutorial, which we will use in this tutorial. Download the image from below.
2. Paste the splash screen image into
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
package com.app.test import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.layout.ContentScale import kotlinx.coroutines.delay import org.jetbrains.compose.resources.painterResource import testapp.composeapp.generated.resources.Res import testapp.composeapp.generated.resources.splash_screen @Composable fun SplashScreen(onTimeout: () -> Unit) { LaunchedEffect(Unit) { delay(2000) onTimeout() } Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Image( modifier = Modifier.fillMaxSize(), painter = painterResource(Res.drawable.splash_screen), contentDescription = "static splash Screen", contentScale = ContentScale.FillBounds ) } } |
Code explanation:
- Our main composable SplashScreen has an argument onTimeout which returns nothing. In this argument, we will execute a function passed from our main screen to execute in this screen.
- The LaunchedEffect function executes every time a composable executes. In this function, we add a delay of 2 seconds in milliseconds.
- The Image widget is our Splash screen image.
6. Code for App.kt file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
package com.app.test import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp @Composable fun App() { var isSplashScreenVisible by remember { mutableStateOf(true) } MaterialTheme { if (isSplashScreenVisible) { SplashScreen(onTimeout = { isSplashScreenVisible = false }) } else { HomeScreen() } } } @Composable fun HomeScreen() { Column( modifier = Modifier .fillMaxSize() .padding(16.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text( text = "Splash Screen in KMP Compose Multiplatform", style = TextStyle( fontSize = 28.sp, textAlign = TextAlign.Center ) ) } } |
Code explanation:
- When our main App function starts executing, then first it checks Splash screen is visible or not using mutable state management.
- First, it opens the Splash screen, and after 2 seconds, it hides the splash screen and loads our main HomeScreen.
Live screenshot:
