Capacitor android splash screen stretched

Switched from Cordova to Capacitor lately? The SplashScreen plugin doesn't render the Android screens properly, here's the fix.

Problem

I just switched an app from using Cordova to Capacitor. In doing so, I am using the new SplashScreen implementation. On Android, the screens are all warped. Here's the fix.

Solution

1) In the styles.xml (android/app/src/main/res/values/styles.xml):

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">#4D4D4D</item>
</style>

Where the hex colour is the same as the background of your splash screen image.

2) In the capacitor.config.json (your app root /capacitor.config.json):

Note the plugins -> SplashScreen node below:

{
  "appId": "<your-app>-id>",
  "appName": "<your-app-name>",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "androidScaleType": "CENTER_CROP",
      "showSpinner": true,
      "splashFullScreen": false,
      "splashImmersive": false
    }
  }
}

NOTE: I have autohide set to false as I programatically hide when I'm ready.

3) Sync your project:

$ npx cap sync

Conclusion

This does introduce a blank screen before the splash image shows, but it's better than the default behaviour and totally acceptable as there's no sudden colour change or flash of the screen and people aren't looking at the splash screen for hours Hope this helps,

D

Source: https://github.com/ionic-team/capacitor/issues/1627

Comments: