📘

Set default styling options and Light/Dark mode for the device status bar while your app is open. When the status bar is in Light mode it will display with black text, in Dark mode white text, in Auto mode it will follow the device Light/Dark mode setting. You may also customize and dynamically set the status bar visibility and style during runtime from your website using the Median Javascript Bridge.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/status-bar/

Configuration Options

The following parameters are available to customize the status bar appearance:

• style: 'light', 'dark' or 'auto'. Sets the text and icon colors in the status bar. When the status bar is in Light mode it will display with black text, in Dark mode white text, in Auto mode it will follow the device Light/Dark mode setting.
• color: RRBBGG or AARRBBGG format with hex values. Sets the status bar to a solid color. Use '00000000' for completely transparent.
• overlay: true or false. If it's set to true, web content will extend underneath the status bar. And if it's set to false (default behavior), web content will start below the bottom of the status bar.
• blur (iOS only): true or false. If it's set to true, a "blur" effect is applied in the status bar color. And if it's set to false (default behavior), no "blur" effect is applied and the status bar color remains the same as specified in the color parameter.

🚧

Overlay setting on Android

With the Overlay setting enabled on Android the keyboard will overlay on top of your web content which can cause issues for users completing forms. If you use forms in your app consider two solutions to improve UX.

1. Disable the Overlay setting via the JavaScript Bridge when showing a page that includes forms.
2. Make use of the keyboard listener functions to disable/enable the Overlay setting via the JavaScript Bridge when the keyboard is active/inactive.

Set Status Bar at Runtime via Median JavaScript Bridge

Automatically Match Status Bar Color to Web

To automatically detect the background color of your webpage and set the status bar color to correspond, run the following helper function:

↔️

Median JavaScript Bridge

JavaScript

function median_library_ready(){
  median_match_statusbar_to_body_background_color();
}

Set Status Bar dynamically

You can use the Median JavaScript bridge commands below to apply styles to the status bar at runtime. This may be useful for apps that combine the display of different content types (eg written content, videos and games).

The example code below creates a red status bar with 50% alpha, white icons, and have the web content extend underneath the status bar.

↔️Median JavaScript Bridge

JavaScript

// Dynamically
if (navigator.userAgent.indexOf('median') > -1) {
  median.statusbar.set({
    'style':'light',
    'color':'80ff0000',
    'overlay':true,
    'blur': true // optional - iOS only 
  });
}

// Or on page load
function median_library_ready(){
  median.statusbar.set({
    'style':'light',
    'color':'80ff0000',
    'overlay':true,
    'blur': true // optional - iOS only 
  });
}