How To Add Splash Screen To PhoneGap Apps With Phonegap Build

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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. :-)

  • Kwesi

    Please, i want to know. Can you use plugins on the free plan.?

  • Ritesh Srivastava

    Now file names are not required to be splash.png and also default splash image need not be placed at top.

  • Pingback: How to add splash screen to Cordova Phonegap apps using the CLI - pointDeveloper.com()

  • Shrikant

    hii, i am shrikant, i watched some video on your site and i create a signed apk(with phone gap build) of my ionic project. but i was add some plugins like localnofication, spashscreen, adbuddiz and hardwareback button but it all pulgin work correctly in debug apk, but when i create signed apk with phone gap build it all not working but my application other all code work correctly please help me what i doing wrong.

  • Shrikant

    how to add plugins in configxml for build signed apk for ionic project with phonegap build

  • sankari

    I followed your steps to display splash screen with the name splsh.png residing where index.html file is . But no splash screen is displayed. pl help attaching the entire config.xml file.

    • at first glance it looks like some ordering problem..have u tried creating a fresh project and adding only the splashscreen..i will be putting up my files on github in a few days so will give you the link then

  • Marco Fabra

    Thank you sir! I spend 2 days looking for this step-by-step and this tutorial is awesome! Thank you sir!

  • Pingback: How To Add Splash Screen For Ionic Framework Apps - pointDeveloper.com()

  • Fahad Jan

    Thank you for tutorial. Your tutorial is awesome now i am asking about splash screen of ios.
    How can we add splash screens for ios?

    • The same way files should work for ios as well you just need to build for ios

  • Kamodi

    your tut worked for me, but i got a problem, i test my apk it loads Splash Screen > White Screen Flash > Percentage loading > Game Start layout. I changed background to black in index.html with this ” and in config.xml with this but i still get that white screen after splash . how to get rid of this?

    • have you tested this on a real device..This looks like an emulator issue or a device specific issue ..make sure to check on multiple devices and versions of operating systems

  • Pingback: Add App Icon To Phonegap Build Apps - pointDeveloper.com()

  • Pingback: Phonegap Build Beginner Course - pointDeveloper.com()

%d bloggers like this: