Phonegap design for Android and splash screen stretches for tablet

Question

Therefore, I use phonegap to create the application. I have a splash screen that I'm showing and is listed in the config.xml file as follows.

<gap:splash src="splash/android/ldpi.png" gap:platform="android" gap:density="ldpi" /> <gap:splash src="splash/android/mdpi.png" gap:platform="android" gap:density="mdpi"/> <gap:splash src="splash/android/hdpi.png" gap:platform="android" gap:density="hdpi" /> <gap:splash src="splash/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" /> 

The problem is that when I test it on my Samsung Galaxy skyrocket 2 mobile phone, it shows the image “hdpi.png” and also when I test it on my Samsung galaxy on a 10-inch tablet, it shows the mdpi.png image.

Shouldn't it be the other way around?

Based on the Android specification (see image above), my mdpi.png has a size of 320x480 and hdpi.png as 480x800, so mdpi.png appeared on the tablet.

How to get around this? What do you think, I should determine that several splash screen sizes for mdpi, for example. for regular 32x480 screen, 480x800 large screen, etc. But if we go with this approach, then how to define it in config.xml? Because we only filter based on gap: density = "mdpi" or we have to add sizes as well and therefore add several records to the same gap: density = "mdpi"

Answer 1

I know this is a different approach, but perhaps the easiest way is to use a file with 9 patches?

You can create it using the instructions here or here , name it splash.9.png and put it in the platforms/android/res/drawable .