Cordova Plugin SplashScreen

The Splash Screen consists of an image, logo, and the current version of the software that usually appears while launching any application. Microsoft access also shows the splash screen before the database is presented. It is an introduction page that may cover the entire screen of an app. It is used to notify a user that the program is loading. Furthermore, all the image file formats are not supported for all platforms.

To work with the splash screens, you need to use the Splash Screen plugin. This plugin is used to display and hide the splash screen while your app is launching. This plugin is supported by various platforms such as Windows, iOS, Android, and Browser.

Installation

To install the Cordova Splash Screen plugin for your app, you need to type the below command:

You have to follow the below steps to add this plugin in your app:

• First, you have to add the splash images in your particular app folder.
• Then, add the Splash plugin into the config.xml file.
• After that, add Splash images into the config.xml file.
• Also add default Splash image.
• An optional step that changes Splash Screen Time.

Add Splash Images to an app:

Before adding the splash image to your app folder, first you need to create an image. The size and dpi value of an image changes according to the platform. Once you created the image, add that image inside the www folder. You can insert your image anywhere inside the www folder, but it is best to insert inside the img or splash. Also make sure to put the splash image in a separate folder for each platform. It helps to make your app clean.

You have to determine that the default splash screen must be added to the root of the www folder. Also check that the image name must be screen.png. It can only be one default splash image.

Add Splash plugin to config.xml

The next step is to add the plugin by adding the below command to the config.xml file:

Add Splash Images to config.xml

After doing all the above tasks, now it is the time to add a reference of the splash screen images to the config.xml file. There are different sets of attributes for each platform to add the splash images. Here, we have defined the attributes of windows platform that are as follows:
For Windows:

The Windows phone consists of the width and height attribute, which is used to determine the size and orientation of the splash screen. If splash screen is added in the www/res/screen/windows, add the below code in the config.xml file.

Add Default Splash Image:

It is important to add a default splash screen to your app because if you don't add them, none of the splash screen will display. So, make sure that the default splash screen has to be added. When the device size or resolution does not match, the default splash screen is used.

After referencing to all other screen sizes and providing splash screen for the specific platforms, add the below code:

<splash src="screen.png" />

Change Splash Screen Time:

We also need to use another snippet to add the splash screen time in our app. A SplashScreenDelay is used to set the time to appear on the splash screen. The default time is 3000 milliseconds, but we can change the default time by using the preference shown in the below code:

The above code will hide the splash screen after 6 seconds.

Another optional preference can also be used that works for stretching an image to fit in the screen. If the value of the specific preference is set to true, the image will not be stretched to fit in the particular device screen. If it is set to false, the image will be stretched according to the particular device screen.

<preference name = "SplashMaintainAspectRatio" value = "false" />

Preferences:

iOS Quirk

Various preferences are available on the iOS platform to add them to the config.xml file.   

• FadeSplashScreen:

This preference is set to the false value, which prevents the splash screen from fading in and out while changing its display state. It refers to a boolean value that has the default value true.

<preference name="FadeSplashScreen" value = "false"

• FadeSplashScreenDuration:

In this preference, we specify the number of milliseconds for the splash screen fade effect to execute. It refers to a float value that has the default value 500. It should be noted that this preference is included in the SplashScreenDelay. Also note that it should be used only in the start-up of an application.

< preference name="FadeSplashScreenDuration" value="600"/>

• ShowSplashScreenSpinner:

To hide the splash screen spinner, the value of this preference is set to false.

It refers to a boolean value that has the default value true.

< preference name="ShowSplashScreenSpinner" value="false"/>

Android Quirks

You can add the below preferences in the config.xml file:

< preference name = " SplashShowOnlyFirstTime " value = " true|false " />

< preference name = " SplashMaintainAspectRatio " value = " true|false " />

< preference name = " SplashScreenSpinnerColor " value = " white " />

• The SplashShowOnlyFirstTime is an optional preference that shows the splash image only on the application launch. The default value of this preference is
• The SplashMaintainAspectRatio is also an optional If you did not want to stretch your splash screen to fit in the device screen, you have to set this preference value to true. This method should be used when you didn't want to distort your splash screen image.
  When the screen orientation changes, then this plugin reloads the splash screen. It helps to specify various splash screen images for different screen orientations.
• The SplashScreenSpinnerColor is also an optional preference that is ignored when you don't set it. In Android 5.0+ devices, it is used to change the color of the spinner.

Windows Quirks:

• SplashScreenSpinnerColor: This preference refers to a string that consists of a default value to system accent color. Its value is from hash, rgb notation, or CSS color name.

<preference name= "SplashScreenSpinnerColor" value= "Red" />

• SplashScreenBackgroundColor: This preference refers to a string that consists of a default value to #464646. The value is from hex notation.

<preference name= "SplashScreenBackgroundColor" value= "0xFFFFFFFF" />

Methods

There are some methods used for the SplashScreen plugin, which are as follows:

• hide: This method is used to dismiss the splash screen.

Syntax:

Example:

• show

This method is used to display the splash screen.

Syntax:

Until the application has started and the deviceready event has fired, the application cannot call this method.