Cómo crear los iconos y el splashscreen para tu aplicación de Android en CapacitorJS

Cómo crear los iconos y el splashscreen para tu aplicación de Android en CapacitorJS

Una de las mejores formas de hacer que tu aplicación se destaque de otras aplicaciones es sin duda un icono llamativo. Para las aplicaciones nativas, los íconos se pueden generar fácilmente usando la herramienta Image Asset Studio que te ayuda a generar tus propios íconos de aplicaciones a partir de íconos de materiales, imágenes personalizadas y cadenas de texto. Si estás utilizando CapacitorJS, también existe una forma automática de generar la versión redimensionada del icono de tu aplicación para que coincida con cada una de las imágenes que necesita la aplicación.

En este artículo, te explicaré cómo crear fácilmente el icono y los recursos de bienvenida para la versión de Android de tu aplicación CapacitorJS.

1. Crea los recursos de imágenes

A partir de hoy con la API 26 de Android, para generar íconos y pantallas de presentación válidos (mipmap y dibujables) necesitas al menos 4 imágenes (necesitas crearlas y contendrán el logo de tu aplicación):

  • icon.png: Lo ideal es que la imagen de origen de los íconos sea de al menos 1024 × 1024px y se encuentre en resources/icon.png. 
  • splashscreen.png: Para obtener los mejores resultados, la ilustración de la pantalla de presentación debe caber aproximadamente dentro de un cuadrado (1200 × 1200 px) en el centro de la imagen.
  • android/icon-background.png: este archivo es exclusivo de la plataforma Android ( consulte Iconos adaptables ). Debe tener un tamaño de 108 x 108 dp (xxxhdpi: 432 x 432 píxeles).
  • android/icon-foreground.png: este archivo es exclusivo de la plataforma Android ( consulte Iconos adaptables ). Debe tener un tamaño de 108 x 108 dp (xxxhdpi: 432 x 432 píxeles). Recuerda que para el fondo del icono y el primer plano del icono, solo el interior de 72 x 72 dp del icono aparece dentro de la ventana gráfica enmascarada. El sistema reserva los 18 dp externos en cada uno de los 4 lados para crear efectos visuales interesantes, como paralaje o pulsaciones. Entonces el ícono será más pequeño en la imagen ya que debería tener el relleno mencionado.

Estos deben estar ubicados en el directorio raíz de tu proyecto CapacitorJS en el directorio de resources como este:

resources/
├── android/
│   ├── icon-background.png
│   └── icon-foreground.png
├── icon.png
└── splashscreen.png

En mi caso, las imágenes requeridas son las siguientes con las dimensiones mencionadas:

Android Icons Dimensions

La imagen icon-background y la icon-foreground son necesarias para el diseño adaptativo de iconos . Si no los proporcionas, en versiones más recientes de Android como Android Pie, el ícono estará vacío y obtendrás un error en tu terminal al generarlos con cordova-res:

Generated 18 resources for Android
WARN:   Error occurred while copying resources/android/icon/mdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/mdpi-background.png
WARN:   Error occurred while copying resources/android/icon/hdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/hdpi-background.png
WARN:   Error occurred while copying resources/android/icon/xhdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/xhdpi-background.png
WARN:   Error occurred while copying resources/android/icon/xxhdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/xxhdpi-background.png
WARN:   Error occurred while copying resources/android/icon/xxxhdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/xxxhdpi-background.png

2. Agregar íconos a tu plataforma Android

Para generar los iconos redimensionados correctamente para tu aplicación de Android (hdpi, xhdpi, xxhdpi), debes utilizar la herramienta cordova-res. Esta herramienta recortará y cambiará el tamaño de las imágenes de origen JPEG y PNG para generar iconos y pantallas de presentación para iOS, Android y Windows modernos. cordova-res se desarrolló para su uso con Cordova, pero se admiten Capacitor y otros tiempos de ejecución nativos. Instala este módulo globalmente en tu computadora con el siguiente comando:

npm install -g cordova-res

Después de la instalación, solo necesitas generar todas las imágenes y luego copiarlas en los proyectos nativos con el siguiente comando (ubicado en el directorio raíz de su proyecto de CapacitorJS):

cordova-res android --skip-config --copy

Este comando generará la siguiente salida:

Generated 24 resources for Android 
Copied 31 resource items to Android 

Esto generará los siguientes archivos en el directorio de Android bajo resources:

resources/
├── android/
│   ├── icon/
│   │   ├── drawable-hdpi-icon.png
│   │   ├── drawable-ldpi-icon.png
│   │   ├── drawable-mdpi-icon.png
│   │   ├── drawable-xhdpi-icon.png
│   │   ├── drawable-xxhdpi-icon.png
│   │   ├── drawable-xxxhdpi-icon.png
│   │   ├── hdpi-background.png
│   │   ├── hdpi-foreground.png
│   │   ├── ldpi-background.png
│   │   ├── ldpi-foreground.png
│   │   ├── mdpi-background.png
│   │   ├── mdpi-foreground.png
│   │   ├── xhdpi-background.png
│   │   ├── xhdpi-foreground.png
│   │   ├── xxhdpi-background.png
│   │   ├── xxhdpi-foreground.png
│   │   ├── xxxhdpi-background.png
│   │   └── xxxhdpi-foreground.png
│   ├── icon-background.png
│   ├── icon-foreground.png
│   └── splash/
│       ├── drawable-land-hdpi-screen.png
│       ├── drawable-land-ldpi-screen.png
│       ├── drawable-land-mdpi-screen.png
│       ├── drawable-land-xhdpi-screen.png
│       ├── drawable-land-xxhdpi-screen.png
│       ├── drawable-land-xxxhdpi-screen.png
│       ├── drawable-port-hdpi-screen.png
│       ├── drawable-port-ldpi-screen.png
│       ├── drawable-port-mdpi-screen.png
│       ├── drawable-port-xhdpi-screen.png
│       ├── drawable-port-xxhdpi-screen.png
│       └── drawable-port-xxxhdpi-screen.png
├── icon.png
└── splash.png

Después de generar las imágenes, no olvides sincronizar tu aplicación:

npx cap sync

Se utilizarán respectivamente en tu aplicación de Android cuando la inicies en tu dispositivo o emulador.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable