Make splash screen icon show when opening the app from deep link by including item in themes.xml

[veronicatc]

When opening my cordova app from deep links, the Android splash screen icon doesn't show.

I found out this is by design in Android, and to have it show, I need to add this to the theme style:

<item name="android:windowSplashScreenBehavior">icon_preferred</item>

How can I add this to the themes.xml file that is dynamically created by cordova cli when I compile the app?

Android documentation https://developer.android.com/develop/ui/views/launch/splash-screen#set-theme

Thanks!

[breautek]

Should be doable via the config-file directive.

Untested example:

<widget ... xmlns:android="http://schemas.android.com/apk/res/android">
   ...
   <platform name="android">
       ...
       <config-file target="themes.xml" parent="/resources/style">
           <item name="android:windowSplashScreenBehavior">icon_preferred</item>
       </config-file>
   </platform>
</widget

Couple of notes:

1. to use the android XML namespace, you need to add the xmlns:android attribute on the widget tag if you don't already have one.
2. the windowSplashScreenBehaviour setting is only honoured on API 33 or later. I'm not sure if it will cause issues on earlier devices.

Cordova should setup the files on the prepare command, so you can use cordova prepare android to test, then take a look at /platforms/android/app/src/main/res/values/themes.xml to make sure you're augmentation was taken. Prepare is implicitly ran on build & run as well.

Because this doesn't describe a bug I'm also going to transfer this to the main cordova repo as a discussion.

[veronicatc]

Thank you for your answer!

I have tried this. I get a warning that themes.xml doesn't exist and thus the config-file directive will be ignored. I am guessing that config-file gets applied before the themes.xml file gets dynamically created.

Do I need to create an after prepare hook script to edit the contents of the themes.xml file, perhaps replacing the </style> tag with the < item> plus </style> ? I'm not sure how I would implement that script in node.js though.

[veronicatc]

I could achieve this using an after_prepare script.

1. Make sure these are present at the tag at config.xml:

xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"

2. Add hook inside android platform section:

<hook src="scripts/after_prepare_theme.js" type="after_prepare" />

3. This is the content of after_prepare_theme.js:

`
#!/usr/bin/env node

// This hook adds a row to themes.xml after it has been dynamically created, to show splash screen icon when app is opened from deep links

var fileToReplace = "platforms/android/app/src/main/res/values/themes.xml";

var fs = require('fs');
var path = require('path');

function replace_string_in_file(filename, to_replace, replace_with, test_included) {
   var data = fs.readFileSync(filename, 'utf8');
   var doReplace=true;
   if(typeof test_included != 'undefined' && test_included != '' && data.includes(test_included)){
       doReplace=false;
   }
   if(doReplace){
      var result = data.replace(new RegExp(to_replace, "g"), replace_with);
      fs.writeFileSync(filename, result, 'utf8');
      var data2 = fs.readFileSync(filename, 'utf8');
   }
}
module.exports = function(context) {
   // var rootdir = process.argv[2]; // old cordova version
   var rootdir = context.opts.projectRoot;

   var fullfilename = path.join(rootdir, fileToReplace);
   if (fs.existsSync(fullfilename)) {
      replace_string_in_file(fullfilename, "</style>", '<item name="android:windowSplashScreenBehavior" tools:targetApi="33">icon_preferred</item></style>', 'windowSplashScreenBehavior');
   }
}

`

Tested on a device with Android 13 and on an emulator with Android 12. On Android 12 it didn't show the icon, as expected, but didn't throw errors either. Since I need this mostly for devices with Android 13 and after, this is ok for me.