Migtrating to new splash screen api for cordova-android 11

[Mister-CK]

Hi,

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:
<preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/label/android/icon/prod/res/mipmap-anydpi-v26/ic_launcher.xml" />

However, this gives me 2 build errors. Because the ic_launcher.xml refers to a foreground and a background image:
<?xml version="1.0" encoding="utf-8"?> <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background"/> <foreground android:drawable="@mipmap/ic_launcher_foreground"/> </adaptive-icon>

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

[Mister-CK]

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. As per the docs here: https://developer.android.com/develop/ui/views/launch/splash-screen

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:

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.

[breautek]

Just to add some knowledge here...

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.

If you're using XML, then yes since the image is a vector and can be scaled, allowing you to use dp as your base/source pixels.

If you're using a rasterized images like PNGs, you'll need scale it up. x4 for xxxhdpi devices. Otherwise it will look pixelated. Lower dpi devices should scale it down automatically. This is less efficient than using vectors, but you can assume broad support.

Vector support was added in Android 5 (or 5.1 don't quite remember) but some vector features requires API 24 (Android 7). If you're vector is using an unsupported feature, it usually appears in a form of an AAPT error during the build stating that the min SDK needs to be at least API 24. Adaptive Icons are also supported here, but requires API 26 for your Min SDK.

[Mister-CK]

Thanks for the extra info. We are on min-sdk 26, so we should be in the clear 👍