Change Android Statusbar color In Cordova

Question

I want to change the Status bar color in Android (I'm using 6.0 for testing). I tried the statusbar plugin and all the solutions I found for it but nothing worked.

This is included in my config.xml <widget>:

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

My index.js uncludes:

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

Added the plugin per package name and github repo.

Nothing worked so far...

Thanks in advance! :)

Answer 1

Statusbar plugin will work.Remove these lines from config.xml

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

And write StatusBar.backgroundColorByHexString('#3399FF'); inside deviceready like following

document.addEventListener('deviceready', function(){
StatusBar.backgroundColorByHexString('#3399FF');});

Answer 2

I just included the following preferences in config.xml and is working now:

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#5b2e90" />
<preference name="StatusBarStyle" value="lightcontent" />

Answer 3

Mention the below code in index.html( app's starting page )
Note:- No need to mention in entire Cordova Application , Just mention in the index.html ( app's starting page )

<script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
             document.addEventListener("deviceready", onDeviceReady, false); 


        });

        function onDeviceReady() {

            StatusBar.overlaysWebView(false);
            StatusBar.backgroundColorByHexString("#333"); // => #333333

             StatusBar.styleLightContent();
            console.log(statusbar);

        }
</script>