Splash Screen is stretched in some devices

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)

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

Hi,

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.

1 Like

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.

2 Likes

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

2 Likes

Im facing the same issue, the splash screen changes after a second

1 Like

Here’s what worked for me. Open values/styles.xml and make the following changes

original

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
		<item name="android:background">
			@drawable/splash
		</item>
	</style>

Modified

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
		<item name="android:background">
			@android:color/white
		</item>
</style>
3 Likes

You might try my method by moving to a vector for your splash screen. There is a builtin tool in android studio to convert svg to vector but elements wont convert.

splash.xml - remove png

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent">
<item android:gravity="center"
      android:width="400dp"
      android:height="400dp">
    <vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
        android:viewportWidth="400"
        android:viewportHeight="400"
        android:fillColor="#303030"
        android:gravity="center"
        android:width="400dp"
        android:height="400dp">
<yourVector/>
    </vector>
</item>
</layer-list>

capacitor.config.json

    "SplashScreen": {
      "backgroundColor": "#303030",
      "launchShowDuration": 30000,
      "splashImmersive": "false",
      "splashFullScreen": "false"
    },

app.component.ts

    @HostListener('document:readystatechange', ['$event'])
    onReadyStateChanged(event) {
        if (event.target.readyState === 'complete') {
            SplashScreen.hide();
        }
    }

YOU SAVED THE DAY thank you

This file not used by capacitor, it was used by cordova