📸 Photo Gallery con Splash Screen e Icono personalizado

📌 Descripción

Aplicación móvil desarrollada con Ionic + Capacitor que implementa:

• Splash Screen personalizado
• Icono adaptativo
• Navegación por tabs

---

⚙️ Tecnologías utilizadas

• Ionic
• Capacitor
• Android Studio

---

🖼️ Implementación del Splash Screen

📚 Documentación oficial

Para obtener un Splash Screen exitoso se puede encontrar la documentación adecuada en los siguientes links:

• Splash Screen API
• Splash & Icons Guide

---

🔧 Configuración en capacitor.config.ts

Después de la instalación, hay que implementar lo siguiente

"plugins": {
  "SplashScreen": {
    "launchShowDuration": 3000,
    "launchAutoHide": true,
    "launchFadeOutDuration": 3000,
    "backgroundColor": "#ffffffff",
    "androidSplashResourceName": "splash",
    "androidScaleType": "CENTER_CROP",
    "showSpinner": true,
    "androidSpinnerStyle": "large",
    "iosSpinnerStyle": "small",
    "spinnerColor": "#999999",
    "splashFullScreen": true,
    "splashImmersive": true,
    "layoutName": "launch_screen",
    "useDialog": true
  }
}

---

📁 Recursos necesarios

Crear una carpeta assets/ con:

• icon-only.png
• icon-foreground.png
• icon-background.png
• splash.png
• splash-dark.png

📌 Nota: Puede usar herramientas como Ape Tools para ajustar tamaños.

---

🎨 Configuración en Android

Hay que ubicarse en: res/values/styles.xml

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item>
</style>

📷 Ejemplo:

Y listo, con el comando ionic cap add android, ya se puede configurar para ese sistema

---

📱Visualización final

📦Instalación del apk

📲Icono en pantalla

🔓 Apertura de la app

📑 Navegación por tabs:

✅ Conclusión

Se obtuvo una excelente visualización del sistema con el Splash screen y el icono personalizado que caracteriza a la app y mejora la experiencia visual del usuario.