Cordova android splashscreen are distorted

Question

I have a Cordova app with a splashscreen at start. The splashscreen is shown but it's distorted. It seems to don't take the good resolution.

My splash is a Bitmap image, I don't care if its cropped but I don't want it to be distorted.

I have the following structure with splashscreen at differents size according to the doc:

drawable-xhdpi/
  splash.png   // 960 x 720px
drawable-hdpi/
  splash.png   // 640 x 480px
drawable-mdpi/
  splash.png   // 470 x 320px
drawable-ldpi/
  splash.png   // 426 x 320px

Is it a Cordova bug? Did I miss something?

I tested with few devices like Galaxy s3 mini, HTC but I got the samed problem on each device.

It works well in iOs.

I used cordova 3.3 and upgraded it recently to 3.4 but got the problem still persist.

Answer 1

I've just changed the sizes to:

xlarge (xhdpi): 720 x 1280
large (hdpi): 480 x 800
medium (mdpi): 320 x 480
small (ldpi): 200 x 320

And it works perfectly

Answer 2

In my case, adding

<preference name="SplashMaintainAspectRatio" value="true" />

to config.xml solved the distortion problem for me.

Answer 3

To anyone who came across this question and is using capacitor:

Capacitor < 4

There is a similar setting like the one suggested for Cordova that can be added to capacitor.config.json

"SplashScreen": {
    "androidScaleType": "CENTER_CROP"
}

There's an open issue on Github with more configuration examples here

Capacitor >= 4

Unfortunately, starting from capacitor 4 splash screens are being squashed despite the settings, so the only way to make it work seems to be 9 patch images (can be managed in Android Studio directly).

Following this tutorial solved the issue for me, and this seems the best way to deal with future capacitor changes.