# Cordova SplashScreen Review

# Exporting Your Splashscreens

Once you have created your Splashscreens in both portrait and landscape orientations, you can use Photoshop to automate the export of those images for different resolutions.

# Adding the Splashscreens to Your Cordova Project

Once you have created the images and saved them inside your project folder then you will want to add the splashscreen plugin and add the links to your images inside your config.xml file.

To add the splashscreen plugin to the project.

cordova plugin add cordova-plugin-splashscreen

Full reference for the Splashscreen plugin (opens new window)

To add the splashscreen image links to the config.xml file we add the <splash> elements inside the <platform> element. These paths are all relative to the root of the project.

<platform name="android">
  <!-- splash and icon  -->
  <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
  <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
  <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>

1
2
3
4
5
6
7

This video is about adding Launcher icons but the process of adding the launcher icon image links is the same for the Splashscreen images.

Finally, you can add settings to your config.xml file to control things like how long the Splashscreen image will be shown at start up. These settings, just like the links to the images, should be inside the <platform name="android"> element.

<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="3000" />

1
2

Back to Week Homepage