When working on your new killer app, most of the time you are focussing on its functionality. Making wireframes and implementing that cool feature that makes the app different from all other apps. And eventually, when the implementation is almost finished you start working on the other stuff that is needed for your app, like the App store images and texts and the splash screens. At least, that is what it comes down too for us most of the times 🙂
However, configuring and implementing some nice splash screens for your Phonegap app appeared to be quite a challenge. Especially the Phonegap Android splash screen configuration is not that easy. How did we manage to get the Android splash screens in our app without being stretched? Turned out we had to use 9patch images. This blog describes how to create and configure 9patch splash screens for your Phonegap application.
Creating your 9patch image
The Android SDK comes with a tool called draw9patch, which is located in the tools directory of the Android SDK. This tool can be used to create your 9patch image. Follow the steps below to create your 9patch splash screen image.
- Open the draw9patch tool
- Open the PNG file you want to use as source for your splash screen
- Add the black dots on the outer side of the image for the part of the image you want to be stretched (see the example below). It is important that the right and bottom side of the image are completely filled with black (otherwise some strange stretched results might be visible).
- Verify the results in the preview pane of the tool (on the right side of your screen).
Configure Phonegap Android splash screen
What configuration do you need to add to your Phonegap app to use the 9patch splash screen you just created?
- Create splash.xml
- Configure the splash screen in your DroidGap activity
- Copy the splash screens in your drawable directories
A file named splash.xml should be created in your res/drawable folder. An example is listed below. You need to refer to the 9patch splash screen you’ve made earlier (use the filename without the extension).
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:scr="@drawable/<splash_screen_name_without_extension>" android:dither="false"/>
Configure the splash screen in your DroidGap extension
Next, you need to refer to the splash screen in your App’s Main Activity, which extends the Phonegap DroidGap class. Note that R.drawable.splash refers to splash.xml. Renaming splash.xml means changing this lines accordingly.
Copy the splash screens in your drawable directory
Since we have created only one 9patch splash screen, first I though it was enough to simply put in the res/drawable folder of your app. However, it appeared that Android takes this to be a mdpi splash screen and it will still rescale and resize it to ie. hdpi density before the 9patch streching becomes active. To prevent this, copy the 9patch splash screen to all density subfolders in your res folder (drawable-mpdi, drawable-hpdi, etc.). Of course, it possible to create a different 9patch per density too, since you have more space available for higher densities.
And what about Phonegap Build?
The instructions above describe how to create and configure your Phonegap Android splash screen using a 9patch image. Can we use 9patch splash screens when using Phonegap Build?
Nope, you can’t 🙁 But there is hope… They have an open issue on their issue list so 9patch support will probably be added in the future.