Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to use statusbar plugin in phonegap

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 683
    Comment on it

    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 );

    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.
    • It will show the statusbar.

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

    if (StatusBar.isVisible) {
        // do something


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: