Cómo cambiar el color de la barra de estado de Android Lollipop y Marshmallow en un proyecto Cordova

Android 5.0 (Lollipop) introdujo el diseño Material que automaticamente le dará un color a la barra de estado basado en el color proporcionado en la opción ColorPrimaryDark del tema de tu aplicación. Esto además es soportado en dispositivos con versiones inferiores a android 5.0 gracias a la librería support-v7-appcompat iniciando de la versión 21, sin embargo con cordova, esta barra de estado será negra (lollipop) o cian claro. Para cambiar este comportamiento vamos a usar un plugin.

Nota: las directrices de la versión de Android 5+ indican que debes usar un color diferente al color principal de tu aplicación (normalmente más oscuro) para la barra de estado.

Plataformas soportadas

Como vamos a usar un plugin, debes saber que además proporciona soporte no solo para android si no tambien:

  • iOS.
  • Android >=5.
  • Windows Phone 7.
  • Windows Phone 8.
  • Windows Phone 8.1.

Instalando el plugin

Para cambiar el color de la barra de estado de Android, vamos a usar el plugin cordova-plugin-statusbar. Para ello, ejecuta el siguiente comando en tu consola de comandos (donde cordova este disponible):

cordova plugin add cordova-plugin-statusbar

En caso de que trabajes con una opción antigua de corodva, puedes instalar el plugin usando el id deprecado del repositorio de cordova.

cordova plugin add org.apache.cordova.statusbar

Usando el plugin

Para cambiar el color, necesitamos agregar el siguiente tag en el archivo config.xml de tu proyecto.

<preference name="StatusBarBackgroundColor" value="#000000" />

This will be valid If you need to change the color dinamically you can use the backgroundColorByHexString function or backgroundColorByName. Just be sure to wrap it inside the onDeviceReady event.

document.addEventListener("deviceready",function(){
  StatusBar.backgroundColorByHexString("#303F9F");
},false);

El siguiente ejemplo denería colocar la barra de estado al siguiente color:

Cordova statusbar

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable