I’m probably the only person that does not understand everything about SplashScreens but…
How does the SplashScreen property (.png) and the same (.png) in the Manifest relate to the use of the Cordova SplashScreen plugin.
I need SplashScreens for both Android and iOS and even though I have read the posts here and the Cordova documentation I am confused and unable to get SplashScreens to work. I don’t get errors, they just don’t work.
A simple explanation would be helpful.
Thank you.
I’ve found that when splash screens are not working, the BIGGEST issue is size. Double check ALL your sizes.
Also, on iOS the build system will ignore legacy splash screens and convert those with the appropriate size to the newer storyboard format (despite the documentation saying otherwise).
We used to be able to specify the platform=“xxx” within the splash tag but I can no longer find that documented so I moved my splash definitions into the platform tag like this:
<platform name="android">
<splash platform="android" density="port-ldpi" width="200" height="320" src="package-assets/android/splash/splash-port-ldpi.png" />
<splash platform="android" density="land-ldpi" width="320" height="200" src="package-assets/android/splash/splash-land-ldpi.png" />
</platform>
<platform name="ios">
<splash width="768" height="1024" orientation="portrait" platform="ios" src="package-assets/ios/splash/splash_ios_768_1024.png" />
<splash width="1024" height="768" orientation="landscape" platform="ios" src="package-assets/ios/splash/splash_ios_1024_768.png" />
</platform>
The above platform tags are placed BEFORE the plugins are included… and now about that. There are some HUGE problems in getting the splash screens to work on Android. What I found that works is to go a little old school and use the feature tag on the Android definition.
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
</feature>
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
I don’t want any fading splash screens so my global preferences look like this:
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="false" />
Lastly, depending on which UI framework you’re using you may have some latency issues in rendering the screen shown after the splash screen. If you hit that wall you’ll want to include cordova.js LAST in your header and in your onDeviceReady() you’ll want to .hide() the splashscreen as your last task in app startup and that’s why I have AutoHideSplashScreen set to false.
Thank you for the great explanation and the information that was definitely not intuitive.
For the examples you shared, what information do you have in the Manifest file and what information do you have in the SplashScreen Property in the Project Explorer Properties Window?
Thank you.
I think George will have to help you with that info, what I gave you came out of my raw config.xml… he’ll help you with the AppStudio ui.
Have a look at the PhoneGap samples. You’ll see that the icons and splashscreen directories are included in the the manifest property, so the files included get deployed with the project.