Cordova 11 - Splash Screen - what goes in splashscreen.xml

Question

I'm currently trying to migrate to Cordova 11 and get to grips with the new Splash Screen API, but I've found the documentation isn't exactly clear on all points. If someone could point me in a direction on some of this stuff, I'd really appreciate it.

1. What's the best way to generate an adaptive icon?

2. In the Splash Screen docs, it specifically mentions in the Android specific documentation that you can create an XML file for your adaptive icon:

<platform name="android">
    <!-- Default -->
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/splashscreen.xml" />
</platform>

But I have no idea what should be in this splashscreen.xml file, and I can't seem to find any documentation relating to it specifically - any ideas what should go in here? We've never had to create this before as all of the properties in config.xml were sufficient.

Thanks, bengrah

Answer 1

To generate the XML file used for the splashscreen in my cordova-android 11.0.0 application, I created a sample Android app in Android Studio and, following these instructions for adding an icon to the sample app, I specified the Foreground Layer to be an SVG file of my desired splashscreen icon. I specified the background layer to be white. Then I copied the newly generated file MyApplication/app/src/main/res/drawable/ic_launcher_foreground.xml into my Cordova app and renamed it resources/android/splash/splashscreen.xml.

Lastly, I updated my Cordova app's config.xml file like so:

<platform name="android">
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/android/splash/splashscreen.xml" />
    <preference name="AndroidWindowSplashScreenBackground" value="#FFFFFF" />
</platform>

It is probably worth noting that my icon is not animated in any way.

Answer 2

After a lot of trial and error, I managed to make some headway on this. First off, I created an Adaptive Icon using Android Studio. Livecode.com has a really good guide on how to do this. Once I generated the assets, this created a new res folder with the following contents:

C:\MyApplication\app\src\main\res>tree /f
Folder PATH listing for volume Windows
Volume serial number is E47A-1E3F
C:.
├───drawable
├───drawable-v24
│       ic_launcher_foreground.xml
│
├───layout
│       activity_main.xml
│
├───mipmap-anydpi-v26
│       ic_launcher.xml
│       ic_launcher_round.xml
│
├───mipmap-hdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───mipmap-mdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───mipmap-xhdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───mipmap-xxhdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───mipmap-xxxhdpi
│       ic_launcher.png
│       ic_launcher.webp
│       ic_launcher_foreground.png
│       ic_launcher_round.png
│       ic_launcher_round.webp
│
├───values
│       colors.xml
│       ic_launcher_background.xml
│       strings.xml
│       themes.xml
│
└───values-night
        themes.xml

Next, I updated my Cordova project's config.xml file, specifically the AndroidWindowSplashScreenAnimatedIcon property to point to the activity_main.xml file that's just been generated:

<platform name="android">
   <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/layout/activity_main.xml" />
</platform>

Finally, if you check out the activity_main.xml file, it'll have some markup in it referring to constraint layouts. If you build the app at this point, you may get an error like the following:

error: attribute layout_constraintBottom_toBottomOf (aka com.yjr.jinguantong:layout_constraintBottom_toBottomOf) not found.

It looks like your project is missing a dependency, which you can add by opening project.properties and adding the following property:

cordova.system.library.2=com.android.support.constraint:constraint-layout:1.1.3

There's a bit more information found on this Github issue page - of course adding it to project.properties means if you delete your platforms folder, you will have to re-add it manually. I wasn't able to find a way to just simply add this dependency. I did get around it by deleting some of the constraint markup from the activity_main.xml file. My project builds with this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" />

</androidx.constraintlayout.widget.ConstraintLayout>

Hope that helps for anyone else who was struggling.

bengrah