PhoneGap/ Cordova 9-patch Image Splash Screen with center Logo?

Question

I use PhoneGap/Cordova to create an Android app with a splash screen that contains a centered logo.

Here is what I did:

In my Android Manifest.xml I added

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

Then I used the nine-path image generator here to create the 9-patch images for the splash screen. The purpose is to have a logo centered in the center all the time. When uploading the image it looks like the following. I kept the edit mode "stretch regions".

The problem is that the splash image is stretched all the time. This means that the logo (the blue box) is disproportioned.

I checked the solutions here Cordova/PhoneGap 9-patch splash screen but it did not help.

How can I use 9-patch images as a splash screen on Android such that the logo is always in the center of the screen and not stretched?

Answer 1

The problem is, that the area you have selected - the logo - is at the same time the area that will be used to stretch. You have to define different stretch areas that are outside of your logo's bounding box. While horizontal stretch area can be beneath or above your logo, vertical stretch area can be only left or right to your logo. So the image will never be in de center, as you want it. You have to use different tool to do this. Check this page out

Answer 2

just try to build the apk using the eclipse not in cli I too had the same problem but when i build my app using the eclipse the image did not streched just try it out the following link can help u create a nine patch image http://community.phonegap.com/nitobi/topics/stretched_9_patch_splash_screens_android