iOS status Bar in phonegap

Posted By Akhil Dhiman | 22-Jan-2015

iOS status Bar in Phonegap

While running PhoneGap app on iOS I found out that the status bar is creating issue because now my app was running in full screen and status bar is floating on the app. But now cordova giving support to add status bar in iOS Applications.

 

Plugin to use:
I used plugin named Cordova StatusBar Plugin you can use the following link to check the plugin.
http://plugins.cordova.io/#/package/org.apache.cordova.statusbar

To add this plugin in your project follow the following procedure.
Using terminal go in your project directory, from inside your cordova project you have to enter the following command.

cordova plugin add org.apache.cordova.statusbar
 

Methods used to apply statusbar
This plugin gives us a global object name StatusBar
we need to call the statusbar code in deviceready event

Below are the methods used to customized status bar

 StatusBar.overlaysWebView
StatusBar.styleDefault
StatusBar.backgroundColorByName
StatusBar.backgroundColorByHexString
StatusBar.hide
StatusBar.show
 
  • StatusBar.overlaysWebView
We need to set StatusBar.overlaysWebView to false to initialize status bar in iOS 7 and above like in iOS 6.
 StatusBar.overlaysWebView(false);
 
  • StatusBar.styleDefault
It is used to set status bar to default.
 StatusBar.styleDefault();
 
  • StatusBar.backgroundColorByName
This used to set the color of status bar by color names.
 StatusBar.backgroundColorByName();
 
  • StatusBar.backgroundColorByName
This is used to set status bar by color codes.
 StatusBar.backgroundColorByName("#CC99FF");
 
  • StatusBar.hide
This method is used to hide the status bar.
 StatusBar.hide();
 
  • StatusBar.show
This method is used to show status bar.
 StatusBar.show();
 

Apart from all this plugin gives you a global method to check weather status bar is visible or not and you can perform any operations.

 
if(StatusBar.isVisible){

}
 

 

Thanks

Request for Proposal

Recaptcha is required.

Sending message..