Skip to main content

How To Add Splash Screen To PhoneGap Apps With Phonegap Build

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

  1. How u can add splashscreens for phongap CLI and also
  2. 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:

  1. Add splash images to our project folder
  2. Adding Splash plugin to config.xml file
  3. Adding Splash images to config.xml file
  4. Adding Default Splash image
  5. 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.

 

We need to add the plugin first by adding the following to the config.xml file

 

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.

For Android

Here let’s accume that we have our splash screens in www/res/screen/android folder, so we need to add the following

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

For iOS image sizes and orientation are determined by the width and 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

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.

 

For Windows

Windows phones also have the size and the orientation of the splash screen determined by the width and 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

 

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

 

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

You can read more about other preference setting for splash screens in the documentation here.

Conclusion

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:

 

Full Course Curriculum : Click here

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: