¿Cómo crear iconos y salpicaduras para aplicaciones de Android en CapacitorJS?

Con CapacitorJS, puede generar fácilmente iconos y salpicaduras para su aplicación de Android.

No se puede negar que un ícono llamativo es una de las mejores maneras de hacer que su aplicación se destaque de otras aplicaciones. Puede generar fácilmente íconos de aplicaciones para aplicaciones nativas con Image Asset Studio, que le permite crearlos usando íconos de materiales, imágenes personalizadas y cadenas de texto. En CapacitorJS, puede generar automáticamente una versión alterada del ícono de la aplicación para que se ajuste a cualquier imagen que desee.

Mi objetivo en este artículo es ayudarlo a crear fácilmente íconos y recursos de bienvenida para la versión de Android de su aplicación CapacitorJS.

1. Crear recursos de imagen

Necesita al menos 4 imágenes (debe crearlas y contendrán el logotipo de su aplicación) para generar los íconos correctos y las pantallas de bienvenida (mipmap y dibujables) basadas en Android API 26:

1. icon.png: Para los íconos, la fuente de la imagen debe tener al menos 1024x1024px y estar ubicada en resources / icon.png.
2. splashscreen.png: Para obtener los mejores resultados, los gráficos de la pantalla de inicio deben estar aproximadamente en el cuadrado (1200x1200px) en el centro.
3. android/icon-background.png: Este archivo no incluye la plataforma Android (ver iconos adaptables). Se requiere una imagen con una resolución de 108 x 108 dp (xxxhdpi: 432 x 432 píxeles).
4. android/icon-foreground.png: Este archivo no incluye la plataforma Android (ver iconos adaptables). Se requiere una imagen con una resolución de 108 x 108 dp (xxxhdpi: 432 x 432 píxeles).

Al usar el fondo del icono y el primer plano del icono, solo obtendrá los 72 x 72 píxeles internos del icono en la ventana de visualización enmascarada. Se crea un efecto de paralaje o pulsación en cada uno de los cuatro lados utilizando los 18 dp externos. Como debería tener el relleno mencionado, el icono de la imagen será más pequeño.

Los siguientes archivos deben estar en la raíz de su proyecto CapacitorJS dentro directorio de recursos:

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

En mi caso, necesito las siguientes imágenes con las siguientes dimensiones:

Fondo para el diseño de iconos adaptables icon-background y primer plano icon-foreground Se requieren imágenes. Sin ellos, en versiones más nuevas de Android como Android Pie, el icono estará en blanco y aparecerá un mensaje de error en el terminal al generar 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 la plataforma Android

Debe utilizar la herramienta cordova-res para generar los iconos de Android redimensionados correspondientes (hdpi, xhdpi, xxhdpi). Esta herramienta recorta y cambia el tamaño de las imágenes de origen JPEG y PNG para generar iconos y pantallas de bienvenida para iOS, Android y Windows modernos. cordova-res está diseñado para funcionar con Cordova, pero también se admiten Capacitor y otros tiempos de ejecución nativos. Use el siguiente comando para instalar este módulo globalmente en su computadora:

npm install -g cordova-res

Lo único que queda por hacer es generar todas las imágenes y copiarlas a proyectos nativos ejecutando el siguiente comando.

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

Se generará la siguiente salida:

Generated 24 resources for Android 
Copied 31 resource items to Android 

Los siguientes archivos se generarán en el directorio de recursos:

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

No olvide sincronizar la aplicación después de generar las imágenes:

Cuando ejecute aplicaciones de Android en su dispositivo o emulador, se utilizarán de forma adecuada.