Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Jetpack Compose Splash Screen

Jetpack Compose Splash Screen - Coding Bihar
Jetpack Compose Splash Screen


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'

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.


implementation 'androidx.navigation:navigation-compose:2.5.3'

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 :-

 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!