parallax background

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

Digital Transformation Group LinkedIn
Building and Signing iOS apps built by Sencha and/or Cordova at the command-line
July 12, 2014
Project Bolletta: Native Android and iOS, Rambler Reader and Blue Bamboo Plugins, Signature Pad, and Continuous Integration
July 30, 2014

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'
 },

jvalentino
jvalentino
I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

Comments are closed.