Ionic 6 / Capacitor 4 - Android Splash Screen is being streched

Hello Team,

It’s a really frustrating and time-consuming issue in the previous version of Ionic and the latest one too.

Have been trying to resolve the issue of the splash screen being stretched in Android for the last couple of days (using ionic 6 and capacitor 4) but still, there is no luck.

In Capacitor 4, there are a few changes in the styles.xml file that don’t allow me to follow the previous fixes like settings background to @null.

The old styles.xml:

`<?xml version="1.0" encoding="utf-8"?>

<!-- Base application theme. -->
...

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:background">@null</item>
</style>


<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@null</item> // to avoid splash screen streching
</style>

`

The new styles.xml:

<?xml version="1.0" encoding="utf-8"?>
...

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar"> //new changes
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:background">@null</item>
</style>


<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen"> //new changes
    <item name="android:background">@drawable/splash</item> // @null does not work in the new version
</style>

I tried applying @null instead of @drawable/splash in the new version but it doesn’t work (which was working fine in the older version).

If I replace the new styles.xml with the older one, it doesn’t show a splash screen at all. Could you please explain what exactly is the issue?

Perfect

Stretched with Ionic 6 / Capacitor 4

FYI, I tried all old methods like capacitor config changes or styles.xml changes, but none is working.

current capacitor.config.ts config:
`plugins: {

SplashScreen: {
  showSpinner: false,
  androidScaleType: 'CENTER_CROP',
  launchShowDuration: 2000,
  launchAutoHide: true,
  backgroundColor: '#ffffff',
  splashFullScreen: false,
  splashImmersive: true,
  useDialog: false
}

}`

still no luck…please help if you’re using the latest versions of capacitor and ionic.

2 Likes

I just fixed by following these steps:

Replacing

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

with

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

And adding: this.statusBar.overlaysWebView(false); in the app.component.ts file before this.splashScreen.hide();.

Still, I don’t think it’s the correct way to do so would expect if Ionic brings a better solution.

First off, you NEVER need to edit the android platform files for this. Just need to make the right image sizes as required and use cordova-res to generate: GitHub - ionic-team/capacitor-assets: Local Capacitor icon/splash screen resource generation tool

Actually you can skip all of that pain very soon when my splash screen plugin comes out. Stay tuned…

2 Likes

There are a lot of issues with Ionic 6 and Capacitor 4. Many plugins are breaking for Android.

I did use the correct dimensions and used cordova-res to generate resources. Still didn’t work.

Incorrect! There’s nothing wrong with ionic and capacitor. It’s up to the developer’s to update their plugins accordingly. Doc clearly states several compatibility-issues and have a list of incompatible plugins.

You may have just tested with one or two plugins and built the app. Obviously, it’ll work fine.

Try firebase-messaging, firebase-analytics plugins, @capacitor-community/capacitor-googlemaps-native - npm.

Also, try generating cordova resources with different images (except default Ionic graphics) and you’ll see the splash screen is being stretched.

I’m having the same problem, but it’s only on android.

This post was flagged by the community and is temporarily hidden.