Splash Screen is stretched in some devices

Capacitor
#1

Hello.
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)

image
image360Ă—644 9.23 KB

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

image
image292Ă—655 7.13 KB

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

splash
splash960Ă—1600 7.44 KB

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.

#2

Try adding this to the config.xml Preferences:

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

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

#4

Hi,

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

#5

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

#6

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

#7

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.

#8

Hi,
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 :
https://capacitor.ionicframework.com/docs/apis/splash-screen

You can consult available scale type choices here :
https://developer.android.com/reference/android/widget/ImageView.ScaleType.

I hope this will help you.

1 Like
#9

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?

Edit:
This solved my problem