¿Cómo implementar un Splash Screen en Android con Jetpack Compose?
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 carpetares/drawable
presionamos clic derecho enNew/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 formatoSVG
oPSD
en la rutaPath
y una vez configurado presionamosNext
luegoFinish
para tener un logo en formatoxml.
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 encompose
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 suroute
y también me permitirá configurar el destino que tendrá la pantalla por medio delpopUpto.
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
@Composable
que 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
llamadaSplashScreen
que será la encargada de contener los funciones realizadas anteriormente para ser visualizadas. - La variable
scaleAnimation
lo que hace por medio delremember
es recordar ese valor durante cada recomposición y posterior hacer la animación a través delAnimatable()
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 ✌.