CODEWITHSUNDEEP
androidcordovasencha-touchsencha-touch-2.3
Sergio Prado
Sergio Prado

Reputation: 1206

Flash between splash screen and final app load for some Android phones

I have a PhoneGap/Sencha Touch app that has three basic states on app load: splash screen, webview is loaded but Sencha Touch is loading, and Sencha Touch is fully loaded.

On some Android phones (such as my Kyocera Rise), everything goes smoothly. I see the splash screen, then on deviceready, navigator.splashscreen.hide() is successfully called. The html/css hardcoded loading indicator that I have on index.html is shown while Sencha Touch is loading, then when the Sencha Touch code is loaded it shows the fully-loaded app.

However, on other phones (such as my Galaxy S3), things do not work so well. I see the splash screen, then deviceready the splashscreen is hidden. However, the hardcoded loading indicator on index.html does not appear. All I see is a white (or sometimes black) screen. When the Sencha Touch code is fully loaded, the app does successfully appear, however.

Here's what I've tried: - Removing various pieces of code. Removing the Sencha Touch code entirely does get rid of the flash and lets the hardcoaded loading indicator on index.html appear.

Based on this information, it looks like this has something to do with Sencha Touch, since completely removing the Sencha Touch code lets the loading indicator show. Maybe has something to do with rendering as well, given that the alert indicator also lets the loading indicator show. However, that's all I've got. It looks like other people have encountered this sort of thing, primarily on iOS and Blackberry though. I haven't found any proposed solution that I've seen elsewhere that seems to fix my issue; a lot of it is just the fact that people used to not be able hide the splashscreen on deviceready.

Is there something I'm missing here? Why might this sort of thing be happening? Why would it only happen on some Android phones?

Upvotes: 0

Views: 1054

Answers (2)

Amar1989
Amar1989

Reputation: 512

You can change sencha base color as your splash screen , don't delay app loading or dont forcefully show splashscreen.

use this css :

body {
 height: 100%;
 background-color: #1985D0;// change this as per your splash screen
 }

Upvotes: 0

OhmzTech
OhmzTech

Reputation: 897

You might find yourself spending quite a long time trying to perfect this. We know the first launch of the app is rather important for UX, however (as you correctly identified) the huge number of Android devices/OS versions out there actually make it a rather daunting task. We've found one good solution is to actually hide the Sencha app while it's loading, rely on your index.html loading indicator, and then delay show the Sencha app itself.

It definitely sounds like this might be a solution for you, given you have confirmed you don't see a delay going between the Android splashscreen and the index.html loader. Depending on how exactly you are initializing your Sencha app, you probably want to hide the Ext.Viewport. I would start by putting Ext.Viewport.hide() into your initialization method. If this solves your issue, just show the Viewport again shortly delayed upon Ext.application.Launch.

Upvotes: 1

Related Questions