How to create Jetpack Compose Splash Screen?
Splash screen is the first screen of an app which open first when an app launch. It may represents the logo, name, or short description of an app for a short time. In this tutorial we will create a splash screen with jetpack compose.
For creating a Splash Screen we need two screens first for splash screen and second for Main Screen.
We can create two screens using composable Function or two separate Kotlin files for two screens.
The most important things that for navigation from Splash Screen to Main Screen we will use a compose navigation dependency in our build.gradle (Module:app) File.
implementation 'androidx.navigation:navigation-compose:2.5.3'
Steps:
Lets Create a New Project named as Splash Screen Compose. Add an Image named as logo in drawable file. We will use this image in Splash Screen as logo with animation.
Create an Object file named “Screens” code and image is below.
Create an object class Screens
Copy this code →
package com.example.splashscreencompose
object Screens {
const val Splash = "Splash"
const val Main = "MainScreen"
}Now create two separate Kotlin Files for two screens.
Screen 1 is named as SplashScreen
Copy this code →
package com.example.splashscreencompose
import ...
@Composable
fun SplashScreen(navController: NavController)
= Box(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight())
{
val scale = remember {
androidx.compose.animation.core.Animatable(0.0f)
}
LaunchedEffect(key1 = true) {
scale.animateTo(
targetValue = 0.7f,
animationSpec = tween(800, easing = {
OvershootInterpolator(4f).getInterpolation(it)
}
)
)delay(1000)
//This stop to appear splash screen on pressing back button
navController.navigate(Screens.Main) {
popUpTo(Screens.Splash) {
inclusive = true
}
}
}
Image(painter = painterResource(id = R.drawable.logo),
contentDescription ="",
alignment = Alignment.Center, modifier = Modifier
.fillMaxSize().padding(40.dp)
.scale(scale.value)
)
Text(
text = "Version+${BuildConfig.VERSION_NAME}",
textAlign = TextAlign.Center,
fontSize = 24.sp,
modifier = Modifier.align(Alignment.BottomCenter).padding(16.dp)
)
}
Screen 2 named as MainScreen.
Copy this code →
package com.example.splashscreencompose
import ...
@Composable
fun MainScreen(navController = navController){
Text(text = "Main Screen", color = Color.Red, fontSize = 40.sp)
}MainActivity
Copy this code →
package com.example.splashscreencompose
import ...
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SplashScreenComposeTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = Screens.Splash
) {
composable(route = Screens.Splash) {
SplashScreen(navController = navController)
}
composable(route = Screens.Main) {
MainScreen(navController = navController)
}
}
}
}
}
}
}Output :-
.png)