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!

Givens

You should raise a bug on Jira to get the 9 patch problem fixed. issues.apache.org/jira/browse/CB – Guesthouse

Would be cool if you accept my answer :) – Phalansterian

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.

Phalansterian

Is there any way I can use this in PhoneGap build? – Pellucid

@will: Nope. I never did. – Pellucid

For PG > 3.0 instead of extending the class, use this setting in config.xml now: <preference name="splashscreen" value="splash-9" /> <preference name="splashScreenDelay" value="3000" /> This setting uses splash-9.png. – Batch

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.

Decry

This didn't work for me but since it has gotten 4 up votes it's probably correct. Robert's answer did however worked out fine. – Catwalk

This does not work well. Where you use images there is always a gap on some borders. It does not work with nine-patch images. – Malia

Answer 3

For those using phonegap 3.0 you don't need to need to make the splash.xml, you just refer the image in:

super.setIntegerProperty("splashscreen", R.drawable.nameoftheninepatch);

If its being stretched just follow the note by DeadPassive:

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.

Amperage

Answer 4

I hope this post will help, it's my first on Stack Overflow ever. This solution is based on providing two splash screens, setting the fitting one, locking the orientation and unlocking it some seconds later, when the splash screen is hidden. :)

Problems with the other solutions:

• Centered image: It's a working solution if you don't want your splash to be full screen. When adding android:tileMode="clamp", I found out, that Android ignores android:gravitiy, if android:tileMode is set.
• Nine patch image: The concept is easy to understand, but somehow I couldn't manage to transform my image (with a logo in the center) into a nine patch image, that keeps the logo centered when scaling.

public class myApp extends DroidGap
{
    private class TimerRunnable implements Runnable
    {
        @Override public void run()
        {
            // unlock orientation
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
        }
    }

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        // set splash screen and lock orientation
        if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE)
        {
            super.setIntegerProperty("splashscreen", R.drawable.splashscreen_landscape);
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
        }
        else // ORIENTATION_PORTRAIT and ORIENTATION_UNDEFINED
        {
            super.setIntegerProperty("splashscreen", R.drawable.splashscreen_portrait);
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT);
        }

        // start timer
        Handler timerHandler = new Handler();
        timerHandler.postDelayed(new TimerRunnable(), 5000);

        // show splash screen
        super.loadUrl(Config.getStartUrl(), 5000);
    }
}

Pie

Answer 5

Create your splash screen, named it for example: "bitmap.png"

Then create "splash.xml" in folder res/drawable

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

In your activity, put this code:

super.setIntegerProperty( "splashscreen", R.drawable.splash );

Subcutaneous