Pantalla de bienvenida animada en Android usando Jetpack Compose

Jetpack Compose es el conjunto de herramientas avanzado de Android para crear una interfaz de usuario materialista de una forma muy sencilla. No requiere ningún tipo de archivos XML en Android Studio y también ayuda a crear aplicaciones nativas. Se ha lanzado recientemente en la versión de Android Studio Arctic Fox. Las funciones de redacción de Jetpack se declaran como:

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

Vista previa de las funciones de composición:

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}

Pantalla de bienvenida

La pantalla de bienvenida suele ser la primera pantalla que representa su aplicación a través del logotipo o el nombre de la aplicación. Permanece durante unos segundos y luego lo lleva automáticamente a su pantalla principal. Puede utilizar su logotipo o cualquier tipo de texto informativo que signifique su aplicación.

Pantalla de bienvenida animada

La pantalla de bienvenida animada se ve bastante atractiva para los usuarios, ya que el logotipo o cualquier tipo de texto se puede animar para hacerlo más interesante. Jetpack Compose proporciona una variedad de API para decidir qué animaciones se realizarán. En este proyecto, vamos a utilizar la API de Animatable para implementar nuestra pantalla de bienvenida. Puede personalizar su efecto de animación, así como el tiempo de retraso según sus preferencias.

Pantalla de presentación animada con Jetpack Compose

A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando  Jetpack Compose .

Requisitos:

• Versión de Android Studio Zorro Ártico
• kotlin
• Imagen (.png)

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Cree un nuevo proyecto en Android Studio usando Empty Compose Activity y seleccione el idioma como Kotlin . Haga clic en Finalizar .

Paso 2: agregar dependencia

Adición de la dependencia de navegación en el archivo build.gradle(:app ) ubicado en la carpeta Gradle Scripts.

implementación «androidx.navigation:navigation-compose:2.4.0-alpha06»

Paso 3: Agregar imagen a la carpeta dibujable

Agregue una imagen/logotipo (.png) en la carpeta dibujable. La convención de nomenclatura de una imagen debe estar en minúsculas sin ningún símbolo, número o espacio.

Paso 4: trabajar con el archivo MainActivity.kt

Crear una función componible para navegación

@Composable
fun 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)
            }
        }
    }
}

Crear una función componible para la pantalla de bienvenida

@Composable
fun 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))
    }
}

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código completo del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.example.splashscreenjc
  
import android.os.Bundle
import android.view.animation.OvershootInterpolator
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import 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()
            }
        }
    }
}
@Composable
fun 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)
            }
        }
    }
}
@Composable
fun 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))
    }
}

Producción: