Animated Splash Screen in Android Using Jetpack Compose
Jetpack Compose is Android’s advanced toolkit for creating materialistic UI in a very simpler form. It does not require any kind of XML files in Android Studio also it helps to create native applications as well. It is recently launched in the Android Studio Arctic Fox version. Jetpack Compose Functions are declared as:
@Composable fun MessageCard(name: String) { Text(text = "Hello $name!") }
Preview Compose Functions:
@Preview @Composable fun PreviewMessageCard() { MessageCard("Android") }
Splash Screen
Splash Screen is usually the first screen that represents your application through the logo or name of the application. It stays for few seconds and then automatically leads you to your main screen. You can use your logo or any kind of informative text that signifies your application.
Animated Splash Screen
Animated Splash Screen looks pretty attractive to users as the logo or any kind of text can be animated to make it more interesting. Jetpack Compose provides a variety of APIs to decide which Animations to be performed. In this project, we are going to use Animatable API to implement our splash screen. You can customize your animation effect as well as the delay time according to your preference.
Animated Splash Screen using Jetpack Compose
A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Jetpack Compose.
Requirements:
- Android Studio Arctic Fox Version
- Kotlin
- Image (.png)
Step By Step Implementation
Step 1: Create a New Project
Create a new project in Android Studio using Empty Compose Activity and select the language as Kotlin. Click Finish.
Step 2: Add Dependency
Adding Navigation dependency into build.gradle(:app) file located in Gradle Scripts folder.
implementation “androidx.navigation:navigation-compose:2.4.0-alpha06”
Step 3: Add Image to Drawable Folder
Add an image/logo (.png) into drawable folder. The naming convention of an image should be in lowercase without any symbols or numbers or space.
Step 4: Working with the MainActivity.kt file
Create a Composable Function for Navigation
Kotlin
@Composable fun Navigation() { val navController = rememberNavController() NavHost(navController = navController, startDestination = "splash_screen" ) { composable( "splash_screen" ) { SplashScreen(navController = navController) } // Main Screen composable( "main_screen" ) { Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { Text(text = "Main Screen" , color = Color.Black, fontSize = 24 .sp) } } } } |
Create a Composable Function for Splash Screen
Kotlin
@Composable fun SplashScreen(navController: NavController) { val scale = remember { androidx.compose.animation.core.Animatable(0f) } // AnimationEffect LaunchedEffect(key1 = true ) { scale.animateTo( targetValue = 0 .7f, animationSpec = tween( durationMillis = 800 , easing = { OvershootInterpolator(4f).getInterpolation(it) }) ) delay(3000L) navController.navigate( "main_screen" ) } // Image Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) { Image(painter = painterResource(id = R.drawable.gfglogo), contentDescription = "Logo" , modifier = Modifier.scale(scale.value)) } } |
Go to the MainActivity.kt file and refer to the following code. Below is the complete code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
package com.example.splashscreenjc import android.os.Bundle import android.view.animation.OvershootInterpolator import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.animation.core.tween import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.scale import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.sp import androidx.navigation.NavController import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController import kotlinx.coroutines.delay class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { Surface(color = Color.White, modifier = Modifier.fillMaxSize()) { com.example.splashscreenjc.Navigation() } } } } @Composable fun Navigation() { val navController = rememberNavController() NavHost(navController = navController, startDestination = "splash_screen" ) { composable( "splash_screen" ) { SplashScreen(navController = navController) } // Main Screen composable( "main_screen" ) { Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { Text(text = "Main Screen" , color = Color.Black, fontSize = 24 .sp) } } } } @Composable fun SplashScreen(navController: NavController) { val scale = remember { androidx.compose.animation.core.Animatable(0f) } // Animation LaunchedEffect(key1 = true ) { scale.animateTo( targetValue = 0 .7f, // tween Animation animationSpec = tween( durationMillis = 800 , easing = { OvershootInterpolator(4f).getInterpolation(it) })) // Customize the delay time delay(3000L) navController.navigate( "main_screen" ) } // Image Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) { // Change the logo Image(painter = painterResource(id = R.drawable.gfglogo), contentDescription = "Logo" , modifier = Modifier.scale(scale.value)) } } |
Output:
Contact Us