Cordova/PhoneGap 9-patch splash screen

Question

I have a 9-patch image (splash.9.png) I'd like to use as my Cordova (3.4.0) app splash screen. If I run the (Cordova) Android project from Eclipse, everything is as it's supposed to be, i.e. the splash screen appears and only the stretchable areas are stretched. However, if I run the app using the command line interface, the entire splash screen is stretched/deformed, as if Cordova doesn't see it as a 9-patch image, but as a regular .png. I have the following specified in my config.xml:

<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="5000" />

Is there anything else that needs to be set? Any other clues? Thanks in advance!

Answer 1

OK, the answer has EVERYTHING to do with the stretchy areas of your 9patch image. I found the answer by pinging the github question. A user sent me to another discussion where someone had cracked it.

The main issue is that most 9patch tutorials explain how to stretch buttons, but none detail how to center an image.

Look for the green/blue/red image a little more than half way through the discussion.

http://community.phonegap.com/nitobi/topics/stretched_9_patch_splash_screens_android

Wayback copy: http://web.archive.org/web/20160405060404/http://community.phonegap.com/nitobi/topics/stretched_9_patch_splash_screens_android

The key for me was to look at the edges. It's really hard to see (for me at least), but you can barely make out the black marks along the edge that define the stretchy areas. top has 2 small areas (on the green), left has 2 small (on the green), bottom has one long (on the blue), right has one long (on the blue).

Additionally, some XML is provided to allow use of a single image in both vertical and horizontal orientations.

Consequently, I find this one image (as hard as it is to see the lines) a better instruction on how 9patch works than all of the tutorials I've watched.