Welcome to the next in our series of PhoneGap tutorials “PhoneGap Tutorial 2 Splash Screens and Icons”
In this tutorial we are going to go through some simple steps to create a fairly effective logo and splash screen, also the configuration in PhoneGap to get this to work.
Adding a logo, splashscreen and icons to your app makes it look a lot more professional and is definitely worth doing. If you find this tutorial useful or have any questions please share and leave comments below.
You should allow 1-2 hours to complete this tutorial.
NOTE: The source code for all our tutorials is available on public repositories via BitBucket and Git. The source code for this repository can be downloaded via a git shell or terminal (Linux) using the below command
git clone https://firstname.lastname@example.org/gothailand/super-splash.git
You must have followed the installation of Phonegap steps and the “Create our base Application” and “Test our base Application” from the PhoneGap Tutorial 1 (Part 1).
This creates a basic hello world app from the windows PhoneGap developer app and the only other thing it does is move your config.xml file into the ‘www’ directory for ease of build using Adobe PhoneGap build.
The only difference from the steps are you should name your application “Super Splash” and give it an ID of “com.gothailand.supersplash” in Step 3 of “Create our base application”
If you have any issues please leave a comment below.
- The creation of the required PhoneGap icon image using microsoft paint
- The creation of icons and splash screens using the utility at http://pgicons.abiro.com/
- The configuration of config.xml to use the images correctly including plugin upgrades
- The generation of an Android debug application to test the splash screen
Note: Splash screens can’t be tested using the PhoneGap developer app so we will create a debug app for Android that we can test on. This is not a release app, if you need a full release app with certificates and the ability to test on Apple devices that will also require certificates then you need to follow all the steps in the first part of Tutorial 1.
Create a simple icon logo using Microsoft Paint
In this part of the tutorial we will create a basic but effective “Super Splash” logo.
- Open Microsoft Paint and modify the properties of the image to be 512×512 pixels with the background to be black and a white foreground
- Fill the background with the black colour by selecting and right clicking the mouse.
- Create 2 large ‘S’s (Broadway Font and Size 72) and place them near each other
- Complete the words with (Broadway Font Size 36) and arrange so they look correct
- Create a thunderflash using the below tool and fill with yellow colour
- Centre the image and save as a .png file (icon.png) (I have created an ‘imagegen’ directory where I am going to store my newly created icon.png file)
Generate the splash screens and icons for your application
- Open up the URL http://pgicons.abiro.com/
- Configure all the settings as below and upload your new icon.png file
The first set of checkboxes ensure we generate new iOS images and Android images and also the landscape versions for tablet devices.
We don’t want to upload a splash screen as we will use our icon on a black background (the background colour #000000 is selected)
We don’t want to morph as that will distort our image, and we need to select ‘App icon overlay’ to use our icon image
An 80% aspect ratio is fine for us.
Now select Generate images.
You need to download the images zip file to your applications ‘www’ directory.
- Now we need to rename ‘www/res’ to ‘www/res_old’ and extract the zip file into the current ‘www’ directory, the files and directory structure should look like below.
The zip file contained an ‘archive’ directory, this has the original icon.png we uploaded and also icons sized for the Play and Apple stores.
It also placed a default icon and splash in our ‘www’ directory these are used by PhoneGap build as default images.
It also created a new ‘res’ directory for us which contains all the correct image sizes for our new icons and splash screens.
We are now ready to make the modifications to our config .xml to initiate the splash screens.
Edit our config.xml
- Firstly we need to replace the 4 platform sections (android, ios, wp8 and windows) with the below code, this will use our newly generated images.
<platform name="ios"> <icon src="res/icon/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icon/ios/icon-small.png" width="29" height="29"/> <icon src="email@example.com" width="58" height="58"/> <icon src="firstname.lastname@example.org" width="87" height="87"/> <icon src="res/icon/ios/icon-small-40.png" width="40" height="40"/> <icon src="email@example.com" width="80" height="80"/> <icon src="firstname.lastname@example.org" width="120" height="120"/> <icon src="res/icon/ios/icon-small-50.png" width="50" height="50"/> <icon src="email@example.com" width="100" height="100"/> <icon src="res/icon/ios/icon.png" width="57" height="57"/> <icon src="firstname.lastname@example.org" width="114" height="114"/> <icon src="res/icon/ios/icon-60.png" width="60" height="60"/> <icon src="email@example.com" width="120" height="120"/> <icon src="firstname.lastname@example.org" width="180" height="180"/> <icon src="res/icon/ios/icon-72.png" width="72" height="72"/> <icon src="email@example.com" width="144" height="144"/> <icon src="res/icon/ios/icon-76.png" width="76" height="76"/> <icon src="firstname.lastname@example.org" width="152" height="152"/> <icon src="res/icon/ios/icon-167.png" width="167" height="167"/> <icon src="email@example.com" width="167" height="167"/> <!-- Storyboard portrait --> <splash src="res/screen/ios/Default@2x~iphone~anyany.png"/> <splash src="res/screen/ios/Default@2x~iphone~comany.png"/> <splash src="res/screen/ios/Default@3x~iphone~anyany.png"/> <splash src="res/screen/ios/Default@3x~iphone~comany.png"/> <splash src="res/screen/ios/Default@2x~ipad~anyany.png"/> <splash src="res/screen/ios/Default@2x~ipad~comany.png"/> <!-- Storyboard landscape --> <splash src="res/screen/ios/Default@2x~iphone~comcom.png"/> <splash src="res/screen/ios/Default@3x~iphone~anycom.png"/> </platform> <platform name="android"> <preference name="SplashMaintainAspectRatio" value="true"/> <preference name="SplashShowOnlyFirstTime" value="true"/> <icon density="ldpi" src="res/icon/android/ldpi.png"/> <icon density="mdpi" src="res/icon/android/mdpi.png"/> <icon density="hdpi" src="res/icon/android/hdpi.png"/> <icon density="xhdpi" src="res/icon/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icon/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icon/android/xxxhdpi.png"/> <!-- Portrait --> <splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screen/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screen/android/splash-port-xxxhdpi.png"/> <!-- Landscape --> <splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.png"/> <splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.png"/> <splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.png"/> <splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png"/> <splash density="land-xxhdpi" src="res/screen/android/splash-land-xxhdpi.png"/> <splash density="land-xxxhdpi" src="res/screen/android/splash-land-xxxhdpi.png"/> </platform>
- Now we need to update the various plugins and add the splash code.
COMMENT OUT AS BELOW
<!--plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" /-->
ADD THE BELOW TO THE END OF THE FILE BEFORE THE </widget> TAG
<preference name="SplashScreenDelay" value="5000" /> <icon src="icon.png" target="/icon.png" /> <splash src="splash.png" target="/splash.png" /> <preference name="phonegap-version" value="cli-8.0.0" /> <plugin name="cordova-plugin-splashscreen" spec="~5.0.2" />
MODIFY THE SDK VERSION FROM 14 to 16 AS BELOW
<preference name="android-minSdkVersion" value="16" />
These changes will allow us to use the latest PhoneGap build CLI and correct Android SDK and also one of the latest Splash Screen plugins. It will also specify the default icon and splash screen files (required) and finally it sets our splash screen display to 5 seconds.
We are now in a position to build our debug app and test it on Android.
Generate an Android debug application to test the splash screen
Note: We will not be using certificates to generate the Android debug app as it does not require it, if you need to generate a Production binary or an .apk binary for Test flight you need to follow the procedures in PhoneGap Tutorial 1 (Part 1).
- Firstly zip up your ‘www’ directory as below
- Open and sign in to the Adobe PhoneGap build site at https://build.phonegap.com
- In the ‘Apps’ menu select ‘+ new app’
- At the next screen select ‘Upload a zip file’
- select the www.zip file that we created in step 1 and then the zip will be uploaded and you will be presented with the application overview
- Your app will now look like the below
The iOS app has not generated as we have not specified keys but the Android app has generated a debug .apk that we can install on our device.
- Follow the steps for “Build and Test Push Notification App” from Phonegap Tutorial 1 Part 2 to share your PhoneGap build appication then download and install it onto your Android device.
- When you initially open the app on your Android device you will be asked to confirm a lot of permissions, this is because we have not removed all the intial plugins specified in the app, you can just accept this as we do not use any of the functionality.
Testing your release on iOS
iOS is a little more restrictive as we can’t install the .ipa directly onto the device as we can on Android and again you will need a Mac to upload the .ipa to iTunesConnect so you can test it on TestFlight.
I am happy to do this for a small ‘beer money’ donation 🙂 and much cheaper than some Internet sites out there advertise!
If you make a $10 donation to my paypal account I will upload an ipa file to your iTunesConnect account 5 times, you can make a donation safely using the paypal link below, once you have made the payment please email firstname.lastname@example.org and attach your .ipa file and your iTunesConnect login details, also include the id you made the paypal payment with if it is not the same as the email address you send the .ipa from. All requested uploads will made within 12 hours. If you are uncomfortable handing over your login details I am happy to do a screen share using Skype or Teamviewer to show the .ipa being uploaded and me using your login details (you can change your login details right after the upload) however this will cost 2 upload credits of the 5 you purchase.
A lot of work has gone into this series of tutorials so donations do not hurt the cause of me adding to the series 🙂
If you have any queries around this process please contact me online by using the “Support Agent Online” tab at the bottom of the page.
Many thanks for contributing!