# PhoneGap Documentation

# Splashscreen

> Displays and hides the application's splash screen.

## Methods

- splashscreen.show
- splashscreen.hide

## Permissions

### Android

#### app/res/xml/config.xml

    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>

### iOS

#### config.xml

    <plugin name="SplashScreen" value="CDVSplashScreen" />

## 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:

- Default-568h@2x~iphone.png (640x1136 pixels)
- Default-Landscape@2x~ipad.png (2048x1496 pixels)
- Default-Landscape~ipad.png (1024x748 pixels)
- Default-Portrait@2x~ipad.png (1536x2008 pixels)
- Default-Portrait~ipad.png (768x1004 pixels)
- Default@2x~iphone.png (640x960 pixels)
- Default~iphone.png (320x480 pixels)

# splashscreen.show

Displays the splash screen.

    navigator.splashscreen.show();

## Description

This method displays the application's splash screen.

## Supported Platforms

- Android
- iOS

## Quick Example

    navigator.splashscreen.show();

## Full Example

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

        <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.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

- Android
- iOS

## Quick Example

    navigator.splashscreen.hide();

## Full Example

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

        <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.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 setting for `AutoHideSplashScreen` 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);