Splash Screen & Status Bar

The first thing a user sees when opening your app — and the strip of icons and time at the very top of the screen — are both small details that make a big difference to how "native" and polished your app feels. Cordova exposes both through official plugins: cordova-plugin-splashscreen for the launch screen shown while your app boots, and cordova-plugin-statusbar for the color, style, and visibility of the system status bar. This page covers installing both, configuring them in config.xml, and controlling them programmatically from JavaScript.

Installing the Splash Screen Plugin

Add the plugin from the root of your Cordova project:

cordova plugin add cordova-plugin-splashscreen

Once installed, Cordova will automatically show your configured splash image the instant the app process launches, and (by default) automatically hide it a few seconds after the WebView finishes its initial load — no JavaScript required for the basic behavior.

Configuring Splash Images in config.xml

As covered in more depth on the config.xml Deep Dive page, platform-specific visual assets like splash screens are declared inside platform-specific <platform> blocks in config.xml. Each entry points to an image sized for a particular screen density or device class. The exact tags have evolved across Cordova versions and platforms, but conceptually they look like this:

<platform name="android">
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi" />
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi" />
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi" />
</platform>

<platform name="ios">
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960" />
</platform>

Controlling the Splash Screen From JavaScript

Beyond the automatic show/hide behavior, the plugin exposes two methods so you can take manual control — most commonly to keep the splash screen visible until your app has actually finished loading its initial data, rather than showing a blank or half-loaded screen underneath it.

// Keep the splash screen visible manually (set AutoHideSplashScreen to false in config.xml first)
navigator.splashscreen.show();

// Hide it once you're ready -- e.g. after initial data has loaded
navigator.splashscreen.hide();

Installing the Status Bar Plugin

cordova plugin add cordova-plugin-statusbar

This plugin gives you control over the status bar's color, text style (light or dark icons), and whether it overlays your WebView content or reserves its own space above it.

Controlling the Status Bar's Appearance

// Use dark text/icons on a light background
StatusBar.styleDefault();

// Use light (white) text/icons -- for a dark or brand-colored background
StatusBar.styleLightContent();

// Set a specific background color to match your app's branding
StatusBar.backgroundColorByHexString('#000000');

// Hide or show the status bar entirely (e.g. for a full-screen video or game)
StatusBar.hide();
StatusBar.show();

// Control whether the WebView draws underneath the status bar, or below it
StatusBar.overlaysWebView(true);

Full Worked Example: Splash + Status Bar Together

A common real-world pattern: keep the splash screen visible manually until both deviceready has fired and your app's initial data (say, a user profile or a settings fetch) has loaded, then hide the splash screen and immediately set a branded status bar color so there's no visual "flash" of the wrong color underneath.

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

function onDeviceReady() {
    // Set the status bar's branding immediately -- before we even hide the splash screen
    StatusBar.styleLightContent();
    StatusBar.backgroundColorByHexString('#1565c0');
    StatusBar.overlaysWebView(false);

    // Don't hide the splash screen yet -- wait for our own initial data load to finish
    loadInitialAppData(function() {
        navigator.splashscreen.hide();
        showHomeScreen();
    });
}

function loadInitialAppData(callback) {
    // e.g. reading a cached user profile out of localStorage, or an initial API call
    setTimeout(callback, 800); // stand-in for real async loading work
}

Practical Tips