Can someone give me a summary of how splash screens "happen" in Appbuilder?

[Denise]

This isn't a question about generating or uploading the image assets (I love the new icon & splash generator, BTW), but about how the splash screen is actually displayed by the app.

Appbuilder seems to require that there be a splash screen --- is this a Telerik requirement, a Cordova requirement, or a mobile platform requirement?   I know Cordova has a splash screen plugin, but I am not using it --- is Appbuilder using the Cordova plugin under the hood?  Or doing its own thing?

Knowing this would help me to figure out if/how the splash screen is configurable.   And also address questions ​or issues to the right forum :-)

What I really want to do is *remove* the splash screen altogether --- I don't think I need it, and on Android in particular it displays for *way* too long.

[Dimitrina]

Hello Denise,

The splash screen is a graphical control element consisting of window containing an image to appear while the app is launching. Usually, it is the operating system that takes care of showing the splash screen. It is enabled by default in the AppBuilder templates (and inside your project) and it will appear for the default amount of time before hiding and the default time is 10 seconds.

There are a few key points to taking control over how splash screens work:
- it is recommended to use the SplashScreen Apache Cordova plugin which provides thenavigator.splashscreen.show and navigator.splashscreen.hide methods. You can read more about the SplashScreen API here. 
AppBuilder supports the SplashScreen plugin and you can therefore manually hide the splash screen through the plugin's API. For the purpose, you can subscribe for the deviceready event handler, enable the Splash Screen plugin from your Project Properties and invoke navigator.splashscreen.hide() to hide the splash screen earlier.
For example:

document.addEventListener("deviceready", function () {
    navigator.splashscreen.hide();
...
}

Basically, for your development goals you will need to hide the splash screen using navigator.splashscreen.hide. In addition, if you are developing for Android, you can take advantage of a configuration setting in the Android config.xml (accessible via right-click on your project -> Edit Configuration -> Android Config.xml). This is the SplashScreenDelay property.
- you can change the splash screen images. Instead of playing with the files in the App_Resources folder, you need to use the Project Properties dialog to configure those. 
You are most likely to handle the splash screen inside the onDeviceReady event.

- you can only test the  splash screen functionality by deploying your project as an application package on device. Running it in the simulator or in the companion app will not work. For a complete list of the limitations in the companion app and the simulator, check here and here.

You can also refer to the online documentation on: 
- Working with Apache Cordova Plugins
- Enable and Disable the Core Plugins.

I hope this helps. Should you have any other questions, do not hesitate to contact us.

Regards,
Dimitrina
Telerik

 

 

[Denise]

Thank you Dimitrina --- that makes things much clearer!