Splashscreen

Splashscreen

Displays and hides the application's splash screen.

Methods

Accessing the Feature

As of version 3.0, Cordova implements device-level APIs as plugins. Use the CLI's plugin command, described in The Command-line Interface, to add or remove this feature for a project:

    $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
    $ cordova plugin rm org.apache.cordova.core.splashscreen

These commands apply to all targeted platforms, but modify the platform-specific configuration settings described below:

Some platforms may support this feature without requiring any special configuration. See Platform Support for an overview.

Setup

Android

  1. Copy the splash screen image into the Android project's res/drawable directory. The size for each image should be:

    • xlarge (xhdpi): at least 960 × 720
    • large (hdpi): at least 640 × 480
    • medium (mdpi): at least 470 × 320
    • small (ldpi): at least 426 × 320

    You should use a 9-patch image for your splash screen.

  2. In the onCreate method of the class that extends DroidGap, add the following two lines:

     super.setIntegerProperty("splashscreen", R.drawable.splash);
 super.loadUrl(Config.getStartUrl(), 10000);

    The first line sets the image to display as the splashscreen. If you name your image anything other than splash.png, you need to modify this line. The second line is the normal super.loadUrl line, but it has a second parameter that specifies a timeout value for the splash screen. In this example the splash screen displays for 10 seconds. To dismiss the splash screen once the app receives the deviceready event, call the navigator.splashscreen.hide() method.

iOS

Copy your splash screen images into the iOS project's Resources/splash directory. Only add the images for the devices you want to support, such as iPad or iPhone. The size of each image should be:

splashscreen.show

Displays the splash screen.

navigator.splashscreen.show();

Description

This method displays the application's splash screen.

Supported Platforms

Quick Example

navigator.splashscreen.show();

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Splashscreen Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        navigator.splashscreen.show();
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
  </body>
</html>

splashscreen.hide

Dismiss the splash screen.

navigator.splashscreen.hide();

Description

This method dismisses the application's splash screen.

Supported Platforms

Quick Example

navigator.splashscreen.hide();

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Splashscreen Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        navigator.splashscreen.hide();
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
  </body>
</html>

iOS Quirk

The config.xml file's AutoHideSplashScreen setting must be false. To delay hiding the splash screen for two seconds, add a timer such as the following in the deviceready event handler:

    setTimeout(function() {
        navigator.splashscreen.hide();
    }, 2000);