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

Brebner

check this ionic.zendesk.com/hc/en-us/articles/… – Sporophyll

Hi @Keevstudio - I've seen that guide before, it's quite helpful but it doesn't really explain how to do what I'm asking about. – Brebner

Answer 1

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

Brebner

Awsome thanks, really helped me and it worked first time. Note that in a simulator it does not always work on first launch due to a known issue cordova.apache.org/docs/en/11.x/core/features/splashscreen/… – Luxe

This is all about generating an icon. Nothing in the Livecode link ever mentions anything about a splashscreen. – Pensioner

The Livecode link talks about a new image asset, and creates a bunch of assets as part of the process. One of the assets it creates is something called activity_main.xml which is what I used for the Splash Screen. – Brebner

Answer 2

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.

Merritt

I found that lessons.livecode.com/m/4069/l/… is an easy step by step tutorial to generate an adaptive icon from an existing png file I used, and then using this icon in the splashscreen. – Melar

Thanks it worked, for me the path was resources/android/splash/drawable-port-xxxhdpi-screen.png – Illusory

Answer 3

I'm not sure that it's the best solution, but if like me you just want something quick and simple, you can point to one of your existing icon files (instead of that new .xml), like this:

<platform name="android">
    <!-- Default -->
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/android/screen/splash-port-xxxhdpi.png"/>
</platform>

My icon file is rectangular, and in the splash it's circular, and quite small. However, it's good enough for me.

Thersathersites

Answer 4

I finally found out what is supposed to be in the xml file! What you do is, you create an image like Bengrah says with android studio. However you do so with an .SVG file, NOT a .png. This results in one icon.xml file that you can then add to your cordova project and refer to in your config.xml.

This still looks bad for my app. I think it is probably easier to get it to work with a pgn. As I understand it now, you need an icon with a size of 288dp for the square and the icon itself needs to be centered and fit within a circle of 192dp. (assuming you don't use a background)

I am not yet sure how to make sure your image is in dp rather than pixels. Or if this is done automatically.

Collotype

Answer 5

i created vector xml file online from my biggest PNG image using the site https://svg2vector.com/ i removed all lines below:

<platform name="android">
    <splash density="land-hdpi" src="res/screens/android/screen-hdpi-landscape.png" />
    <splash density="land-ldpi" src="res/screens/android/screen-ldpi-landscape.png" />
    <splash density="land-mdpi" src="res/screens/android/screen-mdpi-landscape.png" />
    <splash density="land-xhdpi" src="res/screens/android/screen-xhdpi-landscape.png" />
    <splash density="port-hdpi" src="res/screens/android/screen-hdpi-portrait.png" />
    <splash density="port-ldpi" src="res/screens/android/screen-ldpi-portrait.png" />
    <splash density="port-mdpi" src="res/screens/android/screen-mdpi-portrait.png" />
    <splash density="port-xhdpi" src="res/screens/android/screen-xhdpi-portrait.png" />
</platform>

and put this line:

<platform name="android">
     <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screens/android/splashscreen.xml"/>
</platform>

it solve my problem

Valued

Answer 6

Thank you @Zvika, your answer is good enough for me. I added the .png instead of the .xml and also added a background color, splash screen deley and fade.

<platform name="android">
   ...
   <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/ic_launcher-gelb-192.png"/>
   <preference name="AndroidWindowSplashScreenBackground" value="#155169" />
   <preference name="SplashScreenDelay" value="1000" />
   <preference name="AutoHideSplashScreen" value="true" />
   <preference name="FadeSplashScreen" value="true"/>
   <preference name="FadeSplashScreenDuration" value="2000"/>
   ...
</platform>

Dingbat

Answer 7

Livecode create images assets as shown in this site. then create folders res/screen/android(and ios)/

create a splashscreen.xml file insert the following code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TextView  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:text="Loading...."
/>
</LinearLayout>

save it.

Finally

<preference name="AndroidWindowSplashScreenAnimatedIcon"  
value="res/screen/android/splashscreen.xml" /> 

add this to config xml. Now take a build

for more customization on Cordova splash screen

Pren

Where in your splashscreen.xml do you reference the image asset generated from the Livecode guide? – Omaromara

Answer 8

work for me 100%

If you're aiming for the latest Android SDK versions (33 and above), a mandatory step involves adding a new preference under the platform tag within your config.xml file.

<platform name="android">
     <preference name="AndroidWindowSplashScreenAnimatedIcon" 
     value="resources\splash.png" />
</platform>

Note::::: splash.png -> you can add any png file for your app in resources folder. but the image having dimension 2732 X 2732 & extension shuold be .png

that's it Thanks.

Barbaraanne

Answer 9

First of all you have to understand that the file splashscreen.xml is a simple view with some controls like image, text etc.

You can use the following sample xml as your splashscreen.xml file. You can use https://svg2vector.com/ to create the vector tag and then copy/paste this code to the below xml file.

Latest cordova version needs

<platform name="android">
     <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screens/android/splashscreen.xml"/>
</platform>

res/screens/android/splashscreen.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
    android:viewportWidth="1024"
    android:viewportHeight="1024"
    android:width="1024dp"
    android:height="1024dp">
    <path
        android:pathData="M368.5 0L369 20.5L368 2
    ....
    multiple path values here
    ....
    </vector>
</RelativeLayout>

Koestler