Aprende a cambiar el color del encabezado de su aplicación híbrida en la vista de aplicaciones recientes en Android.

De forma predeterminada, una aplicación cordova en Android Lollipop (o versiones principales) tendrá un color azul claro ( HEX: #58acd1, RGB: rgb(88, 172, 209),HSL: hsl(198, 57%, 58%)) como color predeterminado y no hay forma de cambiarlo en nuestro archivo config.xml.

Cordova header bar

Sin embargo, aún puede cambiar el color con un complemento. En este caso estamos hablando de cordova-plugin-headercolor, que le permite cambiar el color de la barra de encabezado fácilmente usando Javascript y proporcionando un color hexadecimal (HEX).

Requisitos

Para lograr nuestro objetivo, necesitaremos cordova-plugin-headercolor en nuestro proyecto. Agregue el complemento usando el siguiente comando:

cordova plugin add https://github.com/tomloprod/cordova-plugin-headercolor

Después de la instalación, el  window.plugins.headerColor.tint("#hexColorHere")método estará disponible en la ventana (después del evento deviceready). Puede leer más sobre este complemento en el repositorio de github aquí .

Implementación

El objeto headerColor se agregará a la variable global window.plugins después del evento deviceready de cordova.

Agregue un oyente listo para el dispositivo (si no tiene ninguno) y use el método tint de la propiedad headerColor. Este método espera una cadena hexadecimal identificada como el color que desea para el encabezado de la aplicación.

document.addEventListener('deviceready', function(){
    // Change the color
    window.plugins.headerColor.tint("#becb29");
}, false);

Ahora, cree su aplicación usando cordova run android y vea el nuevo color en la vista de aplicaciones recientes.

Cordova custom header bar color


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores