[Android] Setting up a Splash Image/White

**mseeber** · 26 Apr 2012 12:10 AM

When I set up a native Adroid app with Sencha Touch 2, I get a blank white screen on the device before the index.html is displayed and no splash Image. I used the SDK Tools to create the app and tested this on multiple android devices.
I have tired different Approaces:
To speed up loading, i passed a empty css file --> no difference
I removed everything besides the microloader from the index.html
Someone suggested using a background Image in the index.html --> no difference, index.html is displayed after the white screen.
I have also inspected the generated apk file which actually contains the default splash images.

Test enviroment:

Code:

Windows 7 x64
java 7 x64
Android SDK API lvl 7 installed (since the build tool only generates apps for API lvl 7)
Sencha SDK Tools 2.0.0beta3
Sencha touch 2.0.1

Steps to reproduce the issue:

Code:

sencha app create name /path

set Android sdk path in packager.json
set platform to "Android" in packager.json

sencha app build native

My top priority would be to remove the white screen if possible, or at least turn it black.
Also I wonder if it is possible to cover it up with a splash Image, like on iOS?
Somehow it seems possible, i have seen it in the Mensa app in the Android AppStore.

**mitchellsimoens** · 27 Apr 2012 12:57 PM

Are you saying that you always get a white screen or you get a white screen but your app does finally load up?

**mseeber** · 28 Apr 2012 1:42 AM

At Startup i always get a white screen for a few seconds, then the first view appears on the screen.
Loding indicators are not displayed, even tough i changed this behavior by wrapping the loading function in app.js in a delayed task.

I assume the white screen is the background of the webview of the Native wrapper, since it is displayed even before the index.html is displayed? Is there a way to manipulate the webview , besides using another native wrapper? Maybe this would be a nice feature for the SDK Tools.

**mitchellsimoens** · 28 Apr 2012 3:49 AM

What happens when you add a style to the body? Does that change the white?

Code:

body {
    background: #000;
}

**mseeber** · 28 Apr 2012 4:45 AM

I have tried this before. Changing the bg style of the index.html file doesn't solve the problem, since the style is applied to the index.html, which loads after the white screen.

**pepperseb** · 26 Jul 2012 7:07 AM

**klaus777** · 26 Jul 2012 10:18 PM

Change your index.html:

Code:

<!DOCTYPE HTML><html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
 
    <title>MYAPP</title>
    <style type="text/css">
         /**
         * Example of an initial loading indicator.
         * It is recommended to keep this as minimal as possible to provide instant feedback
         * while other resources are still being loaded for the first time
         */
        html, body {
            height: 100%;
            background-color: #88bdd9;
           background-image: url(data/splash.png) !important;
            background-size: 100% 100%;
        }


    </style>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

**emprize** · 13 Aug 2012 8:59 PM

i got the white too, same, app works perfectly but splash screen is white for about one to two seconds, no matter i set the index.html, looking for help, my index.html

Code:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>thrall</title>
    <link rel="icon" type="image/png" href="favi.png">
    <style type="text/css">


html, body {
            background-color: #88bdd9;
           background-image: url(resources/images/bomb.png) !important;
            background-size: 100% 100%;
        }


    </style>
    <!-- The line below must be kept intact for Sencha Command to build your application -->


    
    <!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&region=HK"></script>-->
    <script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<
e;b++)a=d[b],"string"!=typeof a&&(a=a.path),document.write('<script src="'+a+'"><\/script>')}})(this);
;Ext.blink({"id":"d214e6e0-c57b-11e1-af3f-1b4558bbe109","js":[{"path":"sdk/sencha-touch-all.js","type":"js"},{"path":"app.js","bundle":true,"update":"delta","type":"js"}],"css":[{"path":"resources/css/emp.css","update":"delta","type":"css"},{"path":"resources/css/android.css","update":"delta","type":"css"}]})</script>
    
</head>
<body>
<div style="top:50%;position: absolute;margin-top: -80px;text-align: center;width: 100%;height: 30px;"><p style="color: #AAFFEE;">Welcome, Please wait for initialize</p></div>
    <div id="appLoadingIndicator">    
        <div style="background-color: #AAFFEE;"></div>
        <div style="background-color: #AAFFEE;"></div>
        <div style="background-color: #AAFFEE;"></div>
        <div style="background-color: #AAFFEE;"></div>
    </div>
    
</body>
</html>

**Kurt001** · 12 Nov 2012 8:46 AM

Hi,

is there any solution yet. I just made a build for Android and the splash screens, which I defined are still not shown.

Or is there a workaround, so that I build a Splash screen plugin for the Sencha native packager?

**huberte** · 26 Dec 2012 8:07 AM

Same question, 10 times on the forum, opened a bug tracker, but no answer :

http://www.sencha.com/forum/showthread.php?252028

[Android] Setting up a Splash Image/White

Thread Tools

Search Thread

Display

Unanswered: [Android] Setting up a Splash Image/White

Unanswered: [Android] Setting up a Splash Image/White

Still in 2.1

Still in 2.1

Tags for this Thread