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.

4 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…

5 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.

any update? I’m facing this issue too.

I’m thinking of switching to Flutter or React too, since month 8 they still haven’t fixed it.

1 Like

Yes, very commercial, high prices for their own plugins, and as a result maintaining community plugins feels like giving free labor to a corporation.

I came here with the same problem - the splash screen was stretched/squashed.

I regenerated my splash screen with the tool @Hills90210 linked to GitHub - ionic-team/capacitor-assets: Local Capacitor icon/splash screen resource generation tool and this worked. The previous one had been generated by capacitor-resources and it was the problem.

1 Like

How so? what’s your source that claim these false allegations?

What needs fixing?

1 Like

@Hills90210

None of these are allegations but with proof. You can go through this thread again and see what’s happening.

Not just me, but many people are facing these issues.

1 Like

Also, you might not face this with placeholder resources of Ionic but place a new icon.png and splash.png in the resources folder with as mentioned dimensions and then generate resources. After that build the APK and you’ll find it.

Also there are multiple issues with official plugins like:

Temporarily, I used two versions of the plugin to build the app for both platforms. The latest version for iOS and old versions for Android.

Such issues show the negligence of the community product but the team is only focused on the commercial version of the Ionic Framework.

You aren’t a good source for your allegations. You just sound spiteful since nothing seems to be working for you. So let me enlighten you a bit.

Ionic does NOT control these plugins. The the plugins are owned by a random developers. if something is not working, your first place of getting help is the github repo! It’s more than likely your answer will be there. If no one seems to want to help you via their own plugin, then that says a lot of the plugin. It’s simple, don’t use it…

1 Like

those are not official plugins, and they are not Capacitor plugins

social-sharing-plugin was released 3 weeks ago with Android 12 support (by the plugin author)
BOM support for Cordova plugin dependencies was added in Capacitor CLI 4.1.0, released 5 weeks ago

Capacitor official plugins are the ones listed here and they are maintained

You sound ridiculous. I don’t have time to waste with you but tell you what’s wrong.

FYI, all plugins are listed on your official website (we only install them using the official documentation):

And here’s the blog by the Ionic team (A New Chapter for @ionic-native - Ionic Blog) that says they’ve given access to all plugins to one person named Daniel (I’m not sure if you’re Daniel talking).

Anyways, it was nice working with Ionic for the last 3 years. Have a bright future.

I’ve made my decision to not use it anymore.

:v::v::v::v::v::v::v::v::v::v::v::v::v::v::v::v::v::v::v::v:

1 Like

I’ve been trying to fix this for weeks now and I still get a stretched splash image with an app name and a stretched icon on top.

I have a OnePlus 8T on Android 12 that I test on.

This is a showstopper for me in regards to using Capacitor 4.

Hope someone finds a solution.

1 Like