jQuery Mobile: Add Splash Screen to Android or iOS

In this tutorial we will show you how to add a splash screen to your iPhone or Android mobile application in jQuery Mobile.

If you are using phonegap build you will notice there is no way to edit the AndroidManifest.xml file. That is fine because we don’t need to. We actually need to modify or create the config.xml file. Any attempt to modify the AndroidManifest.xml file will result in the licence for that install becoming invalid and so useless to us. However the AndroidManifest.xml file is built using the information contained within the config.xml. So lets begin.

The first we need to do is create a new blank xml file in the root directory of your phone app. This is the directory containing your inex.html file. Save the file as config.xml and we can then begin to put our file together.

All config.xml files have a few lines that they must always have or they won’t work so lets start with them.

<?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.yourappname"
 versionCode="10" 
 version = "1.0.1">

<!-- versionCode is optional and Android only -->

<name>Reptile Rescue App</name>

<description>
 An example for phonegap build docs. 
 </description>

<author href="http://yourwebsite.com" email="youremail@yourwebsite.com">
 Your name 
 </author>

</widget>

What does this all mean? The first line is required by all xml docs so we will ignore that for now. The next 2 lines phonegap needs to recognise what to do with this file so we will also leave them alone. Its from here we start to change the lines to suit our needs. Change the id name to suit the id name (reverse .com style) of your app.

The next two lines are the version numbers for your mobile app. So change these to suit your needs.

In the name tags we then give our app its name and then in the description  tags describe what  your app is about.

The last tag we need to look at is the author tag. Change the url to the url of your site and do the same with your email. Lastly fill in your name inside the author tags and we are ready to add our splash screen.

Create a new folder in the root directory of your app and call it something sensible ready for your splash screen to go in. I am going to call mine splash. Once you have done that place all your splash screen in this folder ready to go.

For each splash screen we need to put a line into our config.xml to tell it when it is to be used.

<gap:splash src="icon/Default.png" />

This is the basic line needed for each splash screen. Different mobile operating systems recognise different file name as relevant to them. So for Android call yours default.png. Now because we have this line in our config.xml file when we use phonegap build it will make the required changes to androidmanifest.xml so the this splash screen loads on android system.

If we now want to add splash screen for iOS devices we use a few similar lines directly after it.

 <gap:splash src="icon/Default.png" width="320" height="480" />
 <gap:splash src="icon/Default@2x.png" width="640" height="960" />
 <gap:splash src="icon/Default-ipad.png" width="768" height="1024" />

Make sure that your splash screen dimension match the above  sizes. The first one is for older iPhone without the retina display. The second is for retina display iPhones and the last one is for ipad.

Your completed config.xml file should now look like this:

<?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.reptilerescuejess"
 versionCode="10" 
 version = "1.0.1">

<!-- versionCode is optional and Android only -->

<name>Reptile Rescue App</name>

<description>
 An example for phonegap build docs. 
 </description>

<author href="http://featofdesign.com/stephen/" email="ripper.orb@hotmail.com">
 Stephen "Ripp" Northcott 
 </author>

 <gap:splash src="icon/Default.png" />
 <gap:splash src="icon/Default.png" width="320" height="480" />
 <gap:splash src="icon/Default@2x.png" width="640" height="960" />
 <gap:splash src="icon/Default-ipad.png" width="768" height="1024" />

</widget>

Save the file again and zip the app up again. Upload it to phonegap build and rebuild your app. Your Android and iPhone apps both now have splash screens.

Hope you found this tutorial helpful, please consider making a donation through the button on the right hand side and see you again soon.