cordova-plugin-navigationbar-color

The NavigationBar object provides some functions to control the Android device navigation bar.

Installation

cordova plugin add cordova-plugin-navigationbar-color

Preferences

config.xml

NavigationBarBackgroundColor (color hex string, default value #000000). Color of navigation bar.

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

NavigationBarLight (boolean, defaults to false). Change the color of the buttons in the navigation bar to black, use in light colors of the navigation bar (Android 8.0 or higher).

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

NavigationBarTransparent (boolean, defaults to false). Makes the navigation bar transparent and overlay it with the webview (Android 11.0 or higher).

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

Methods

This plugin defines global NavigationBar object.

Although in the global scope, it is not available until after the deviceready event.

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady()
{
    console.log(NavigationBar);
}

NavigationBar.backgroundColorByHexString

Set color of navigation bar by hex string.

NavigationBar.backgroundColorByHexString(String colorHex, Boolean lightNavigationBar = false, Boolean transparentNavigationBar = false);

colorHex Color hex string. Set the color of navigation bar.
lightNavigationBar Change the color of the buttons in the navigation bar to black, use in light colors of the navigation bar (Android 8.0 or higher).
transparentNavigationBar Makes the navigation bar transparent and overlay it with the webview (Android 11.0 or higher).

NavigationBar.backgroundColorByName

Set color of navigation bar by color name.

NavigationBar.backgroundColorByName(String colorName, Boolean lightNavigationBar = false, Boolean transparentNavigationBar = false);

colorName Color name. Set the color of navigation bar.
- Possible values
- black: Equals #000000
- darkGray: Equals #A9A9A9
- lightGray: Equals #D3D3D3
- white: Equals #FFFFFF
- gray: Equals #808080
- red: Equals #FF0000
- green: Equals #00FF00
- blue: Equals #0000FF
- cyan: Equals #00FFFF
- yellow: Equals #FFFF00
- magenta: Equals #FF00FF
- orange: Equals #FFA500
- purple: Equals #800080
- brown: Equals #A52A2A
lightNavigationBar Change the color of the buttons in the navigation bar to black, use in light colors of the navigation bar (Android 8.0 or higher).
transparentNavigationBar Makes the navigation bar transparent and overlay it with the webview (Android 11.0 or higher).

NavigationBar.size

Get the width, height and position of the navigation bar, these values can change depending on whether the device is in portrait or landscape, you can use window.addEventListener("resize", yourFunction); to always have the navigation bar size updated.

NavigationBar.size(function(size) {
    size = {
        width: int,
        height: int,
        widthInPixels: int,
        heightInPixels: int,
        position: string, // bottom, left and right
    };
});

NavigationBar.hide

Hide the navigation bar.

NavigationBar.hide();

NavigationBar.show

Shows the navigation bar.

NavigationBar.show();

ollm/cordova-plugin-navigationbar