Icono y pantalla de bienvenida

El objetivo

Como habremos observado, PhoneGap Build utiliza un icono por defecto al compilar nuestras aplicaciones. En este ejercicio vamos a ver cómo podemos cambiar el icono de nuestra aplicación de lista de tareas fácilmente y sin necesidad de instalar ningún software adicional en nuestros equipos. Además, también veremos cómo añadir una pantalla de bienvenida, lo que sin duda le dará un toque más profesional a nuestra aplicación.

El icono nos servirá para distinguir claramente cuál es nuestra app de entre todas las instaladas en el móvil, pudiendo elegir una imagen cualquiera que podemos descargar de Internet, o también diseñándola nosotros mismos.

La pantalla de bienvenida se visualizará al arrancar la aplicación, y permanecerá unos segundos, mientras el móvil carga nuestra app, o incluso se puede prorrogar el tiempo que nosotros decidamos.

Por ejemplo, yo he buscado un par de imágenes etiquetadas para reutilización, y he escogido las siguientes como icono y pantalla de bienvenida respectivamente:

El archivo config.xml

Deberemos incluir las opciones específicas en nuestro archivo config.xml para que PhoneGap Build pueda reconocer y enlazar ambos archivos. Además, deberemos añadir una línea con <plugin name="cordova-plugin-splashscreen" /> para poder utilizar el plugin para mostrar la pantalla de bienvenida:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    ...
    <plugin name="cordova-plugin-splashscreen" />
    ...

    <icon src="icon.png" />
    <splash src="screen.png" />
</widget>

Como opciones adicionales podemos configurar el tiempo que permanece mostrándose la pantalla de bienvenida. El valor por defecto es de tres segundos. Por ejemplo, con la siguiente línea lo establecemos a cinco segundos para que la podamos ver un poco mejor:

<preference name="SplashScreenDelay" value="5000" />

También debemos tener en cuenta que por defecto, la pantalla de bienvenida sólo se mostrará la primera vez que se abra la aplicación. Una vez se haya ejecutado la app, para volver a visualizar la imagen de nuevo, deberemos cerrar la aplicación por completo y volverla a abrir. Nosotros en este ejemplo vamos a configurar dicha opción para que se muestre siempre:

<preference name="SplashShowOnlyFirstTime" value="false" />

También debemos tener en cuenta que por simplificar, estamos utilizando únicamente una imagen como pantalla de bienvenida. Para asegurar que se ajuste automáticamente al tamaño de la pantalla, independientemente de la orientación y el tamaño del dispositivo, activaremos además la opción específica para que cambie la proporción de la imagen automáticamente:

<preference name="SplashMaintainAspectRatio" value="false" />

Y por último, para asegurar que no tenemos problema con nuevos dispositivos, recomendamos añadir también la siguiente opción para utilizar la última versión del compilador hasta la fecha:

<preference name="phonegap-version" value="cli-9.0.0" />

En las páginas oficiales de Cordova podemos obtener toda la documentación:

• Customize Icons
• Cordova plugin splashscreen

En resumen, el contenido del archivo config.xml podría ser el siguiente:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.fernandoruizrico.todo"
    versionCode = "1"
    version     = "0.0.1" >

    <name>ToDo!</name>

    <description>
        ToDo List.
    </description>

    <author href="https://fernandoruizrico.com" email="[email protected]">
        Fernando Ruiz Rico
    </author>

    <access origin="*" />
    <plugin name="cordova-plugin-whitelist" />
    <plugin name="cordova-plugin-vibration" />
    <plugin name="cordova-plugin-splashscreen" />
    <plugin name="cordova-plugin-x-socialsharing" spec="5.4.0" />

    <icon src="icon.png" />
    <splash src="splash.png" />

    <preference name="SplashScreenDelay" value="5000" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashMaintainAspectRatio" value="false" />

    <preference name="phonegap-version" value="cli-9.0.0" />
</widget>

El archivo ZIP

Finalmente deberemos incluir en el fichero ZIP que subamos a PhoneGap las dos imágenes que hayamos elegido como icono y pantalla de bienvenida (icon.png y splash.png en nuestro ejemplo, aunque podríamos haber utilizado cualquier otro nombre). De esta forma, el archivo ZIP contendría los siguientes ficheros:

• index.html
• todo.js
• config.xml
• icon.png
• splash.png

El resultado