CODEWITHSUNDEEP
cordovascreenstretchsplash-screennine-patch
user1198646
user1198646

Reputation: 131

Phonegap splash screen for android: not stretched or 9patch

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!

Upvotes: 13

Views: 13376

Answers (5)

Jopie
Jopie

Reputation: 332

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 );

Upvotes: 0

ThielHater
ThielHater

Reputation: 31

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);
    }
}

Upvotes: 0

Andr&#233; Morales
Andr&#233; Morales

Reputation: 488

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.

Upvotes: 3

robert
robert

Reputation: 978

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

  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.

Upvotes: 13

Florian
Florian

Reputation: 3144

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.

Upvotes: 12

Related Questions