📊

Status Bar

cordova-plugin-statusbar

iOS Android

This Apache Cordova plugin puts the device's native status bar under your control. You can set its background color, switch the text and icons between light and dark styles, hide or show it, and decide whether the web view draws underneath it — so the bar blends seamlessly with your app's header.

Installation

Add the plugin to your Cordova project from the command line:

terminal

cordova plugin add cordova-plugin-statusbar

Methods and properties

The plugin attaches a global StatusBar object. Use its members after deviceready has fired:

Member	Description
`StatusBar.overlaysWebView(bool)`	Controls whether the web view extends underneath the status bar (iOS).
`StatusBar.styleDefault()`	Uses dark text — best for light status bar backgrounds.
`StatusBar.styleLightContent()`	Uses light text — best for dark status bar backgrounds.
`StatusBar.backgroundColorByName(colorName)`	Sets the background by named color, for example `"black"`.
`StatusBar.backgroundColorByHexString(hex)`	Sets the background by hex value, for example `"#6c4bf6"`.
`StatusBar.hide()` / `StatusBar.show()`	Hides or shows the status bar.
`StatusBar.isVisible`	A Boolean reporting whether the status bar is currently visible.

Setting defaults in config.xml

You can also configure the starting appearance in config.xml with preferences such as StatusBarBackgroundColor and StatusBarStyle:

config.xml

<preference name="StatusBarBackgroundColor" value="#6c4bf6" />
<preference name="StatusBarStyle" value="lightcontent" />

Usage example

Tint the bar to match your app's accent color and switch to light text:

www/js/app.js

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

function onReady() {
  StatusBar.backgroundColorByHexString("#6c4bf6");
  StatusBar.styleLightContent();
}

Tips

Call StatusBar methods after deviceready — the object isn't ready before then.
Match the bar's color to your app header so the two blend into a single surface.
On dark headers, use styleLightContent so the clock and status icons stay readable.

📚 Source: the technical reference on this page (the methods, properties, config preferences and the install command) is based on the official Apache Cordova statusbar documentation. Descriptions and examples have been rewritten in DedrisFramework's own words. Apache Cordova documentation is published by the Apache Software Foundation under the Apache License 2.0.

← Back to plugins Start a project