You can use the StatusBar API on Android and iOS devices to control the background color, foreground color and visibility of the operating system's status bar. In a mulitapp scenario, settings are applied per web application: at any given time, the client uses settings defined for the web application that is currently displayed. Also, if the topmost application changes the settings, the change is reflected immediately.
The object can be accessed using the window.launchbox.StatusBar
reference.
Properties of the StatusBar
object are listed below:
Name | Description | Type |
---|---|---|
backgroundColor |
A property to control the status bar's background color. It accepts color values in hexadecimal rgb format, e.g. "#FF00FF". By default it is set to "#000000" on Android, and "#FFFFFF" on iOS. |
string |
foregroundColor | A property to control the status bar's foreground color. It accepts one of the values
from the ForegroundColor enum. By
default it is set to the Light value on Android, and the
Dark value on iOS. |
string |
visible |
A property to control status bar's visibility. If set to "false", the status bar is not visible. By default it is set to "true". |
boolean |
The backgroundColor property works for Android in versions 5.0 and newer, while the foregroundColor property works for Android in versions 6.0 and newer. On Android devices older than 5.0, getting the backgroundColor value will return a default value, setting it will result in a DOM error. On Android devices older than 6.0, getting the foregroundColor value will return a default value, setting it will result in a DOM error.
On iOS, it is recommended approach is to keep a splash screen shown until the first web
view calls the onLaunchboxLoaded
, to avoid the the status bar
flashing with default colors.
The StatusBar API can throw a DOM error to denote that either the requested functionality is not supported, or the argument that has been passed is invalid. To deal with such errors, consider adding a piece of code to your application, similar to this one:
try { window.launchbox.StatusBar.backgroundColor = "#FF00FF"; } catch (error) { console.log("Could not set status bar background color: " + error.message); } try { window.launchbox.StatusBar.foregroundColor = launchbox.StatusBar.ForegroundColor.Dark; } catch (error) { console.log("Could not set status bar foreground color: " + error.message); } window.launchbox.StatusBar.visible = true;