Animated Splash Screen in Android Using Jetpack Compose

08 Sep, 2021
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 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 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.
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 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
@Composablefun 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
@Composablefun 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.Bundleimport android.view.animation.OvershootInterpolatorimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.compose.animation.core.tweenimport androidx.compose.foundation.Imageimport androidx.compose.foundation.layout.Boximport androidx.compose.foundation.layout.fillMaxSizeimport androidx.compose.material.Surfaceimport androidx.compose.material.Textimport androidx.compose.runtime.Composableimport androidx.compose.runtime.LaunchedEffectimport androidx.compose.runtime.rememberimport androidx.compose.ui.Alignmentimport androidx.compose.ui.Modifierimport androidx.compose.ui.draw.scaleimport androidx.compose.ui.graphics.Colorimport androidx.compose.ui.res.painterResourceimport androidx.compose.ui.unit.spimport androidx.navigation.NavControllerimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.rememberNavControllerimport 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()            }        }    }}@Composablefun 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)            }        }    }}@Composablefun 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:
Android-Jetpack
Blogathon-2021
Android
Blogathon
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.