Splash Screen is stretched in some devices

[daniele-networkvisio]

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.

[EinfachHans]

Try adding this to the config.xml Preferences:

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

[daniele-networkvisio]

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

[loganli]

Hi,

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

[daniele-networkvisio]

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

[Rotor7ven]

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

[silviogutierrez]

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.

[LDCSioul]

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.

[reinerluke97]

@LDCSioul

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

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

Splash Screen scaling displays twice

[MLeins]

@LDCSioul

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

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

[amaniart]

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>

[tellybrown]

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();
        }
    }

[MikoDigital]

YOU SAVED THE DAY thank you

[khashashin]

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

[Firsya]

thank you, it works.

[IdreesSindi]

@EinfachHans

atio" value="true"></prefere

Thanks , it worked for me