Page 1 of 2 12 LastLast
Results 1 to 10 of 14

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

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default [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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

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

    Code:
    body {
        background: #000;
    }
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
      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
    Answers
    5
    Vote Rating
    10
      0  

    Default

    Bump

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    154
    Answers
    8
    Vote Rating
    6
      -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
      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
    Dsseldorf, Germany
    Posts
    594
    Answers
    35
    Vote Rating
    33
      0  

    Default 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
      0  

    Default

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

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

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •