Splashscreen

Mediante el plugin Splashscreen podemos agregar pantallas de carga personalizadas para nuestras aplicaciones Cordova. El manejo de este plugin requiere más codificación a nivel nativo que de tecnología web, desde donde sólo hay que contemplar un par de métodos sencillos (en la práctica, generalmente sólo se utiliza uno, el cual veremos más adelante).

cordova plugin add org.apache.cordova.splashscreen

Instalación

El primer paso será crear un nuevo proyecto de Cordova. Una vez hecho esto, nos situaremos desde consola en el directorio correspondiente del mismo, y ejecutaremos el siguiente comando, para instalar el plugin Splashscreen:

cordova plugin add org.apache.cordova.splashscreen

Antes de continuar, es indispensable ajustar nuestra imagen de carga al formato 9-patch de Android. Esto podemos hacerlo mediante Android Asset Studio. Android trabaja con diferentes resoluciones de pantalla a la hora de procesar imágenes, a saber las más habituales:

    android/screen-hdpi-landscape.png
    android/screen-hdpi-portrait.png
    android/screen-ldpi-landscape.png
    android/screen-ldpi- android/screen-mdpi-landscape.png
    android/screen-mdpi-portrait.png
    android/screen-xhdpi-landscape.png
    android/screen-xhdpi-portrait.png portrait.png

Cargamos la imagen desde nuestro ordenador en la aplicación web, la ajustamos, y podemos descargar un fichero .zip con varias versiones PNG de nuestra imagen, ajustada a las diversas resoluciones estándar de dispositivos Android.

Después tendremos que trasladar estos ficheros al directorio de recursos de nuestro proyecto Android, según las diferentes resoluciones que hayamos obtenido de Asset Studio.

Además, deberemos especificar el nuevo recurso en el fichero config.xml de la raíz del proyecto

<preference name="SplashScreen" value="hwlef9" />  
<preference name="SplashScreenDelay" value="10000" /> 

Donde "hwlef9" equivale al nombre de nuestro fichero sin la extensión y 10000 es el tiempo de duración de la pantalla de carga en milisegundos. La duración por defecto si no se especifica nada es de 3000 ms.

También es aconsejable asegurarnos de que en el fichero res/xml/config.xml se especifica el plugin. Si todos los pasos se han seguido bien, estas etiquetas deben de generarse automáticamente:

Importamos el proyecto de Cordova al entorno de desarrollo de Android, y nos aseguramos de incluir lo siguiente en el fichero .java principal, dentro del método onCreate()

super.setIntegerProperty("splashscreen", R.drawable.hwlef9);
super.loadUrl("file:///android_asset/www/index.html", 3000);

Donde "hwlef9" es el nombre del recurso, tal como lo hemos especificado en config.xml, y 3000 es, una vez más, el tiempo en ms que tarda en desvanecerse la pantalla de carga.

Debemos asegurarnos muy bien de que el recurso figura en el fichero R.java

Hecho esto tan sólo tendremos que preocuparnos, por último, en la aplicación web, de especificar en Javascript que desaparezca la pantalla una vez haya cargado Apache Cordova, para proceder a la visualización de la aplicación en sí. Es decir, escribiremos la siguiente instrucción dentro de la función lanzada por el manejador del evento deviceready.

navigator.splashscreen.hide();