Can't set color of statusbar with cordova-plug

Question

I'm trying to change the color of the native status bar in an ionic app, but I can't get it to work. I've installed cordova-plugin-statusbar, and it installs fine. The following code works perfectly:

if (StatusBar) {
    StatusBar.hide();
}

But trying to use any other of the available functions, for example:

if (StatusBar) {
    StatusBar.backgroundColorByHex('#RRGGBB');
}

doesn't work, the just app uses the standard statusbar.

I've also added <preference name="StatusBarOverlaysWebView" value="true" /> to config.xml, as well as setting it programmatically at runtime.

Cordova is version 5.1.1, Ionic is version 1.5.5 and I'm using Android 21 for testing. Has anyone experienced the same problem or know how to fix it?

Answer 1

See me original solution at Can't get cordova-plugin-statusbar to set color on Android

Add the plugin. Run shell command:

$ cordova plugin add cordova-plugin-statusbar

Edit your config.xml:

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#BE1912" />

'#BE1912' is the default color (on app starts).

Change in run time from your java script code:

if (window.cordova && StatusBar)
{
    StatusBar.backgroundColorByHexString('#BE1912');
}

Answer 2

Could you try removing the status bar plugin and reinstalling like so:

ionic plugin rm org.apache.cordova.statusbar
ionic plugin add https://github.com/apache/cordova-plugin-statusbar.git

The same has been reported at the ionic issue tracker

Answer 3

Gil's solution doesn't work for me (I've a Samsung Galaxy S7 Edge).

onDeviceReady: function () {
    app.receivedEvent('deviceready');
    console.log(StatusBar);
    if (window.cordova && StatusBar) {
        StatusBar.backgroundColorByHexString('#BE1912');
    }
},