Use Custom Splash Screens

Before you start

To use a custom image as your app's native splash screen you need to create .png versions of your custom image for all the Android/iOS splash screen sizes.

Customizing the native splash screen

To use a custom image as your app's native splash screen follow these steps:

1. Create a ZIP file containing all the .png versions of your custom image for all the Android/iOS splash screen sizes.

2. In the Data tab of your app's main Module, right-click the Resources folder and import the ZIP file as a Resource.

   

   Leave the Deploy Action property as Do Nothing.

3. Select the application module, go to its properties and add the Splash Screens JSON template to the Extensibility Configurations property:

   

4. In the Extensibility Configurations, replace <path_to_resources_file> with the name of the ZIP file and replace each one of the <path_to_splash_screen_image> with the correspondent splash screen image location inside the ZIP file.

   

   Ensure that you define the splash screen and the image path for all sizes and densities available, otherwise, you'll get an error when generating your mobile application.

5. To make this change available to users, publish and generate a new mobile application package and distribute it.

   

Further customization of splash screen behavior

You can further customize the behavior of the native splash screen by adding new preferences, in the Extensibility Configurations, using the following syntax:

{
    "preferences": {
        "<target-platform>": [
            {
                "name": "<preference>",
                "value": "<preference-value>"
            }
        ]
    }
}

Where <target-platform> is the target mobile platform that can be set as global, android or ios. Check the Splash screen available preferences table for available values for <preference> and <preference-value>.

Devices screen sizes and densities

Splash screens JSON Template

In the template below, <path_to_resources_file> is the path to the ZIP file and each <path_to_splash_screen_image> is the path to the .png version of your custom image specific to certain splash screen size.
The snippet inside the "splashcreens" tag defines the splash screen image location in the ZIP file for every splash screen size for both platform ("ios" and "android").
The last part of the template uses a "preferences" tag to set a new preference, "SplashScreenDelay", that applies to both mobile platforms ("global" tag), and that displays the native splash screen for 3 seconds before automatically hiding it. To make sure the native splash screen is shown, you must define this preference since the default value for "SplashScreenDelay" is 0.

{
    "resource" : "<path_to_resources_file>",
    "splashscreens" : {
        "ios" : [{
            "resource" : "<path_to_splash_screen_image>",
            "width" : "320",
            "height" : "480"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "640",
            "height" : "1136"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "640",
            "height" : "960"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "750",
            "height" : "1334"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "1242",
            "height" : "2208"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "2208",
            "height" : "1242"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "1125",
            "height" : "2436"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "2436",
            "height" : "1125"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "768",
            "height" : "1024"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "1024",
            "height" : "768"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "1536",
            "height" : "2048"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "width" : "2048",
            "height" : "1536"
        }],
        "android" : [{
            "resource" : "<path_to_splash_screen_image>",
            "density" : "port-ldpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "port-mdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "port-hdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "port-xhdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "port-xxhdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "port-xxxhdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "land-ldpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "land-mdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "land-hdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "land-xhdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "land-xxhdpi"
        },
        {
            "resource" : "<path_to_splash_screen_image>",
            "density" : "land-xxxhdpi"
        }]
    },
    "preferences": {
        "global": [
            {
                "name": "SplashScreenDelay",
                "value": "3000"
            }
        ]
    }
}

Splash screen available preferences

See the descriptions of the available splash screen preferences to check how they work.