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 landscape mode?

PhoneGap Build (used to compile) docs / blog have nothing on this. Only Portrait is covered for Android.

Since first (docs) says that using height and width is cross-platform supported, I tried to use it:

<gap:splash src="res/splash-200x320-android.png"             gap:platform="android" gap:density="ldpi"  width="200" height="320" />
<gap:splash src="res/splash-320x480-android-bada-ios.png"    gap:platform="android" gap:density="mdpi"  width="320" height="480" />
<gap:splash src="res/splash-480x800-android-bada-wp.png"     gap:platform="android" gap:density="hdpi"  width="480" height="800" />
<gap:splash src="res/splash-720x1280-android.png"            gap:platform="android" gap:density="xhdpi" width="720" height="1280" />
<gap:splash src="res/splash-320x200-android.png"             gap:platform="android" gap:density="ldpi"  width="320" height="200" />
<gap:splash src="res/splash-480x320-android-bada-ios.png"    gap:platform="android" gap:density="mdpi"  width="480" height="320" />
<gap:splash src="res/splash-800x480-android-bada-wp.png"     gap:platform="android" gap:density="hdpi"  width="800" height="480" />
<gap:splash src="res/splash-1280x720-android.png"            gap:platform="android" gap:density="xhdpi" width="1280" height="720" />

But there is no effect -- in landscape mode on my Android device I always see badly strechead portait mode version of my splash screen.

Halonna

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.

Halonna

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.

Merari

This is nice looking solution (so +1), but I'm not going to accept it as it is way too off-topic. The idea of my question was to bring answer specific to PhoneGap Build -- that is, using HTML/Javascript and config.xml only. You don't have abillity to use pure Java code in PhoneGap Build apps, don't you? – Halonna

@LarryAasen No, you can't! Read my comment. I'm talking about PhoneGap Build. When using PGB (building in the cloud) you're limited to HTML/Javascript only. You can use pure Java code only, if you're building locally, in your own environment. – Halonna

@Halonna you need to rephrase your question to include build if that is the case. Otherwise, my comment is correct. – Pleinair

@LarryAasen I used: PhoneGap Build (used to compile) part in my question and author of answer, you're commenting (nlawson) started his answer with: I'm not using PhoneGap Build, but.... Seems most people understand, that this question is about PhoneGap Build only. But, if this will make you happy, I see no problem in changing question's title! :] – Halonna

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.

Booklet