Splash Screen is squashed on Android

[potije]

My splash.png resource has the correct resolution of 2732x2732, and yet when I run cordova-res and test the app on my phone it is clearly squashed... Is there something I am missing, because I have not read about anyone with this problem.

Original:

Squashed:

[basvdijk]

Can confirm this, we are experiencing the same issue. On iOS it seems to work fine.

[Amatewasu]

It looks like adding "--fit contain" in the cordova-res command get rid of this issue. Because the default resizing method is --fit cover.

[basvdijk]

@Amatewasu I've tried this, but it gives a square squeezed splash screen.

[Amatewasu]

Finally, I also have the same issue and I don't know how to get rid of it.

[talhaazhar]

Can confirm that I am also struggling with the same issue for Android.

"@capacitor/android": "^2.4.4",
"@capacitor/cli": "2.4.4",
"@capacitor/core": "2.4.4",

[talhaazhar]

Seems like adding androidScaleType value helped me for Android. I do not know the equivalent for Cordova, but for Capacitor it was as simple as editing the capacitor.config.json:

"SplashScreen": {
    "androidScaleType": "CENTER_CROP"
}

Also, here is a list of scale types to pick from.

[robertadamsonsmith]

I was having the same problem, and adding this to config.xml fixed it:

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

(I've only tested on my Android phone, so can't say for sure if it works as intended in all cases)

[basvdijk]

@talhaazhar when I use this option I still briefly see the stretched splashscreen before it shows correctly. Did you have the same?

[talhaazhar]

@basvdijk I had to settle for diving into the native side and creating a 9-Patch File for Splash Screens.

Honestly worth spending the time to create one and never having to worry about it if you have already made the switch from Cordova to Capacitor. I found cordova-res support for Capacitor to be a little limited as of yet (even for icons) and @romannurik Android Asset Studio is a life-saver.

[holygekko]

The problem, as far as I can see it, is that the splash screen is rendered with a resolution that does not include the bottom navigation bar. The default settings hide the bottom navigation bar which leaves us with a stretched splash screen.

After a night of trial and error I found a combination of settings that keeps a margin on the bottom of the screen (so the splash screen doesn't stretch) and fills it with a color.

You can generate the images as normal: cordova-res android --skip-config --copy

Next modify two files:

capacitor.config.json should contain this (replace backgroundColor with something that suits your design):

"plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "androidScaleType": "CENTER_CROP",
      "splashImmersive": true,
      "backgroundColor": "#00405b"
    }
  },

android\app\src\main\res\values\styles.xml change:

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

to:

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
        <item name="android:windowIsTranslucent">true</item>
</style>

Run npx cap sync android so capacitor can put everything in the right place

Don't be fooled by the emulator, it doesn't show it correctly. Test it on a real device by exporting and installing the apk.

credits to this SO post that got me (finally) in the right direction: https://stackoverflow.com/a/68858732

[dminkovsky]

@talhaazhar thanks for linking the 9-patch article. At the end it mentions changing <bitmap to <nine-patch, but I'm not seeing how to do this. The "launch_splash.xml" mentioned in the article no longer exists anywhere. Do you remember what you did?

[talhaazhar]

@dminkovsky the tutorial is using an older version of Capacitor. I am assuming that you are using Capacitor 2+?
If so, simple delete the splash folder under res/drawable and make sure that you are using the splash.9.png file name (as mentioned in the tutorial.

[dminkovsky]

@talhaazhar thanks a lot for the reply.

Yep, I am on v2 still. So it's just a naming convention? I thought this might be the case, but I had a few blocking issues that prevented me from just trying it out.

Thanks again for this lead. Using the 9 patch definitely seems like the better approach.

[progcode]

I have same issue with ionic5/6 and capacitor3. but this solution is works perfectly: https://stackoverflow.com/a/69659719/2059039

thanks @holygekko

[uncoded-apps]

The issue I had was with in capacitor.config.js

Eventually I found that androidScaleType doesn't work if you've set useDialog to true. Once I changed my config to the following, everything worked fine.

plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      launchAutoHide: true,
      backgroundColor: "#ffffffff",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: false,
      splashFullScreen: true,
      splashImmersive: true,
      layoutName: "launch_screen",
      useDialog: false,
    },
  },

[mirko77]

All went belly up with Capacitor 4.

Using 9 patch images keeps the aspect ratio in portrait mode, but the splash screen is still squashed in landscape mode, why is that?

[mlynch]

Closing as this isn't an issue with the @capacitor/assets new version of the tool. If it is, please let me know and I'll reopen. If this should be filed in the Capacitor repo please file an issue there instead, thanks.

[gelinger777]

Whoever stambles upon on this issue, please see https://stackoverflow.com/questions/66285483/ionic-capacitor-android-splash-screen-responsiveness .