Phonegap splash screen for android: not stretched or 9patch

Question

I have a fake splash screen that pops up when my phonegap app is launched:

super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 500);

I currently have 3 different splash.png files: hdpi, mdpdi and ldpi. My issue is that even in hdpi, you'll get devices that are 480 x 800 and others that are 480 x 854, and android stretches my splash image to fill the screen.

I would much rather have the image keep its aspect ratio. From what I've read, a 9-patch solution will not work with PhoneGap. If it will, please let me know how! I've got the .9.png ready to go. So the other solution I can think of is to prevent android from stretching my image. How would I do that?

Thanks!

Answer 1

The 9 patch solution does work for splash screens in PhoneGap :-)

1. Define a new drawable resource by creating a xml file, i.e. res/drawable/splash.xml with the following content:

   <nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
   android:src="@drawable/splashimg" 
   android:dither="false"/>;  
   

   Note how it references a real image 'splashimg' which should be a nine patch image (see below).

2. Create the nine patch images

   • Any png will do.
   • Then use android-sdks/tools/draw9patch to define the nine patch borders (see http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch)
   • IMPORTANT: these images must have the padding box (lower and right border) completely filled in black or else the phonegap area of your application might be stretched in a weird way.

3. Add the referenced nine patch images either in res/drawable or in the resolution specific folders e.g. res/drawable/splashimg.9.png

4. Reference the new drawable in your DroidGap extending class

   public void onCreate(Bundle savedInstanceState) {
   
       super.setIntegerProperty("splashscreen", R.drawable.splash);
   
   }
   

This way you can actually make all kind of background images/effects, by using the power of drawable resources in android. See http://developer.android.com/guide/topics/resources/drawable-resource.html for more.

Answer 2

No need to raise a bug, there is a solution available: Simply place the following splash.xml in res/drawable (modify the android:src attribute) and change the reference to R.drawable.splash, in the setIntegerProperty() call.

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  android:src="@drawable/splashImage"
  android:gravity="center_horizontal|center_vertical" />

Please see my Blog for a more detailed description of the set-up.