PhoneGap App Builder - Icons and Splash Screens

Description

Automatically build splash screens and 9-patch images for iOS and Android PhoneGap applications using Alpha Anywhere.

Discussion

The Application Master Image Resources category can be used to generate a series of 9-patch splash screen images for Android devices (iOS does not support 9-patch images without additional libraries).

For apps built with Alpha Anywhere 4.3.2 or older, is very important that you create a new PhoneGap Project when generating custom icons and splash screens for your app because the PhoneGap app config.xml file has been changed significantly to support new functionality.

When you supply a single image that needs to be resized for the numerous aspect ratios required by all of the different types of mobile devices, the aspect ratio will typically change and the resulting image will be out of proportion. The new resizing code uses a center weighting technique to clip the image without any change to the image aspect ratio. This technique is used for the generation of all of the splash screens and you need to be aware of that when you supply the images for the portrait or landscape orientations.

If no image files are supplied, Alpha Anywhere uses the default image shown below:

Recommended Image Sizes 

For portrait splash screens, the recommended size is 1536px x 2048px.

For landscape splash screens, the recommended size is 2048px x 1536px.

You can also specify a square image (suggested size is 2732px x 2732px) for both orientations and the resulting images will not be distorted.

Android 9-patch images 

A 9-patch image is a standard png file that has been divided into a matrix of 3 x 3 rectangles (like a tic-tac-toe board). Each region in the matrix has specific stretch properties that allow the image to be resized without altering the aspect ratio of the center weighted rectangles. As such, 9-patch images can be stretched to fit the different screen sizes without clipping or distortion. You need to supply a square image that will be used for both portrait and landscape modes and the graphics need to be center weighted. The recommended size is 2732px x 2732px.

For more info on 9-patch splash screen images see: Cordova Splashscreen Plugin Documentation

iOS Storyboard Launch Images - If you open and inspect the new config.xml file you will see support for iOS storyboard launch images (which act much like Android's 9-patch images). While the support is included in the image builder module, it hasn't been exposed because the current version of PhoneGap Build does not support it. As soon as PhoneGap Build supports the inclusion of iOS storyboard images, we will expose iOS storyboard support within the PhoneGap App Builder.

See Also