In this tutorial I will explain how to add splash screen to your PhoneGap apps using the phonegap build service. We will take a look at how you can add splash screen for all different screen resolutions.
I have already have two other post showing you
- How u can add splashscreens for phongap CLI and also
- How to add splash screen for ionic framework apps.
What is a Splash Screen ?
A splash screen is nothing but an image that shows up before you app loads. A thing to note here is that splash screens show up before the app loads, your app wont load in the background as the splash screen is being shown but it will load after the splash screen has been hidden. Keep in mind that not all image file formats will work for all platforms, generally speaking .png works for all platforms but as it is mentioned in the documentation windows phone splash screen must be .jpg, we will discuss more on file formats later in this post as we move along.
For Adding splash screens we are to follow these steps:
- Add splash images to our project folder
- Adding Splash plugin to config.xml file
- Adding Splash images to config.xml file
- Adding Default Splash image
- Changing Splash Screen Time (Optional)
1) Add Splash Images To Project
Before we go and add the images to our project folder we need to create the images first. Depending on your platform the size of the images and the dpi value will change. You can take a quick look at the documentation for phonegap here and figure out what kind of images you need to make.
After the images have been created we can add them inside the www folder. You can add them anywhere but it is best to add them inside a folder called img or splash or something else, also make sure keep splash image for each platform in a separate folder that will keep your app clean. It is best to give the images descriptive names such as land-hdpi.png or 750×2048.png this will make it easier for us to choose the correct image when we reference the image in our config.xml file.
For splash screens to work the default splash screen is necessary. Make sure that you have a default splash screen image added to the root of the www folder and that image has to be named as splash.png. Also there can be only one default splash image.
2) Adding Splash Plugin To config.xml
Let’s say what we have the following sample config.xml file that we are working with.
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.pointdeveloper.myapp"
versionCode = "1"
version = "1.0.0" >
<!-- versionCode is Android only -->
<!-- version is in major.minor.patch format -->
<name>PhoneGap Example App</name>
An example for phonegap build app which wont show up in the playstore.
<author href="https://YourWebsite.com" email="[email protected]">
Name Of The Author
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="KeepRunning" value="false"/>
<preference name="SplashScreen" value="screen"/>
<preference name="android-build-tool" value="gradle" />
<plugin name="cordova-plugin-whitelist" source="npm" />
<plugin name="cordova-plugin-x-socialsharing" source="npm" />
<plugin name="cordova-plugin-inappbrowser" source="npm"/>
<plugin spec="https://github.com/floatinghotpot/cordova-admob-pro" source="git" />
<plugin name="cordova-plugin-network-information" source="npm" />
<plugin name="cordova-universal-clipboard" source="npm"/>
<plugin name="phonegap-plugin-barcodescanner" source="npm"/>
<plugin name="cordova-plugin-x-toast" />
We need to add the plugin first by adding the following to the config.xml file
<plugin name="cordova-plugin-splashscreen" source="npm" />
3) Adding Splash Images To config.xml File
So far we added the images to our project www folder and we also have added the default splash.png image at the root of our www folder. We have also added the Cordova Splash Screen plugin.
Now it’s time that we add reference to the splash screen images to the config.xml file as well. Each platform has different set for attributes that it need to add splash screens, let’s take a lot at them one by one.
Here let’s accume that we have our splash screens in www/res/screen/android folder, so we need to add the following
<splash platform="android" qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
<splash platform="android" qualifier="land-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="land-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="land-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="land-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
Notice here that we are setting the qualifier here in for portrait as well as landscape. The order of the splash screen has to be as shown which is in increasing order or screen size / resolution. You can get the full list of qualifiers for android form here.
For iOS image sizes and orientation are determined by the
height attribute. Assuming that we have our splash screen for iOS in www/res/screen/ios folder we can set splash screen by adding the following
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/screen/ios/[email protected]~ipad.png" width="1536" height="2048"/>
<splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/screen/ios/[email protected]~ipad.png" width="2048" height="1536"/>
<splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
<splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
The above code is taken form the Cordova Splash screen documentation here.
Note here that we are wrapping the splash screen in
<platform> tag. Instead of adding the
<platform> tag we can also add the attribute
platform="ios" as we saw when we added splash screens for Android.
Windows phones also have the size and the orientation of the splash screen determined by the
height attribute. If we have our splash screen for windows in www/res/screen/windows we can add the following to our config.xml file
<splash platform="windows" src="res/screen/windows/splashImage.png" width="1152" height="1920"/>
4) Adding Default Splash Image
If you don’t add a Default splash screen none of the splash screen added above will show up so make sure that you add a default splashscreen. A default splash screen is useful when the device size or resolution are not matching the splash screen images we provided. In that case we would like to show a default image.
Place the splash screen at the root of you app i.e, in the www folder and make sure to name it as splash.png
Then add the following to the config.xml after the reference to all other screen sizes and platform specific splash screens
<splash src="splash.png" />
5) Changing Splash Screen Time
The default time a splash screen appears is for 3000 milliseconds. We can change the that time adding the following preference as shown
<preference name="SplashScreenDelay" value="5000" />
You can read more about other preference setting for splash screens in the documentation here.
Splash screens are a great way to add that extra bling to you app and make it look more appealing. Keep in mind that setting splash screen to appear for a long time that 3 seconds can actually annoy the user. Also make sure that you have all your images organized in proper folder structure otherwise things can get really messy real quick. And don’t forget to add the default splash screen after you have added all other splash screen in you config.xml file.
Watch Video Tutorial Here: