Vamos a crear una aplicación Android en Kotlin que muestre una pantalla de bienvenida (splash screen) con un logo animado en el centro. Utilizaremos la API oficial de SplashScreen introducida en Android 12, que permite personalizar la pantalla de inicio con animaciones y transiciones suaves. Para versiones anteriores de Android, emplearemos la biblioteca de compatibilidad androidx.core:core-splashscreen para garantizar una experiencia consistente en todos los dispositivos.
Introducción a la pantalla de bienvenida ( splash screen )
Una splash screen es la primera pantalla que ve el usuario al abrir una aplicación. Su propósito principal es mejorar la percepción del tiempo de carga y ofrecer una transición visualmente atractiva hacia la aplicación. Al incluir animaciones, como un logo que aparece gradualmente o se mueve, se puede captar la atención del usuario y reforzar la identidad de la marca.
En este proyecto, implementaremos una splash screen que muestra un logo animado en el centro de la pantalla. Utilizaremos un AnimatedVectorDrawable para definir la animación del logo y configuraremos la duración y comportamiento de la animación mediante estilos y temas. Además, personalizaremos la transición de salida de la splash screen para que el logo se desplace hacia arriba al iniciar la aplicación.
Estructura del Proyecto
El proyecto constará de los siguientes componentes:
- Dependencias: Añadiremos la biblioteca de compatibilidad de SplashScreen en el archivo
build.gradle. - Recursos: Crearemos un drawable animado (
AnimatedVectorDrawable) para el logo y lo colocaremos en la carpetares/drawable. - Temas y Estilos: Definiremos un tema personalizado para la splash screen en
res/values/themes.xml, especificando el fondo, el icono animado y la duración de la animación. - Actividad Principal: En
MainActivity.kt, instalaremos la splash screen y configuraremos la animación de salida.
A continuación, se presenta el código completo y detallado para implementar esta funcionalidad.
Paso 1: Configurar las Dependencias
En el archivo build.gradle (Module: app), añade la siguiente dependencia dentro del bloque dependencies:
dependencies {
implementation("androidx.core:core-splashscreen:1.0.0")
// Otras dependencias...
}Esta biblioteca proporciona compatibilidad con la API de SplashScreen en versiones anteriores a Android 12.
Paso 2: Crear el Drawable Animado
Crea un archivo llamado logo_animado.xml en la carpeta res/drawable con el siguiente contenido:
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:width="288dp"
android:height="288dp"
android:viewportWidth="288"
android:viewportHeight="288">
<group
android:name="rotationGroup"
android:pivotX="144"
android:pivotY="144">
<path
android:fillColor="#FF5722"
android:pathData="M144,0 L288,288 L0,288 Z"/>
</group>
</vector>
</aapt:attr>
<target android:name="rotationGroup">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="1000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360"
android:repeatCount="infinite"
android:repeatMode="restart"/>
</aapt:attr>
</target>
</animated-vector>Este drawable define un triángulo que rota continuamente. Puedes reemplazar el pathData con el de tu logo personalizado. Kodeco+3Stack Overflow+3Medium+3
Paso 3: Definir el Tema de la Splash Screen
En el archivo res/values/themes.xml, añade el siguiente estilo:
<style name="Theme.MiApp.Splash" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@color/white</item>
<item name="windowSplashScreenAnimatedIcon">@drawable/logo_animado</item>
<item name="windowSplashScreenAnimationDuration">1000</item>
<item name="postSplashScreenTheme">@style/Theme.MiApp</item>
</style>Paso 4: Configurar el Manifest
En el archivo AndroidManifest.xml, asigna el tema de la splash screen a tu actividad principal:
<application
android:theme="@style/Theme.MiApp">
<activity
android:name=".MainActivity"
android:exported="true"
android:theme="@style/Theme.MiApp.Splash">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>Esto asegura que la splash screen se muestre al iniciar la aplicación.
Paso 5: Implementar la Actividad Principal
En MainActivity.kt, instala la splash screen y configura la animación de salida:
package com.ejemplo.miapp
import android.animation.ObjectAnimator
import android.content.Intent
import android.os.Bundle
import android.view.View
import android.view.animation.AccelerateDecelerateInterpolator
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.splashscreen.SplashScreen
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// Instala la splash screen
val splashScreen = SplashScreen.installSplashScreen(this)
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Referencias a vistas del layout
val titleTextView = findViewById<TextView>(R.id.textTitle)
val buttonNavigate = findViewById<Button>(R.id.buttonNext)
// Animación de aparición del título (fade-in)
titleTextView.alpha = 0f
titleTextView.postDelayed({
titleTextView.animate()
.alpha(1f)
.setDuration(1000)
.start()
}, 300)
// Animación del botón
buttonNavigate.alpha = 0f
buttonNavigate.translationY = 100f
buttonNavigate.animate()
.alpha(1f)
.translationY(0f)
.setInterpolator(AccelerateDecelerateInterpolator())
.setDuration(1000)
.start()
// Acción del botón: ir a otra actividad
buttonNavigate.setOnClickListener {
val intent = Intent(this, SecondActivity::class.java)
startActivity(intent)
}
}
}Diseño en XML (res/layout/activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical"
android:padding="24dp"
android:gravity="center">
<TextView
android:id="@+id/textTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bienvenido a MiApp"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#333"
android:gravity="center"
android:layout_marginBottom="32dp" />
<Button
android:id="@+id/buttonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ir a la siguiente pantalla" />
</LinearLayout>Crear una segunda pantalla (SecondActivity.kt)
package com.ejemplo.miapp
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
class SecondActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_second)
}
}Y su layout básico (res/layout/activity_second.xml):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Esta es la segunda pantalla"
android:textSize="20sp"
android:textColor="#000" />
</FrameLayout>Manifest: registrar la nueva actividad
Agrega esto dentro de <application> en tu AndroidManifest.xml:
<activity android:name=".SecondActivity" />