Migrating to cordova-android-11 and dealing with the new splash-screen api

Question

I am trying to migrate to cordova-android-11 (from 10.1.2). The only issue I still have is the splashScreen. I understand that I now have to use the splashSCreen api. I tried to do this by creating a new Icon in android studio as described here: https://lessons.livecode.com/m/4069/l/1496759-how-to-create-and-use-adaptive-icons-on-android. I subsequently added the newly created Icon (ic_launcher.xml) to my cordova project, in the resource folder. I added the path to this file as a preference in the config.xml, like so:

However, this gives me 2 build errors. Because the ic_launcher.xml refers to a foreground and a background image:

These do not exist in the Cordova-Android project. Even when I try to add them to my resources, they aren't copied over to my platforms/android folder.

Can someone explain to me which files to add where and more generally how Cordova handles this new splash-api? I can find a lot of documentation from android on how to create the new icons. But all I can find for Cordova-android is to add that preference to the config.xml, but nothing on what that file should contain. How does it handle different pixel densities? The icon says any-dpi, but how does it achieve this in cordova?

Thanks in Advance, Any help here is much appreciated!

How to make adaptive icons: https://developer.android.com/studio/write/image-asset-studio#create-adaptive

relevant SO question: Cordova 11 - Splash Screen - what goes in splashscreen.xml

I think this is deprecated, but it might be helpful in finding a solution: https://www.mathew-paul.nz/posts/cordova-android-adaptive-icons/

(copy to git issue: https://github.com/apache/cordova-android/issues/1528)

Answer 1

After a bunch of trial and error I think I finally got it to work in way that should work on all devices. The essential steps I was missing, is that you HAVE TO put your Icon on a square background of size 288px and have your Icon fit within a 192px circle on there. As @ddassa explains in the comments.

The second thing that I missed is in order to create the right xml. You have to start with an .svg and create a Vector Asset rather than an Image Asset. This .xml uses density independent pixels(dp's) and should thus work the same on all devices.

TL;DR:

Step 1: create an svg of 288x288px. With the same background colour as the page your loading the icon on and put your logo in the middle of this square. Your logo needs to fit within 192px. Like in this image:

Step 2: Use android studio to create an .xml file. To do this, open a new project with 'empty activity'. right click on the res folder, go to new -> Vector Asset. Select your image from step 1. going through the wizard should result in generating one .xml file.

Step 3: add this .xml file to your resources in Cordova and link to it in your config.xml like so:

<preference name="AndroidWindowSplashScreenAnimatedIcon" value="path to yourIcon.xml" />

The xml file has dp's, which stands for density independent pixels. From that I conclude that it should work independent from screen size and resolution.

link to splashscreen page in android docs (where I got the image from): https://developer.android.com/develop/ui/views/launch/splash-screen

Answer 2

For those looking for a simple solution that doesn't require XML. Create a 192x192 PNG file with your logo in the middle and reference it as AndroidWindowSplashScreenAnimatedIcon. See sample logo below.

Another note is that your splash screen has to be square and won't be scalable much, but it's really simple.

Sample settings for config.xml:

<platform name="android">
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="FadeSplashScreenDuration" value="0" />
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/android/splash/splash-logo.png" />
    <preference name="AndroidWindowSplashScreenBackground" value="#ffffff" />
</platform>