Site icon Consejos WEB

Cordova Android: iconos para la última versión y splashscreen

Mucho ha cambiado en la generación de iconos para las últimas versiones de Android. Actualmente, en el archivo de configuración de Cordova, es necesario indicar lo siguiente dentro de la sección de Android:

<resource-file src="resources/android/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
        <resource-file src="resources/android/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
        <resource-file src="resources\values\colors.xml" target="app/src/main/res/values/colors.xml" />
        <resource-file src="resources/android/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
        <resource-file src="resources/android/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
        <resource-file src="resources/android/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/mipmap-hdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/mipmap-hdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/mipmap-mdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/mipmap-mdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/mipmap-xhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/mipmap-xhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/mipmap-xxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/mipmap-xxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png" />
        <resource-file src="resources/android/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
        <resource-file src="resources/android/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
        <resource-file src="resources/android/mipmap-xxxhdpi/ic_launcher_background.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png" />
        <resource-file src="resources/android/mipmap-xxxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png" />

Para generar todos los íconos, es más cómodo utilizar una herramienta como IconKitchen (https://icon.kitchen), que permite, subiendo una sola imagen, indicar texto o a partir de una librería de clipart generar todos los iconos. Si optamos por utilizar una imagen propia, lo más habitual, lo ideal es usar una imagen de 1024×1024 píxeles, preferiblemente un círculo con fondo blanco.

Para generar los íconos, podemos optar por un cuadrado, un cuadrado con esquinas redondeadas o bien un círculo.

Como en nuestro caso, todo va ser round, tendremos que indicar en el archivo xml que round es la misma que la definida, es decir, ic_launcher.png.

Finalmente, pulsaremos “Download” para descargar todos los archivos y formatos, incluyendo el archivo XML de definición. Es cierto que con Cordova tenemos que hacer algunos ajustes con la versión generada, como crear en res/values el archivo colors.xml.

Ahora, para el ícono de la splash screen, tendremos que generarlo a mano con la ayuda de algún programa de dibujo. Debemos indicar los siguientes parámetros en el archivo de configuración de Cordova. La imagen por defecto debería medir 2732×2732 píxeles, pero el logotipo debería estar centrado y medir 1075×1075 píxeles, con un fondo transparente y guardado en formato PNG:

    <preference name="AndroidWindowSplashScreenBackground" value="#062342" />
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/splash-screen-2732-2732.png" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="AutoHideSplashScreen" value="true" />
Exit mobile version