splash screen / icon overlay

8 posts, 0 answers
  1. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 17 Dec 2013 Link to this post

    when I launch my app on iOS, first the app icon gets blown up to full-screen size, then a splash screen appears over that, and then another splash screen appears over that.

    Is there a way to set this up so that there's just one splash screen and no stretched icon or double splash?
  2. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 17 Dec 2013 Link to this post

    Does anyone else have this same issue? with the expanding icon and overlapping splash screens?
  3. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 20 Dec 2013 Link to this post

    Hello Michael,

    We have not been contacted with such a problem before, so can you share which is your project that exhibits the issue? What you can try on your end is to change the AutoHideSplashScreen Cordova setting to false in the iOS Config.xml of your project (see Edit Configuration Files).

    Regards,
    Kaloyan
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  4. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 20 Dec 2013 Link to this post

    Setting  AutoHideSplashScreen to false leaves the splash screen up, as expected (I think?). It doesn't help anything, but it does reveal that the splash doesn't cover the bottom part of the screen. I think this might be why there appears to be two splash screens? The first splash (the one that comes up over the expanded icon) covers the screen correctly and is centered. The splash screen that appears with the app content in the background is not full screen, and so it appears to "jump up" since it is off center. If it were aligned correctly to cover the screen, the transition would maybe be seamless.
  5. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 20 Dec 2013 Link to this post

    Perhaps its a side effect of: statusBarStyle: "black-translucent"?
  6. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 20 Dec 2013 Link to this post

    I've attached two pictures of the problem.

    in picture 1: after clicking the app icon, the icon expands full screen (the large background image) with a splash screen (green with the little centered icon) over it.

    in picture 2: after the stretched icon disappears, the splash screen shifts upwards. notice empty space at the bottom of the screen.
  7. Fatme
    Admin
    Fatme avatar
    7 posts

    Posted 24 Dec 2013 Link to this post

    Hi Michael,

    Is it possible to export your project (or at least a sample that reproduces the strange behavior) and send it over for investigation? You will find the export procedure described in here. You should be able to attach the archived files to your reply in this thread.
     
    Thank you very much for the help in advance.

    Regards,
    Fatme
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  8. Tom
    Tom avatar
    1 posts
    Member since:
    Jan 2013

    Posted 28 Oct 2015 in reply to Fatme Link to this post

     In the head add this:

    <script type="text/javascript" charset="utf-8">
            // Wait for device API Libraries to load
            function onBodyLoad()
            {
               document.addEventListener("deviceready", onDeviceReady, false);
            }
            function onDeviceReady()
            {
                navigator.splashscreen.show();
            }
        </script>​

     In the body tag call <body onload="onBodyLoad()">

    Add this to the bottom of your index.html:

    <script type="text/javascript">    
            setTimeout(function() {
                navigator.splashscreen.hide();
            }, 4000);
        </script>

     Verify this is set in config.xml

      <preference name="AutoHideSplashScreen" value="false" />​

Back to Top