Add multiple sizes of splash screen in ionic cordova when migrating to android 12 and above

Question

Am trying to migrate ionic cordova app to android 12 (api 32). Cannot use <splash> tags anymore. instead that I should use <preference name="AndroidWindowSplashScreenAnimatedIcon" value="path to xml/png" />.

Previously I generated resources files with cordova-res, So it automatically adding resources files into config.xml like below,

    <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
    <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
    <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
    <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
    <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
    <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
    <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
    <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
    <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
    <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
    <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
    <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />

How do I do this with new way of adding splash screen..?

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

Answer 1

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