Landscape splash screen for Android in PhoneGap Build

Question

What should I enter to config.xml or what should I do in general, to have PhoneGap Build application\'s splash screen displayed correctly on Android device in lands

Answer 1

As per my current knowledge and after deep research, I have found that this is a confirmed bug, and we currently can't do anything about this.

PhoneGap Build (and probably PhoneGap itself as well) currently does not support landscape splash screens at all. I even tried the iOS way (like shown in the question -- using width and height params, officially not supported for Android). But it still doesn't work.

All is fine in portrait mode, but no matter what screen density Android device you'll use -- in landscape you'll see ugly deformed portrait version of splash screen.

Answer 2

I'm not using PhoneGap Build, but I managed to fix this in a basic PhoneGap Android app.

Let's say you have two different splash images - a landscape and a portrait version - and you want both of them to stretch to fill the available screen area.

Put one in drawable and the other in drawable-land. (Or drawable-land-hdpi, drawable-land-xhdpi, etc., if you you have multiple sizes.)

Next, make sure that you're managing config changes yourself in AndroidManifest.xml:

<activity
    ...
    android:configChanges="orientation|screenSize|keyboardHidden"
    ...
>
</activity>

Then put this in your main Activity class that extends DroidGap.java:

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);

    if (super.splashDialog != null) {
        ViewGroup rootView = (ViewGroup) super.splashDialog.getWindow()
                .getDecorView().findViewById(android.R.id.content);
        LinearLayout linearLayout = (LinearLayout) rootView.getChildAt(0);
        // manually refresh the splash image
        linearLayout.setBackgroundDrawable(null);
        linearLayout.setBackgroundResource(R.drawable.mysplash);
    }
}

This will cause the background image to redraw and properly stretch whenever the user changes orientation.

Answer 3

Phonegap Build now uses the Cordova configuration style. When specifying the density, append port- or land- to specify portrait or landscape:

<splash src="portrait-ldpi.png" density="port-ldpi"/>
<splash src="landscape-ldpi.png" density="land-ldpi"/>

---

Old configuration style

It can be done since April 2014 in Phonegap Build by using the gap:qualifer, eg

<gap:splash src="portrait-xxhdpi.png" gap:platform="android" gap:qualifier="port-xxhdpi" />
<gap:splash src="landscape-xxhdpi.png" gap:platform="android" gap:qualifier="land-xxhdpi" />

See this and this article for details.