Setup Icons and Splashscreens for Your App

All right, it may change in the future but currently, setting up icons and splashscreens for your apps is not (totally) done in the plugin’s admin panel. You’ll have to do 3 things:

• Prepare assets
• Reference assets in the config.xml file (using WordPress)
• Download the project ZIP and add assets to it

In this article, I assume that you use PhoneGap Build to build your apps. More generally, we give preference to that way of building apps as it is a lot more easier for beginners. It doesn”t mean that you can’t use the CLI method to build WP-AppKit projects if you want to. But be aware that regarding icons and splashscreens, there are differences between the two: http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html.

Preparing Assets

First thing to do is to create all the needed assets. The difficulty comes from the different screen densities support. Basically you’ll have to do one asset per density, per OS for icons and splashscreens.

Android and iOS handle things differently. Android defines density ranges and iOS has fewer variations (retina/non retina and iPhone 4/iPhone 5).

A thing that you may want to do is to create a special kind of PNG for Android called 9-patch images. Those images have the capacity to extend in order to support different screen dimensions. More info here: http://developer.android.com/tools/help/draw9patch.html.

Referencing Assets

In the WordPress edit panel of your application, search for the PhoneGap Plugins text area. This is where you’ll add the XML tags that reference the app’s icons and splashscreens.

Referencing icons and splashscreens for PhoneGap Build is explained here.

Here what we use for our demo apps.

<!-- Icons -->
<icon src="icon.png" />
<icon src="./icons/icon-wp-appkit-ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
<icon src="./icons/icon-wp-appkit-mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
<icon src="./icons/icon-wp-appkit-hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
<icon src="./icons/icon-wp-appkit-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
<icon src="./icons/icon-wp-appkit-xxhdpi.png" gap:platform="android" gap:qualifier="xxhdpi" />
<icon src="./icons/icon-wp-appkit-xxxhdpi.png" gap:platform="android" gap:qualifier="xxxhdpi" />

<!-- Splashscreens -->
<gap:splash src="splash.9.png" />
<gap:splash src="./splashscreens/splashscreen-wp-appkit-ldpi.9.png" gap:platform="android" gap:qualifier="ldpi" />
<gap:splash src="./splashscreens/splashscreen-wp-appkit-mdpi.9.png" gap:platform="android" gap:qualifier="mdpi" />
<gap:splash src="./splashscreens/splashscreen-wp-appkit-hdpi.9.png" gap:platform="android" gap:qualifier="hdpi" />
<gap:splash src="./splashscreens/splashscreen-wp-appkit-xhdpi.9.png" gap:platform="android" gap:qualifier="xhdpi" />
<gap:splash src="./splashscreens/splashscreen-wp-appkit-xxhdpi.9.png" gap:platform="android" gap:qualifier="xxhdpi" />
<gap:splash src="./splashscreens/splashscreen-wp-appkit-xxxhdpi.9.png" gap:platform="android" gap:qualifier="xxxhdpi" />

 

<!-- Icons iOS 7.0+ -->

<!-- iPhone / iPod Touch  -->
<icon src="./icons/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="./icons/icon-60@2x.png" gap:platform="ios" width="120" height="120" />

<!-- Spotlight Icon -->
<icon src="./icons/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="./icons/icon-40@2x.png" gap:platform="ios" width="80" height="80" />

<!-- Icons iOS 6.1 -->

<!-- iPhone / iPod Touch -->
<icon src="./icons/icon.png" gap:platform="ios" width="57" height="57" />
<icon src="./icons/icon@2x.png" gap:platform="ios" width="114" height="114" />

<!-- iPhone Spotlight and Settings Icon -->
<icon src="./icons/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="./icons/icon-small@2x.png" gap:platform="ios" width="58" height="58" />

<!-- Splashscreens -->

<!-- iPhone and iPod touch -->
<gap:splash src="./splashscreens/Default.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="./splashscreens/Default@2x.png" gap:platform="ios" width="640" height="960" />

<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="./splashscreens/Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />

 Adding Assets To The Project

When you’ve finished creating assets (i.e. PNG files), you’ll have to add them manually to your project’s archive (i.e. ZIP file). It means that once you have downloaded the ZIP file of your project from the edit panel in WordPress, open it and add the icon and splashscreen images to it before submiting the archive to the PhoneGap Build.

At this step, errors come often from the fact that you have stored the assets in a place which is different from what you have declared in the config.xml. Make sure that the two match. In the examples above, assets are stored in an icons and a splashscreens subfolders (except for the Android default icon and splashscreens).

Here how we store icons and splashscreens for our demo apps.

Happy coding!