Status bar Material Design
Más de una vez hemos visto como juegan las distintas aplicaciones con el Status Bar cambiando ese negro aburrido que tanto desentona en la mayoría de nuestras aplicaciones y que muchos desarrolladores optan por ocultarla en sus proyectos.
Desde la salida de Android L, Google ha añadido muchas de características nuevas en su interfaz de Android estableciendo una Guía de Diseño para emplear en estos dispositivos, una de ellas ha sido la posibilidad de cambiar el color de la barra de estado, o como se dice en el mundo de las aplicaciones, StatusBar.
Este tutorial nos va a servir para implementar una función que podamos reutilizar a lo largo de nuestro código, y sin importar el color que tengamos establecido en una sección vamos a poder simular este efecto sin tener que buscar el código exacto a mano.
Instalación
Es necesario contar en nuestro proyecto con el plugin de la barra de estado (cordova status bar), para poder cambiar el color de esta cuando deseemos.
$ cordova plugin add cordova-plugin-statusbar
function materialStatusBar(color, percent) { var R, G, B, RR, GG, BB; R = parseInt(color.substring(1, 3), 16); G = parseInt(color.substring(3, 5), 16); B = parseInt(color.substring(5, 7), 16); R = parseInt(R * (100 + percent) / 100); G = parseInt(G * (100 + percent) / 100); B = parseInt(B * (100 + percent) / 100); R = (R < 255) ? R : 255; G = (G < 255) ? G : 255; B = (B < 255) ? B : 255; RR = ((R.toString(16).length == 1) ? "0" + R.toString(16) : R.toString(16)); GG = ((G.toString(16).length == 1) ? "0" + G.toString(16) : G.toString(16)); BB = ((B.toString(16).length == 1) ? "0" + B.toString(16) : B.toString(16)); if (window.StatusBar) { StatusBar.backgroundColorByHexString("#" + RR + GG + BB); } }
Leave a Reply