Splash Screen is stretched in some devices

I have built a Ionic v4 capacitor app. Everything fine, but we noticed a strange behavior with different devices, both in the class of xxhdpi (Android).

This is how it does appear in a Google Pixel 2 (5 inches, 1080x1920)

And this is how does it appear in a OnePlus 7T (6.55 inches, 1080x2400)

This is the sample splash screen which is being used by both

I tried to use a 9-patch and result was even worse, no matter what. I tried as well to increase height of this picture to 2400, but then i had the opposite issue with a smaller screen. I even tried to edit the native part of the app, editing any xml which had a reference to splsh.png, with no result other than make it even worse (mostly fullscreen and deformed logo). How can i preserve splash’s aspect ratio?

Thank you in advance.

Try adding this to the config.xml Preferences:

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

Thank you for you answer. That setting is already in place


I’m running into the same problem. Have you found a solution for this?

Hello. Not yet. We temporarily published our app as it is, but i’ll have to be back at the issue soon.

re create the splash images and add them to their respective platforms with correct sizes

Same issue, with a brand new Capacitor 2+ project. Running it on a Pixel 2 looks fine. Running it on a Pixel 4 is stretched. Again, this is a stock project, no changes. Just what a plain “cap create” builds.

If you use the capacitor splashscreen plugin, you can set in the capacitor.config.json file :

"plugins": {
    "SplashScreen": {
      "androidScaleType": "CENTER_CROP",

Others, configuration for this plugin are available here :

You can consult available scale type choices here :

I hope this will help you.

1 Like

Hi this worked well,
but somehow for 1 second the splashscreen is streched for 1 second and then it crops the image to the right aspect ratio. Anyone facing the same issue?

This solved my problem