igorsantos07 commented 7 months ago

Bug Report

This is the same as #1579, except I'm using Android 12 on an OnePlus 7t instead of a Realme.

Problem

Splash screen shows just the background color, no icon whatsoever.

What is expected to happen?

Migration to cordova-android 12 should go smooth, without having to do guesswork on migrating the splashscreen or why the heck the icon is never showing up.

What does actually happen?

OnePlus splashes just with the background color. A Samsung tablet with Android 11, though, works just fine*.

Honestly, while the previous user decided to just abandon the bug report, I think this is an important problem since it actually makes our Cordova app unreliable. A splashscreen without any text or icon, even though it's colored, looks like a broken app for the user. The moment they click the icon, they want to see something, and seeing just a blank/colored screen is confusing - specially if we're downloading a new payload, which could make the splashscreen hang for more time than the user would bear an empty screen.

* I realized I should try other devices only after I gave up and started googling for splash screen problems on cordova 12, and then found #1579; sadly, I had spent almost a day trying to figure out what I was doing wrong, since documentation is really lacking on that part. Specifically, it's missing an explanation on what formats are acceptable for the icon, since it looks like it only works with an XML file (from unknown origin, had to google to find how to create one) but it actually accepts the old PNG, as long as it has the proper padding. There's also no clear path of migration from the previous <splash> tags, not even in the announcement blog post - you have to read through the original Android documentation to piece stuff out, that's totally frustrating.

Command or Code

Showing here the relevant(?) parts of config.xml:

<engine name="android" spec="^12.0.1" />
<platform name="android">
    <preference name="android-targetSdkVersion" value="33" />

    <!-- TODO overrides cordova-plugin-push's requirement of 1.5.20, which causes some deprecation errors -->
    <preference name="GradlePluginKotlinEnabled" value="true" />
    <preference name="GradlePluginKotlinVersion" value="1.7.21" />

    <preference name="AndroidWindowSplashScreenBackground" value="#F8B61D" />
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/drawable/bot.xml" />
    <!-- preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/drawable/bot.png" /-->
</platform>
<preference name="AutoHideSplashScreen" value="false" />

Environment, Platform, Device

Affected device: Android 12, OnePlus 7t Working device: Android 11, Samsung SM-P205 I also tested on an ancient Moto G4 Play running Android 7, it also works fine, if this is of any help :joy:

Version information

Cordova CLI 12.0.0 (cordova-lib 12.0.1) Cordova-android 12.0.1 Target Android SDK: API 33 Linux Mint Uma 20.2 Android Studio Giraffe (only used to generate the vector XML, but could be used for debugging if necessary, I guess?)

Checklist

[x] I searched for existing GitHub issues
[x] I updated all Cordova tooling to most recent version
[x] I included all the necessary information above

breautek commented 7 months ago

Providing the icon resources you have tried might help us determine if the icon itself is being authored incorrectly.

I've recently used Android Studio to convert a SVG into a Android vector and I did notice that creating a "Vector" asset doesn't work as expected. In fact using the DP values as suggested by Google itself doesn't actually work as expected because the scale seems to be wrong. Importing an Image asset however allows you get the vector XML file with a preview, and that seems to do what you'd expect.

The docs does state that you can use a PNG however, in which case you'll probably want to scale your PNG up to xxxhpdi density, which is 4x the base "dp" unit.

Cordova enables icon with background so the following applies:

App icon with an icon background: this must be 240×240 dp and fit within a circle 160 dp in diameter.

That means if you author a PNG, you should multiply the dp units by 4, so your canvas size should be 960x960px and your icon content should not leave 640x640px diameter circle that is centered.

I've attached an inkscape template that shows what I mean, the circular area is the "visible" area of the icon. Outside of the circle is masked away. androidSplashIconTemplate.svg

And yes, I do agree that the docs could probably be a bit more clear on some of these details, but hopefully this will help you get going at the very least.

igorsantos07 commented 6 months ago

Thanks for the thorough explanation! Sorry for taking a while to respond, I moved on with other tasks guessing this was an edge case, and soon after left for vacations.

I'm back now with good news / bad news. The good news is: I found a reproducible scenario. The bad news is: this seems a bit more widespread?

Since I have no Android 13 and needed to test some possible push problems from the ~dead~ havesource plugin fork, I created a couple of emulators... And guess what? The splash icons don't show in the standard Play Services API 32 image! Not even the standard Cordova icon shows up, it's just a blank splash screen, with the correct background color though. It also seems to work fine on Android 11.

I tested that out in four different scenarios:

the generated XML from before
the old xxxhdpi PNG we were using before the Cordova upgrade
an invalid file path
a random PNG I got from Google's CC image search (wasn't properly edited to fit the space, so cropping is expected, I just wanted to know if it was a problem with my image files or not)

<preference name="AndroidWindowSplashScreenBackground" value="#F0F000" />
<preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/drawable/invalid.png" />

Random PNG, Android 13: invalid path, Android 13: invalid path or random PNG, Android 12: Random PNG, Android 11 (also worked fine with our Vector XML):

The screenshots show "Galaxy Tab A8" but that's just the screen ratio for my usual test tablet, there's nothing non-standard on these emulators' hardware profile. I created both in succession, just changing the API Level, and ran the exact same code to take the screenshots above.

breautek commented 6 months ago

And guess what? The splash icons don't show in the standard Play Services API 32 image!

You could be experiencing an android quirk: https://cordova.apache.org/docs/en/12.x/core/features/splashscreen/index.html#android

Android 12 does not show the splash screen when launching the application from Android Studio or Cordova CLI. This is a known Android 12 issue. After uploading the app to the device or simulator, exiting and opening the app will show the Splash Screen. If changes are not shown, try also performing a clean build. It has been fixed on Android 13.

To be sure, try closing the app and relaunching it directly on the device. The bug seems to only trigger (sometimes) when launching through Android Studio/CLI.