In this post, you will learn to use statusbar plugin of cordova. The StatusBar object can customize Android and iOS statusbar.

Installing the plugin:
You should have cordova 5.0+ to install its stable version by the following command:
 

cordova plugin add cordova-plugin-statusbar

Using the plugin:
There are two changes that you can do in your config.xml file for statusbar:
StatusBarOverlaysWebView : This is a boolean value. You can set it to false to show your app content below the statusbar.
 

<preference name="StatusBarOverlaysWebView" value="true" />

StatusBarBackgroundColor : You can change the color of the statusbar by setting hex value in your preferences. By default its value is #000000.
 

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

You can also change the same thing by calling the methods in your js file on deviceready function.
 

StatusBar.overlaysWebView( false );
StatusBar.backgroundColorByHexString('#209dc2');

There are some other methods which you can use according to your need in the application:

• StatusBar.styleDefault: it shows default statusbar with light background and dark text.
• StatusBar.styleLightContent: It shows light text for dark backgrounds.
• StatusBar.styleBlackTranslucent: It also shows light text for dark backgrounds.
• StatusBar.styleBlackOpaque: It is also used for dark background.
• StatusBar.backgroundColorByName: It can change statusbar color by name.
• StatusBar.backgroundColorByHexString: It can change color by hex value.
• StatusBar.hide: It will hide the statusbar.
• StatusBar.show: It will show the statusbar.

StatusBar.isVisible:
It is the property of statusbar to check whether statusbar is visible or not.
 

if (StatusBar.isVisible) {
    // do something
}