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

I just found out that android has changed the SplashScreen API.. So here is the new dimensions for new splash screen logo So looks like we have to give up on splash screen image. You can set the app logo with this preference. Keep in mind that the logo will be displayed in a circled container as in dimension page.

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

You can change background color with

<preference name="AndroidWindowSplashScreenBackground" value="#b51b1b" />

Answer 2

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 3

I tried the method above but got an error, because I couldn't find the xml directory that I created.

I created a layout folder and moved the xml to that folder:

 platforms\android\app\src\main\res\layout\splash.xml

then change the themes xml file :

platforms\android\app\src\main\res\values\themes.xml

replace string number 5 :

<item name="windowSplashScreenAnimatedIcon">@layout/splash</item>

that way the splashscreen icon can change. I made an xml splashscreen using the website https://svg2vector.com, it's very easy just input the SVG file and it becomes xml.