Splash screen issues

In config.xml, i'm setting multiple splash screen for different devices.

Am I doing this right ?

< gap:splash src="images/icones/en/splash_320_480.png"/> <!-- default : iPhone regular size -->
< gap:splash src="images/icones/en/splash_480_800.png" width="480" height="800"/> <!-- some Android phones -->
< gap:splash src="images/icones/en/splash_640_960.png" width="640" height="960"/> <!-- iPhone retina -->

It seems that the iPhone retina splash is always used for every devices...
26 people have
this question
+1
This topic is no longer open for comments or replies.
  • Hardeep Shoker (PhoneGap Build Developer) April 13, 2012 23:59
    Hello,

    This is currently a limitation with the handling of splash screens. Android only supports one size and defaults to any available (in this case your retina).

    I've essentially spent some time and rewrote how splash screens and icons are supported for every platform. The changes include handeling default splash/icons and I'm now adding the attributes gap:platform and gap:role.

    Expect this to role out either next week or the week after.

    Hardeep Shoker
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • I am using PhoneGap Build to create installers for different platforms. I also have an icon file uploaded to PhoneGap Build using admin tool. However, when I install app on BlackBerry it doesn't show icon I uploaded and shows default PhoneGap icon. Can someone please guide on how to fix this?

    This reply was created from a merged topic originally titled
    PhoneGap Build - Icon not showing up on Blackberry.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • It would be nice to add target identifier to icons and splash screens listed in confix.xml. It would lower the size of the application.

    Also Balckberry does not let configure icons with a size over 16k, which is necessary for high res icons on some other platforms

    This reply was created from a merged topic originally titled
    Need to be able to specify icons and splash screens by platform.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Does PGB supports iphone landscape splash screen?

    Right now it is not working correctly, config.xml:
    <br />
    &lt;gap:splash src=&quot;media&#47;splash_480&#46;png&quot; width=&quot;480&quot; height=&quot;320&quot; &#47;&gt;<br />


    This reply was created from a merged topic originally titled
    PGB iphone landscap splash screen.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Splash screen for android is selected from biggest gap:splash from xml. Is the same bahaviour for webOs, symbian, blackberry?

    This reply was created from a merged topic originally titled
    Splash screen for android is selected from biggest gap:splash from xml.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • I know that topic been discussed before (last reply 1 month ago on http://community.phonegap.com/nitobi/...) but nothing seem to answer my problem.

    Config.xml's docs is very light on the splash subject https://build.phonegap.com/docs/confi... and thus my understanding may be completely wrong here.

    Even though I've written multiple variation of the tag, I still get the "PhoneGap iPad Portrait" splash screen.

    <br />
    &lt;gap:splash src=&quot;icons&#47;splash480&#46;png&quot; &#47;&gt;<br />
    &lt;gap:splash src=&quot;icons&#47;splash480&#46;png&quot; width=&quot;320&quot; height=&quot;480&quot; &#47;&gt;<br />
    &lt;gap:splash src=&quot;icons&#47;splash508&#46;png&quot; width=&quot;320&quot; height=&quot;508&quot; &#47;&gt;<br />
    &lt;gap:splash src=&quot;icons&#47;splash960&#46;png&quot; width=&quot;640&quot; height=&quot;960&quot; &#47;&gt;<br />
    &lt;gap:splash src=&quot;icons&#47;splash1004&#46;png&quot; width=&quot;768&quot; height=&quot;1004&quot; &#47;&gt;<br />
    &lt;gap:splash src=&quot;icons&#47;splash1024&#46;png&quot; width=&quot;768&quot; height=&quot;1024&quot; &#47;&gt;<br />


    So any advice will be greatly welcome!

    This reply was created from a merged topic originally titled
    PG Build Splash screen.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • This problem is present at least on iPad.

    The issue has appeared in multiple apps built.
    The splash images seem offset and the wrong file displaying on iPad. (iPhone's?)
    There is also a brief white screen flashing in between splash screen and app start.
    Has this been resolved already?

    App ids
    64560
    63960

    As a related note:
    Has a solution been implemented to address the various splash screen sizes necessary for BlackBerry devices?
    I have ported Android apps to PlayBook and the only issue is that the splash screen seems stretched out when in landscape mode, fine in portrait.

    Thanks.

    This reply was created from a merged topic originally titled
    Splash Screen Problems.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • I need some help trying to setup a splash screen for PhoneGap Build - Android. I'm using a config.xml with:

    The splash shows up just fine in portrait/vertical mode, the problem is if the device orientation changes to landscape/horizontal the splash screen is stretched. Anyone know how to deal with this? I'm stuck.

    This reply was created from a merged topic originally titled
    Stretched splash screen on Android build.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • 1) Not all app's splash pages are oriented for both portrait and landscape.

    Most apps on the market, not built with PhoneGap are NOT oriented for both portrait and landscape.

    2) PhoneGap has addressed this in pervious posts.

    It does NOT have an answer for specifying orientation for apps. Especially for Android.

    3) Try searching for key words and terms before just piggybacking on a thread.

    There are quite a few other posts that have SPECIFICALLY addressed this issue prior to this one that have been answered.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • I've built my first app and done my first app deploy (to an Android virtual device running 4.0.3). My www directory contains a config.xml. In config.xml I specified square icons of varying sizes (36, 48, 57, 72, 114). This led to one of the icons being identified and used as the home screen icon in the virtual device.

    My question - What size image do I have to specify for a valid splash screen image to be identified and used in my Android virtual device?

    Cheers.

    This reply was created from a merged topic originally titled
    Android splash screen image sizing.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • the documentation for config.xml lists the following:

    <!-- iOS requires specific dimensions for icons; classic iPhone screens, Retina
    displays, and iPad screens respectively -->
    <icon src="icons/icon-iphone-57.png" width="57" height="57"/>
    <icon src="icons/icon-iphone-72.png" width="72" height="72"/>
    <icon src="icons/icon-iphone-114.png" width="114" height="114"/>

    <!-- Android requires specific dimensions; ldpi, mdpi, and hdpi respectively -->
    <icon src="icons/icon-android-36.png" width="36" height="36"/>
    <icon src="icons/icon-android-48.png" width="48" height="48"/>
    <icon src="icons/icon-android-72.png" width="72" height="72"/>

    There are neither "platform container tags" (e.g. ) nor platform attributes (e.g. ).

    Can you please explain how do you know to use icons/icon-android-72.png for android v.s. icons/icon-iphone-72.png for iphone ?

    does this use the path name of the image ?! or what?
    I can understand that when a specific size is required you can pick the one with the closest size but if both android and iphone need a 72x72 icon how do you choose which of them to use ?

    if selection is made only based on size then it would be more appropriate to document this as:

    <!-- 36,48 and 72 are used by android
    57,72, and 113 are used by iphone
    please note that 72 is common to both -->

    <icon width="36" height="36" src="icons/icon-36.png" />
    <icon width="48" height="48" src="icons/icon-48.png" />
    <icon width="57" height="57" src="icons/icon-57.png" />
    <icon width="72" height="72" src="icons/icon-72.png" />
    <icon width="114" height="114" src="icons/icon-114.png" />

    The same goes for splashes...

    If this is not the case then please explain how you choose between them ...

    This reply was created from a merged topic originally titled
    about icon/splash selection in PGB.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • anything?
    Can someone say if my assumptions above are correct ?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • 1
    Check the new config.xml page for information regarding this... I think you will fair better checking yours against what's on that page...

    https://build.phonegap.com/docs/confi...

    Dax
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • I read it again and I still do not understand.
    How and when do you resolve which splash screen the app will show?

    Why does the example has two lines like this:
    <gap:splash src="splashes/splash.png"/>

    and the example for the icons stil has both:
    <icon src="icons/icon-iphone-72.png" width="72" height="72"/>
    and
    <icon src="icons/icon-android-72.png" width="72" height="72"/>

    Which of them will be used !
    Is the NAME important ? or do the dimensions determine what will be used ?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • 1
    If you look really closely, you will see that one if for iphone and the second one is for android...

    If you are building your app for cross platform, you can use them both so you can use 1 config file...

    As for the name, just like the rest of the config file, you will need to modify it to match up with your project starting from the very top going down the the bottom of the file.

    Dax
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Dax,
    Thanks for trying to help,
    Are referring to the two splashes?
    or the two icons with the same dimensions?

    Lets address the icons firs.
    The only difference I see in between the two tags I quoted above is the src attribute, So I ask again - Are you using the name of the file (src attribute) to determine what platform it belongs to?

    the documentation for the src attribute says:
    "specifies the location of the image file, relative to your www directory".

    what if I used the following two :

    <icon src="icons/icon72x72-apple.png" width="72" height="72"/>

    <icon src="icons/icon72x72-google.png" width="72" height="72"/>

    will this also work ?
    must I name the files like you did ?

    I guess the Icon is chosen at compile time to be compiled into the app,
    or are there multiple icons that are built into the same application ?

    And the same Q goes for the splash screens only this time its even more complicated in a way because if I understand correctly then the splash screen should be chosen during runtime based on the resolution of the actual device running the application.

    What if my config.xml lists only the following:

    <gap:splash src="splashes/splash.png"/>
    <gap:splash src="splashes/retina.png" width="640" height="960"/>
    <gap:splash src="splashes/ipad-portrait.png" width="768" height="1004"/>
    <gap:splash src="splashes/ipad-landscape.png" width="1024" height="748"/>

    now supposed the app is executed on an android device with resolution 640x960,
    which splash will be used? and what it the resolution is 640x800 ?

    what is the algorithm used to select which splash to displace based on the platform and resolution of the device running the app ?

    Thanks,
    Eyal
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Not a problem...

    The config file gives examples for the various platforms that we are able to build for. That being said, the author of the config file has attempted to give examples for as many of the platforms as possible so that everyone can see what is possible for their config file.

    Hence, there are several examples of everything, from the splashpage, icons and so on.

    As for how your reference your splashpage/icon...

    The way you have it is okay. As long as your images are in the same named folders and the images are named the same thing as what you have in your config file, everything should be good to go.

    Me personally, my config file has my icons listed as:

    icon src="images/icon1.png" width="36" height="36" default="true"/
    icon src="images/icon2.png" width="48" height="48" /
    icon src="images/icon3.png" width="72" height="72" /

    However, you want to list them... its okay.

    As for the screen size with a splashpage of a specific size, I make my screenpage the same size, 640x960. I have 2 Androids of varying sizes. It looks line on them both.

    As for the algorithm, I couldn't tell you. It is what it is and the phone know's which size to pic up on because the config file helps it with figuring it out.

    I hope I helped.
    Dax
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • PG version 1.7.0

    Builds for iOS seem to pick the splash image in an unpredictable way, even if the image sizes are specified. From the following in my config.xml:

    gap:splash src="splash.png" width="320" height="480" />
    gap:splash src="splash/ios/Default.png" gap:platform="ios" width="320" height="480" />
    gap:splash src="splash/ios/Default_at_2x.png" gap:platform="ios" width="640" height="960" />
    gap:splash src="splash/ios/Default-Portrait.png" gap:platform="ios" width="768" height="1024" />

    The results:
    On an iPhone4 the 320/480 image shows, then shrinks just prior to load.
    On an iPhone3 it's working right.

    So I move the default xml tags to the bottom, do a re-build, and now:
    On an iPhone4 it's working right (640/960).
    On an iPhone3 the 640/960 appears, re-sized to be smaller, then blows up as if it's zooming in (sort of the opposite as it did before on the 4).

    The iPad, by the way, picks up the right image (Default-Portrait), but it does the old PhoneGap jump, dropping down a few pixels just prior to ready.

    Questions:
    Does the order in which the images are referenced in the config file matter?
    Do the size of the image files have any influence on which one is chosen?
    Are there gap:density values useful for ios?

    Thanks.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hardeep Shoker (PhoneGap Build Developer) May 22, 2012 06:50
    Just to add on to Dax's posts, everything she's said is correct.

    You can also use this app as a reference if you're having trouble.

    https://github.com/hardeep/pgbuild-app

    Just to answer some questions as well:

    Does the order in which the images are referenced in the config file matter?

    No they do not we look for specific tags (ex: height, width, density).

    Do the size of the image files have any influence on which one is chosen?

    No we do not do any heuristics based on the actual image sizes (right now we depend on you to provide the correct dimensions for your images)

    Are there gap:density values useful for ios?

    No they are used for Android because semantically IOS has defined heights and widths for it's different devices, while Android is impossible to target via a height and width. There are too many android devices with different screen sizes, resolutions, and overall densities.

    Hope that helps,

    Hardeep Shoker
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • - How to have app icon for xhdpi Android devices? gap:density="xhdpi" is not supported, and even though I define the default icon, it never shows it on HD screen devices ( HTC One X for example), instead it shows the default Cordova icon.

    - How should we define the 512 x 512 px Android Market icon? Do we need the "gap:platform" or not?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • I’m patient.
    We're having similar issues regarding the Nexus 7 tablet. Only the Cordova default icon is showing up and we're only able to support one screen orientation for the splash.

    If you could include us on any updates regarding this issue we would immediately resubmit our apps into the store with the fix.

    https://build.phonegap.com/apps/9476
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • What about if the android device is rotated (landscape).
    The image is streched!

    How to fix that?

    gap:splash src="splash/android/splash_ldpi200x320.png" gap:platform="android" gap:density="ldpi"
    gap:splash src="splash/android/splash_mdpi320x480.png" gap:platform="android" gap:density="mdpi"
    gap:splash src="splash/android/splash_hdpi480x800.png" gap:platform="android" gap:density="hdpi"
    gap:splash src="splash/android/splash_xhdpi720x1280.png" gap:platform="android" gap:density="xhdpi"

    This is not enough!
    How to specify the otherwise?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned