Search code examples
cordovasplash-screenphonegap-build

How to add separate Portrait and Landscape splash Images to Android config.xml gap:splash

The question here is how to allow for separate (landscape and portrait) splash images in PhoneGap.

Solution

  • Unable to find a satisfactory answer for a long time, I finally spent a few hours messing with it and was able to get it to work in the following way: define two items for each android size- on the portrait files, DON'T put width and height attributes, and on the landscape DO put them.

    Here is my code so others can follow:

    EDIT: THE CODE BELOW IS FOR PHONE GAP BUILD VERSIONS 2.7 THROUGH 3.0. FOR NEWER VERSIONS, SEE https://stackoverflow.com/a/24002601/700111 AND http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens.

    THIS DID NOT WORK - when i had width and height on the portrait files: 

    <gap:splash src="res/screen/android/screen-xhdpi-n7-landscape.png" gap:platform="android" gap:density="xhdpi" width="1280" height="800" />
<gap:splash src="res/screen/android/screen-xhdpi-landscape.png" gap:platform="android" gap:density="xhdpi" width="1280" height="720" />
<gap:splash src="res/screen/android/screen-hdpi-landscape.png"  gap:platform="android" gap:density="hdpi" width="800" height="480" />
<gap:splash src="res/screen/android/screen-mdpi-landscape.png"  gap:platform="android" gap:density="mdpi" width="480" height="320" />
<gap:splash src="res/screen/android/screen-ldpi-landscape.png"  gap:platform="android" gap:density="ldpi" width="320" height="200" />

    And this is the WORKING CODE

     <gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi"/>
<gap:splash src="res/screen/android/screen-xhdpi-n7-portrait.png" gap:platform="android" gap:density="xhdpi"/>
<gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi"/>
<gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi"/>
<gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi"/>

<gap:splash src="res/screen/android/screen-xhdpi-n7-landscape.png" gap:platform="android" gap:density="xhdpi" width="1280" height="800" />
<gap:splash src="res/screen/android/screen-xhdpi-landscape.png" gap:platform="android" gap:density="xhdpi" width="1280" height="720" />
<gap:splash src="res/screen/android/screen-hdpi-landscape.png"  gap:platform="android" gap:density="hdpi" width="800" height="480" />
<gap:splash src="res/screen/android/screen-mdpi-landscape.png"  gap:platform="android" gap:density="mdpi" width="480" height="320" />
<gap:splash src="res/screen/android/screen-ldpi-landscape.png"  gap:platform="android" gap:density="ldpi" width="320" height="200" />

    I was able to have different landscape and portrait files using this code.

    Hope this helps someone!

    --techdude