I have a simple Android app, compiling under the default settings for Android 13. I have followed the instructions for the splash screen, and have a 2732x3859 png file as splashTemplate.png (which takes more bytes than the entire rest of my app), and I have the 4 lines in the config.xml as called out in the docs:
preference name=“SplashScreenDelay” value=“2000” />
preference name=“AutoHideSplashScreen” value=“true” />
preference name=“AndroidWindowSplashScreenAnimatedIcon” value=“resources/splashTemplate.png” />
preference name=“AndroidWindowSplashScreenBackground” value=“#000000” />
My resources.json file is {
“fit”: “cover”,
“icon-background-source”: “#000000”,
“orientation”: “portrait”,
“position”: “center”
}
The splash screen I get is all black except for a small round circle at the center which is the center of my splashTemplate.png file. So the only thing displayed out of my enormous splashTemplate.png file is a small circle from the center.
How can I get that splashTemplate.png file to fully cover the screen instead of just showing up as a small circle at the center.
I have another totally different production app that has the same issue - it will not display the splash screen - only a small ‘splash icon’ at the center.
Later versions of Android have changed how splash screens work. System provided splash screens are now just use the app’s icon. Unfortunately there’s no work-around for this. This was a decision by Google, not by us or Cordova. If you still want a splash screen, it needs to be something you display after your app has loaded manually.
If you’re having trouble getting a reasonable icon based splashscreen, we may be able to help - but our suggestion is to simply remove splashTemplate.png for android unless you want it to be customized.
Thanks for your reply. The first thing I tried was removing splashTemplate.png, but unfortunately your build scripts reject the build if there is an iconTemplate.png, but no splashTemplate.png. (This happens both with and without the splash screen rows in config.xml). See this section of the log:
When I don’t include any splash screen rows in the config.xml, the build defaults to:
2024-02-06 23:07:51,401 - Output: 2024-02-06T23:07:51.149Z cordova-res Paths: (config: ‘/VoltBuild/config.xml’) (resources dir: ‘resources’)
2024-02-06T23:07:51.153Z cordova-res:platform Running android platform with options: {
‘adaptive-icon’: {
icon: { sources: [Array] },
foreground: { sources: [Array] },
background: { sources: [Array] }
},
icon: {
sources: [
‘/VoltBuild/resources/iconTemplate.png’
]
},
splash: {
sources: [
‘/VoltBuild/resources/splashTemplate.png’
]
}
}
Then it tries to find the splashTemplate.png, and aborts when it can’t:
2024-02-06T23:07:51.379Z cordova-res:platform Building splash resources for android platform
2024-02-06T23:07:51.379Z cordova-res:image Source file missing: /VoltBuild/resources/splashTemplate.png
2024-02-06T23:07:51.380Z cordova-res Caught fatal error: Error
at new BaseError (/usr/lib/node_modules/cordova-res/dist/error.js:8:22)
at new ResolveSourceImageError (/usr/lib/node_modules/cordova-res/dist/error.js:45:9)
at Object.resolveSourceImage (/usr/lib/node_modules/cordova-res/dist/image.js:31:11)
at async generateSimpleResources (/usr/lib/node_modules/cordova-res/dist/platform.js:82:20)
at async Object.run (/usr/lib/node_modules/cordova-res/dist/platform.js:36:26)
at async AsyncFunction.CordovaRes [as run] (/usr/lib/node_modules/cordova-res/dist/index.js:35:36)
at async AsyncFunction.runCommandLine (/usr/lib/node_modules/cordova-res/dist/index.js:93:28) {
errors: ,
code: ‘BAD_SOURCES’
}
ERROR: Missing valid source image for Android splash screens (sources: /VoltBuild/resources/splashTemplate.png)
2024-02-06 23:07:51,406 - Missing valid source image for Android splash screens
See Generating Icons and Splash Screens | VoltBuilder
2024-02-06 23:07:51,406 - Build failed 879a8653-0da8-4b5f-9820-12b3bcf86cc9
2024-02-06 23:07:52,726 - Output:
I’d love to be able to skip the whole Android splash screen business, but still keep my Android icon. But so far I have been unable to do that.There must be some magic I can put in the config.xml file. I hope you can tell me how to do that.
Thanks,
Bob
Bob,
I’m in the process of fixing this and it should be available shortly. I’ll message again once it’s done.
We’ve got a fix in place that we’d like you to try. You’ll need a resources.json if you don’t have one already.
Add the following property to the file:
"type": "icon"
If you are using adaptive icons, you need to change "icon" to "adaptive-icon".
That should allow you to skip generating a splash screen and just generate an icon. Let me know if that helps the situation.
This move from Android/Google of limiting the splash screen to the app’s icon really pisses me off. I use it for company branding.
1 Like
We’re frustrated by it as well. We get a lot of questions regarding this and unfortunately there’s nothing we can do about the native splash screens.
We have seen people implement their own custom splash screen when the app starts, which is an option many Android apps have opted for. Essentially displaying a “Loading…” screen while they do some work, or even just pause for a few seconds to display branding information. That’s likely your best bet.
I’m back to this problem… again…
Google is threatening to close my dev account if I don’t get this resolved by March 1st.
I have the iconTemplate and splashTemplate and the resource.json exactly as described in your documentation but my image is too big for the circle. I tried your “type”:“icon” work around and while that was better it was still a non-starter.
It would be great if you could give some more info on your last comment in this thread… about displaying a “loading screen”…
If I understand you (and I’m sure I don’t), I think an ajax animated icon would be best along with a
<preference name="AutoHideSplashScreen" value="true" />
That way the problem looks like it’s a google/android problem and not ours. When the splash cycle is complete, we get control and we can then show/hide our branding/splash as we see fit.
Also, I will add that using the docs did not create splash screens for iOS.
Can you help me move this along please?
I have the iconTemplate and splashTemplate and the resource.json exactly as described in your documentation but my image is too big for the circle. I tried your “type”:“icon” work around and while that was better it was still a non-starter.
This is just a solution to create an icon without a splash.
It would be great if you could give some more info on your last comment in this thread… about displaying a “loading screen”…
You’ve pretty much got the right idea. You can also display an icon based splash and then transition to an in app full screen splash.
Also, I will add that using the docs did not create splash screens for iOS.
This would be expected using "type": "icon" - is that what you did?
The splash screen has a solution.
- Create a blank splashTemplate.png sized 2732x2732
- Open your iconTemplate.png (1024x1024) and then:
- If your logo is wider than it is tall or taller than it is wide (rectangle vs square) what you want to do is take the 1024x1024 iconTemplate.png and increase it’s size 170%, copy that image and then paste it into your 2732x2732 iconSplash.png image and center it.
- If your logo is square (same deminsions on all sides) you can repeat the above process with a 75%-80% (x 180%) increase of the original iconTemplate.png and paste that into the blank splashTemplate.png.
I will keep my iOS splash and icons and hope this process doesn’t overwrite them. The documentation isn’t clear about what happens when you try to use both. (FWIW, this did overwrite the existing splash screens and icons).
Next for me are the icons. I’ve used EasyAppIcon.com to generate the adaptive icons but their instructions are for using the AndroidManifest.xml vs the Cordova config.xml so I’m not sure how to handle integrating them into the Cordova project. They gave me this .xml along with all the various icon and background files:
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
Suggestions?
I’ve got an Android app that side steps all of the above by using:-
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="-1"/>
and then setting a ‘new splashscreen’ as the first form which opens the 2nd form after 5 seconds.
Is this something that will solve the splashscreen issues?
N