1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    mseeber is on a distinguished road

      0  

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

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


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    900
    Answers
    3574
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Are you saying that you always get a white screen or you get a white screen but your app does finally load up?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    mseeber is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    900
    Answers
    3574
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    body {
        background: #000;
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    mseeber is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    103
    Vote Rating
    10
    Answers
    5
    pepperseb is on a distinguished road

      0  

    Default


    Bump

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    131
    Vote Rating
    6
    Answers
    7
    klaus777 is on a distinguished road

      -1  

    Default


    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>

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    37
    Vote Rating
    1
    emprize is on a distinguished road

      0  

    Default


    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>

  9. #9
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    587
    Vote Rating
    32
    Answers
    35
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default Still in 2.1

    Still in 2.1


    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?

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    177
    Vote Rating
    9
    huberte will become famous soon enough

      0  

    Default


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

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