Customizing the iOS and Android Sencha Touch Load Screen and Getting Rid of Blinking on Application Launch

Note that on iOS the order is

• load screen (Sencha icon on the white background)
• blue blinking dots
• app’s first screen

On Android the order is

• blue blinking dots
• app’s first screen

This is what I do, which makes the load screen last until after the app is launched. This hides the blue blinking dots with the load screen image.

Step 1: Download the Cordova splashscreen plugin and put it in your project

• The name of the plugin is org.apache.cordova.splashscreen
• The current download location is https://github.com/apache/cordova-plugin-splashscreen

Step 2: You must set the AutoHideSplashScreen property in config.xml for iOS to false

Example config.xml content

...
 <preference name="KeyboardDisplayRequiresUserAction" value="true" />
 <preference name="SuppressesIncrementalRendering" value="false" />
 <preference name="UIWebViewBounce" value="true" />
 <preference name="TopActivityIndicator" value="gray" />
 <preference name="EnableLocation" value="false" />
 <preference name="EnableViewportScale" value="false" />
 <preference name="AutoHideSplashScreen" value="false" />
 <preference name="ShowSplashScreenSpinner" value="true" />
 <preference name="MediaPlaybackRequiresUserAction" value="false" />
 <preference name="AllowInlineMediaPlayback" value="false" />
 <preference name="OpenAllWhitelistURLsInWebView" value="false" />
 <preference name="BackupWebStorage" value="cloud" />
 <preference name="fullscreen" value="true" />
 <preference name="webviewbounce" value="true" />
...

Step 3: Add JavaScript code in WebContent/index.html that listens for when the device is ready, waits a second arbitrarily, and then turns off the splash screen manually

<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>

<!-- PUT THIS CODE UNDER THE MICROLOADER -->
<script type="text/javascript" charset="utf-8">

 document.addEventListener('deviceready', function() {

 setTimeout(function() {
 navigator.splashscreen.hide();
 }, 1000);
 });
</script>

To change the image used in for the load screen look for the locations listed in app.js:

 startupImage: {
 '320x460': 'resources/startup/320x460.jpg',
 '640x920': 'resources/startup/640x920.png',
 '768x1004': 'resources/startup/768x1004.png',
 '748x1024': 'resources/startup/748x1024.png',
 '1536x2008': 'resources/startup/1536x2008.png',
 '1496x2048': 'resources/startup/1496x2048.png'
 },