Animate Splash Screen in jetpack compose

•  Step 1 :-
  
  First we have to create Routes of screens
  
  

sealed class Screen(val route: String) {
    data object Splash : Screen("splash_screen")
    data object Home : Screen("home_screen")
}

• Step 2 :-
  
  now we have to create nav graph
  

  import androidx.compose.foundation.layout.Box
  import androidx.compose.foundation.layout.fillMaxSize
  import androidx.compose.runtime.Composable
  import androidx.compose.ui.Modifier
  import androidx.navigation.NavHostController
  import androidx.navigation.compose.NavHost
  import androidx.navigation.compose.composable
  
  import com.example.jetpacktutorials.ui.theme.utils.AnimatedSplashScreen
  
  @Composable
  fun SetupNavGraph(navController: NavHostController) {
      NavHost(
          navController = navController,
          startDestination = Screen.Splash.route
      ) {
          composable(route = Screen.Splash.route) {
              AnimatedSplashScreen(navController = navController)
          }
          composable(route = Screen.Home.route) {
              Box(modifier = Modifier.fillMaxSize())
          }
      }
  }

• Step 3:- Now we have to create Animated Splash screen
  
  

  import android.content.res.Configuration.UI_MODE_NIGHT_YES
  import androidx.compose.animation.core.animateFloatAsState
  import androidx.compose.animation.core.tween
  import androidx.compose.foundation.background
  import androidx.compose.foundation.isSystemInDarkTheme
  import androidx.compose.foundation.layout.Box
  import androidx.compose.foundation.layout.fillMaxSize
  import androidx.compose.foundation.layout.size
  import androidx.compose.material.icons.Icons
  import androidx.compose.material.icons.filled.Email
  import androidx.compose.material3.Icon
  import androidx.compose.runtime.Composable
  import androidx.compose.runtime.LaunchedEffect
  import androidx.compose.runtime.getValue
  import androidx.compose.runtime.mutableStateOf
  import androidx.compose.runtime.remember
  import androidx.compose.runtime.setValue
  import androidx.compose.ui.Alignment
  import androidx.compose.ui.Modifier
  import androidx.compose.ui.draw.alpha
  import androidx.compose.ui.graphics.Color
  import androidx.compose.ui.tooling.preview.Preview
  import androidx.compose.ui.unit.dp
  import androidx.navigation.NavHostController
  import com.example.jetpacktutorials.ui.theme.navigation.Screen
  import kotlinx.coroutines.delay
  
  @Composable
  fun AnimatedSplashScreen(navController: NavHostController) {
      var startAnimation by remember { mutableStateOf(false) }
      val alphaAnim = animateFloatAsState(
          targetValue = if (startAnimation) 1f else 0f,
          animationSpec = tween(
              durationMillis = 3000
          ), label = "animation"
      )
  
      LaunchedEffect(key1 = true) {
          startAnimation = true
          delay(4000)
          navController.popBackStack()
          navController.navigate(Screen.Home.route)
      }
      Splash(alpha = alphaAnim.value)
  }
  
  @Composable
  fun Splash(alpha: Float) {
      Box(
          modifier = Modifier
              .background(if (isSystemInDarkTheme()) Color.Black else Color.DarkGray)
              .fillMaxSize(),
          contentAlignment = Alignment.Center
      ) {
          Icon(
              modifier = Modifier
                  .size(120.dp)
                  .alpha(alpha = alpha),
              imageVector = Icons.Default.Email,
              contentDescription = "Logo Icon",
              tint = Color.White
          )
  //For drawable image
  
          /* Image(
               painter = painterResource(id = R.drawable.ic_launcher_background), // Replace with your drawable
               contentDescription = "Email Icon",
               modifier = Modifier
                   .size(120.dp)
                   .alpha(alpha = alpha),
               contentScale = ContentScale.Fit, // Optional: adjust the scaling of the image
               colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(Color.White) // Apply tint if needed
           )*/
      }
  }
  
  @Composable
  @Preview
  fun SplashScreenPreview() {
      Splash(alpha = 1f)
  }
  
  @Composable
  @Preview(uiMode = UI_MODE_NIGHT_YES)
  fun SplashScreenDarkPreview() {
      Splash(alpha = 1f)
  }

  
  
• Step 4 :- In main activity
  
  

  val navController = rememberNavController()
  SetupNavGraph(navController = navController)

• Step 5:- Now sharing Screenshot