¿Cómo implementar un Splash Screen en Android con Jetpack Compose?

5 min readDec 2, 2021

En este artículo veremos como implementar un Splash Screen animado con Jetpack Compose, el nuevo kit de herramientas moderno de Android para compilar IU nativas.

✨ Veamos como nos quedaría 👇

Estas list@s, comencemos con esta aventura 🛠

1️⃣ Dependencia de navegación

Nos dirigimos a build.gradle(module) y colocamos la siguiente dependencia, la cuál nos permitirá navegar entre pantallas:

implementation "androidx.navigation:navigation-compose:2.4.0-beta02"

Nota: Para más información sobre la navegación en compose, puedes revisar su Documentación.

2️⃣ Logotipo

Agregamos un logotipo convertido en formato xml.

Para convertirlo a formato xml nos dirigimos a la carpeta res/drawable presionamos clic derecho en New/Vector Asset y se nos abrirá una ventana de configuración.

En la ventana de Configure Vector Asset podemos ingresar un tipo de logo en formato SVG o PSD en la ruta Path y una vez configurado presionamos Next luego Finish para tener un logo en formato xml.

La ruta del logotipo se encuentra: res/drawable/ic_logo_kotlin.xml

3️⃣ Rutas de destinos

Para poder asignar el nombre de la ruta de destino a la que vamos a navegar por medio de su route, implementaremos un sealed class en la que contendrá el nombre de las diferentes rutas a navegar.

sealed class DestinationScreen(val route: String) {
    object SplashScreenDest : DestinationScreen(route =   
    "splash_screen")
    object MainScreenDest : DestinationScreen(route = "main_screen")
}

4️⃣ Animación y diseño

Crearemos una función @Composable llamada AnimationSplashContent que contendrá la animación, tiempo de duración y el destino de salida.

LaunchedEffect: Me permitirá vincularme al ciclo de vida del componible para así poder evitar cualquier perdida de memoria o proceso, para saber más sobre los efectos secundarios en compose consulte aquí.
delay: Me permitirá suspender la pantalla del Splash Screen por un tiempo determinado.
navigate: Me permitirá navegar a la siguiente pantalla a través de su route y también me permitirá configurar el destino que tendrá la pantalla por medio del popUpto.

Para mayor información sobre las Animaciones en compose puedes consultar su Documentación.
Puede consultar también la guía de destinos popUpTo.

@Composable
fun AnimationSplashContent(
    scaleAnimation: Animatable<Float, AnimationVector1D>,
    navController: NavController,
    durationMillisAnimation: Int,
    delayScreen: Long
) {

    LaunchedEffect(key1 = true) {
        scaleAnimation.animateTo(
            targetValue = 0.5F,
            animationSpec = tween(
                durationMillis = durationMillisAnimation,
                easing = {
                    OvershootInterpolator(3F).getInterpolation(it)
                }
            )
        )

        delay(timeMillis = delayScreen)

        navController.navigate(route = 
        DestinationScreen.MainScreenDest.route) {
            popUpTo(route = 
            DestinationScreen.SplashScreenDest.route) {
                inclusive = true
            }
        }
    }
}

Ahora crearemos otra función @Composableque contendrá el diseño del Splash Screen.
Brush.verticalGradient(): Esta asignación me permitirá crear un fondo degradado en formato vertical asignando una lista de los colores. Para saber más sobre las tipos de funciones que existen puede consultar aquí.

@Composable
fun DesignSplashScreen(
    modifier: Modifier = Modifier,
    imagePainter: Painter,
    scaleAnimation: Animatable<Float, AnimationVector1D>
) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .background(
                Brush.verticalGradient(
                    colors = listOf(
                        Color(239, 127, 26),
                        Color(120, 40, 140),
                        Color(0, 47, 187),
                    )
                )
            ),
        contentAlignment = Alignment.Center
    ) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Image(
                painter = imagePainter,
                contentDescription = "Logotipo Splash Screen",
                modifier = modifier
                    .size(400.dp)
                    .scale(scale = scaleAnimation.value),
            )

            Text(
                text = "Aquí va el logotipo de su preferencia",
                color = Color.White,
                fontSize = 40.sp,
                fontWeight = FontWeight.ExtraBold,
                fontFamily = FontFamily.Serif,
                textAlign = TextAlign.Center,
                modifier = modifier.scale(scale = 
                scaleAnimation.value)
            )
        }
    }
}

Finalmente crearemos una función @Composable llamada SplashScreen que será la encargada de contener los funciones realizadas anteriormente para ser visualizadas.
La variable scaleAnimation lo que hace por medio del remember es recordar ese valor durante cada recomposición y posterior hacer la animación a través del Animatable() con un valor inicial flotante 0F.

@Composable
fun SplashScreen(navController: NavController) {

    val scaleAnimation: Animatable<Float, AnimationVector1D> = 
    remember { Animatable(initialValue = 0f) }

    AnimationSplashContent(
        scaleAnimation = scaleAnimation,
        navController = navController,
        durationMillisAnimation = 1500,
        delayScreen = 3000L
    )

    DesignSplashScreen(
        imagePainter = painterResource(id = 
        R.drawable.ic_logo_kotlin),
        scaleAnimation = scaleAnimation
    )
}

5️⃣ Diseño Main Screen

Para realizar la animación de las pulsaciones del corazón podemos utilizar InfiniteTransition que por medio de la implementación rememberInfiniteTransition() podemos ejecutar animaciones secundarias, que darán la animación a implementar.

@Composable
fun MainScreen() {

    val heartTransition = rememberInfiniteTransition()

    val volumeHeart by heartTransition.animateFloat(
        initialValue = 80f,
        targetValue = 200f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 800,
                delayMillis = 100,
                easing = FastOutLinearInEasing
            ),
            repeatMode = RepeatMode.Reverse
        )
    )

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Bienvenidos\nPantalla Principal",
                fontSize = 40.sp,
                fontWeight = FontWeight.ExtraBold,
                fontFamily = FontFamily.Cursive,
                textAlign = TextAlign.Center
            )

            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Icono Corazón",
                tint = Color.Red,
                modifier = Modifier.size(volumeHeart.dp)
            )
        }
    }
}

6️⃣ Rutas de navegación

El NavHost requiere de un objeto NavController() que se implemento por medio del rememberNavController() y posteriormente se podrá navegar a través de componibles verificando su ruta de navegación.

startDestination: Asignara la ruta principal que se va a ejecutar.
composable(): Me permitirá implementar la función a ejecutar, con su ruta de destino.

@Composable
fun NavigationScreen() {

    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = DestinationScreen.SplashScreenDest.route
    ) {
      composable(route = DestinationScreen.SplashScreenDest.route) {
            SplashScreen(navController = navController)
        }

      composable(route = DestinationScreen.MainScreenDest.route) {
            MainScreen()
        }
    }
}

7️⃣ Ejecución App

Dentro del setContent se podrá ejecutar la aplicación.

setContent {
    Surface(color = MaterialTheme.colors.background) {
        NavigationScreen()
    }
}

¡Muchas Gracias por leer! 🤗💙

Puedes consultar el código en mi repositorio de GITHUB.

Regálame un 👏 si te gusto 🤗 y siéntete libre de dejar tus comentarios para analizarlos juntos. Nos vemos en la próxima ✌.