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.

1 Like
#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.

2 Likes
#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

1 Like
Capacitor as default
#10

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

#11

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>
#12

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