Hey everyone,
We're excited to roll out enhanced icon and splash support for build.
This new update will require an update to your existing config.xml; for information regarding usage and general information please refer to our blog post:
https://build.phonegap.com/blog/enhan...
Hardeep Shoker
***************************************************************
Issues regarding this topic are not being discussed here:
http://community.phonegap.com/nitobi/...
We're excited to roll out enhanced icon and splash support for build.
This new update will require an update to your existing config.xml; for information regarding usage and general information please refer to our blog post:
https://build.phonegap.com/blog/enhan...
Hardeep Shoker
***************************************************************
Issues regarding this topic are not being discussed here:
http://community.phonegap.com/nitobi/...
- 1941 Posts
- 89 Reply Likes
Posted 8 years ago
- 20 Posts
- 0 Reply Likes
Hi Hardeep,
After this changes I can't get my splash screen to work.
Previously I had this line in my config.xml and it worked on all devices.
After your recent changes I got the default white screen with retina display message on it instead of my image. After reading this post I tried moving my splash.png to root and respectively changing this line in config.xml to the following.
After this change I get strange behavior. At first my splash screen is shown normally, then it gets resized as shown in the screen shot and stays for a while partly covering already loaded first screen of my app.
Please tell me if I'm doing something wrong. I need to release new version of my app ASAP and this blocks me.
Thanks in Advance.

After this changes I can't get my splash screen to work.
Previously I had this line in my config.xml and it worked on all devices.
After your recent changes I got the default white screen with retina display message on it instead of my image. After reading this post I tried moving my splash.png to root and respectively changing this line in config.xml to the following.
After this change I get strange behavior. At first my splash screen is shown normally, then it gets resized as shown in the screen shot and stays for a while partly covering already loaded first screen of my app.
Please tell me if I'm doing something wrong. I need to release new version of my app ASAP and this blocks me.
Thanks in Advance.
- 20 Posts
- 2 Reply Likes
I experience the same problem when I build for iOS! Since the latest update no matter how I modify my config.xml file I get a blank screen for 2 seconds in between my splash screen and the first page of my App.
I've tested this on iPhone 4, iOS 5.
I've tested this on iPhone 4, iOS 5.
- 1941 Posts
- 89 Reply Likes
Can I get both of your application ids please, it's it number in the url bar associated with the application. ex (https://build.phonegap.com/apps/#)
I'll be more then glad to take a look at them.
Hardeep Shoker
I'll be more then glad to take a look at them.
Hardeep Shoker
- 1941 Posts
- 89 Reply Likes
Also in the mean time you may also want to have a look at:
https://github.com/hardeep/pgbuild-app
I was not able to produce the same results while testing.
Hardeep Shoker
https://github.com/hardeep/pgbuild-app
I was not able to produce the same results while testing.
Hardeep Shoker
- 20 Posts
- 2 Reply Likes
Mine is: 109879
- 1941 Posts
- 89 Reply Likes
Alright zeligmanos,
I did some testing and the grey screen you see for two seconds is actually because your application's content is slow at rendering. You can test this by placing a "Done Loading" in the index.html right above the "wiziLiveMode" div.
The splash screen is functioning as it should be, the application also seems to provide a "hack" by displaying a splash.png (because of the slow render) in a table element perhaps this is not rendering.
Hardeep Shoker
I did some testing and the grey screen you see for two seconds is actually because your application's content is slow at rendering. You can test this by placing a "Done Loading" in the index.html right above the "wiziLiveMode" div.
The splash screen is functioning as it should be, the application also seems to provide a "hack" by displaying a splash.png (because of the slow render) in a table element perhaps this is not rendering.
Hardeep Shoker
- 20 Posts
- 2 Reply Likes
Thanks for the reply. I did a few adjustments in the config.xml file and now I experience 2 different issues:
when I set the full screen to "true" I get a white blank screen between splash screen and first page and when I set the full screen to "false" (my desired option) there is no blank screen in between, just a slight resizing of my splash screen for 1 second before showing the first page. Any suggestions / ideas how I could fix it?
when I set the full screen to "true" I get a white blank screen between splash screen and first page and when I set the full screen to "false" (my desired option) there is no blank screen in between, just a slight resizing of my splash screen for 1 second before showing the first page. Any suggestions / ideas how I could fix it?
- 20 Posts
- 0 Reply Likes
My app id is: 40188, using iOS version. Tested on iPod Touch.
--Aleksandr Burnazyan
--Aleksandr Burnazyan
- 1941 Posts
- 89 Reply Likes
Hey Aleksandr,
I found the issue.
Build uses splash.png for all IOS splashes since you did not specify a retina, and ipad splash.
The phonegap version you are using 1.3.0 actually does a bit of a hack; IOS shows the splash when the phonegap application is loading, then phonegap shows the same splash while the DOM is loading, and then hides it once the DOM is loaded.
The issue you ran into was that IOS streched the splash.png to the height and width of the screen, however phonegap displayed the image as it's original resolution.
This may have been resolved in later versions of PG (I've notified a IOS dev just in case).
The easiest solution to your problem is to include each specific splash resolution.
Hardeep Shoker
I found the issue.
Build uses splash.png for all IOS splashes since you did not specify a retina, and ipad splash.
The phonegap version you are using 1.3.0 actually does a bit of a hack; IOS shows the splash when the phonegap application is loading, then phonegap shows the same splash while the DOM is loading, and then hides it once the DOM is loaded.
The issue you ran into was that IOS streched the splash.png to the height and width of the screen, however phonegap displayed the image as it's original resolution.
This may have been resolved in later versions of PG (I've notified a IOS dev just in case).
The easiest solution to your problem is to include each specific splash resolution.
Hardeep Shoker
- 20 Posts
- 0 Reply Likes
Hi Hardeep,
I think stretching the default splash image when there is none with correct dimensions would be good. Anything is better then what I've showed in the screenshot in my previous post:)
There always will be new devices with new resolutions that you didn't took into account.
I think stretching the default splash image when there is none with correct dimensions would be good. Anything is better then what I've showed in the screenshot in my previous post:)
There always will be new devices with new resolutions that you didn't took into account.
- 20 Posts
- 0 Reply Likes
Okay, so after specifying splash screens for different resolutions it worked for me. However other issue remains, splash screen stays for more then a minute 70-90 seconds.
- 20 Posts
- 0 Reply Likes
Sorry. Was an issue on my side.
- 1941 Posts
- 89 Reply Likes
Hey,
No problem as far as the stretching is concerned I've already opened a new issue on our bug tracker.
You can follow it here https://issues.apache.org/jira/browse...
Hardeep Shoker
No problem as far as the stretching is concerned I've already opened a new issue on our bug tracker.
You can follow it here https://issues.apache.org/jira/browse...
Hardeep Shoker
- 20 Posts
- 0 Reply Likes
Hi Hardeep, have you looked at my app?
Please tell me if something is wrong on my side or suggest a workaround...
This is really a blocker issue for me.
Thanks.
Please tell me if something is wrong on my side or suggest a workaround...
This is really a blocker issue for me.
Thanks.
- 18 Posts
- 0 Reply Likes
Hi, I'm really confused with the new Android icon syntax:
- Android UI guidelines describes 4 dimensions (ldpi, mdpi, hdpi and xhdpi): http://developer.android.com/guide/pr.... Your config.xml example doesn't include xhdpi. Is it normal?
- I'm trying to rename my old icon set to match the new file names. But it seems that your icon sizes for Android is not consistent between your GitHub example and Android guideline. For instance, your ldpi.png file is 57x53px. But Android doc says it must be 36 x 36 px. I'm kind of lost here...
Could you please explain clearly what is the expected size for each Android icon in the new config.xml file? Thanks !
- Android UI guidelines describes 4 dimensions (ldpi, mdpi, hdpi and xhdpi): http://developer.android.com/guide/pr.... Your config.xml example doesn't include xhdpi. Is it normal?
- I'm trying to rename my old icon set to match the new file names. But it seems that your icon sizes for Android is not consistent between your GitHub example and Android guideline. For instance, your ldpi.png file is 57x53px. But Android doc says it must be 36 x 36 px. I'm kind of lost here...
Could you please explain clearly what is the expected size for each Android icon in the new config.xml file? Thanks !
- 1941 Posts
- 89 Reply Likes
Hey Vince,
Sorry about the confusion, the guild lines provided by Android are the correct dimensions; I was simply trying to demonstrate using a different image for each platform/screen type (I'll update the app to make it less confusing).
PhoneGap Build does not currently support xhdpi, and retina displays however it's on our list of features to implement in the near future.
The only file names that matter are the default icon.png and splash.png (must also be in the root folder), the other icons/splashes can be structured and named however you like.
Hardeep Shoker
Sorry about the confusion, the guild lines provided by Android are the correct dimensions; I was simply trying to demonstrate using a different image for each platform/screen type (I'll update the app to make it less confusing).
PhoneGap Build does not currently support xhdpi, and retina displays however it's on our list of features to implement in the near future.
The only file names that matter are the default icon.png and splash.png (must also be in the root folder), the other icons/splashes can be structured and named however you like.
Hardeep Shoker
- 149 Posts
- 2 Reply Likes
I must say That I have been following this issue of splashscreen / icon configuration and I can't understand why this is done in such a hard to follow way...
for example have alook here: http://community.phonegap.com/nitobi/...
I think that you should explain the process/algorithm by which the Icon/splash gets resolved in each platform and NOT keep up providing confusing examples.
Now I am guessing / assuming that the algorithm should have two phases:
1) deciding what images to pack into the app
2) when app actually runs decide what image to display
The first step is important to reduce the size of the app,
consider a scenario where I want to display a different splash screen for each platform - ( with a logo an the text Myapp for platform for example).
I would not want the iOS app to have the android splash screens within it.
so if such a step does exist - how is it implemented ?
for all the <gap:splash ... > which images will you use ?
from the way the current XML is built I can't figure out a way for you to filter the images.
if for example you would require all the splashes and icons for a specific platform to be placed in a predetermined folder (.e.g. app_splashs & app_icons) with sub folder based on platform name then you would know that you can remove app_splashes/ios from a package made for android and vice versa.
so either way eventually the app runs and know what platform and resolution it has.
enters step 2.
how do you pick what image to display (do you pick it? or does the device itself does that?)
do I need a perfect match of width and height? or will a perfect aspect ratio be good enough?
I do understand that if everything else fails you will use icon.png from the root folder? how does the algorithm work before that?
e.g.
we go over all the splashes looking for the one that has the closest aspect ratio to the current device and from all the icons that have the same closest aspect ratio we pick up the one the closest in its with as long as the with it greater or equal to that of the device.
(NOTE TO READERS: THIS IS JUST AN EXAMPLE OF HOW I WOULD EXPECT THIS TO BE EXPLAINED AND NOT A DESCRIPTION OF HOW THINGS ACTUALLY WORK, AT LEAST NOT AFAIK).
such an explanation would result in full understanding of how things work.
personally I keep finding the names you pick for the images distracting,
I am never sure if the path names are actually used in the selection presses or not.
look for example at the sample for iOS taken from here:
https://build.phonegap.com/docs/confi...
<icon src="icons/ios/icon.png" width="57" height="57" />
<icon src="icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="icons/ios/icon_at_2x.png" width="114" height="114" />
Why is the gap:platform attribute used only on the second icon?
must they all sit in icons/ios? or is this just an example ?
Looking at the android samples, what sizes should the icons/splashed for gap:density="ldpi", gap:density="mdpi" & gap:density="hdpi" be ?
Well, Thats all for now.
thank you for reading.
Eyal
for example have alook here: http://community.phonegap.com/nitobi/...
I think that you should explain the process/algorithm by which the Icon/splash gets resolved in each platform and NOT keep up providing confusing examples.
Now I am guessing / assuming that the algorithm should have two phases:
1) deciding what images to pack into the app
2) when app actually runs decide what image to display
The first step is important to reduce the size of the app,
consider a scenario where I want to display a different splash screen for each platform - ( with a logo an the text Myapp for platform for example).
I would not want the iOS app to have the android splash screens within it.
so if such a step does exist - how is it implemented ?
for all the <gap:splash ... > which images will you use ?
from the way the current XML is built I can't figure out a way for you to filter the images.
if for example you would require all the splashes and icons for a specific platform to be placed in a predetermined folder (.e.g. app_splashs & app_icons) with sub folder based on platform name then you would know that you can remove app_splashes/ios from a package made for android and vice versa.
so either way eventually the app runs and know what platform and resolution it has.
enters step 2.
how do you pick what image to display (do you pick it? or does the device itself does that?)
do I need a perfect match of width and height? or will a perfect aspect ratio be good enough?
I do understand that if everything else fails you will use icon.png from the root folder? how does the algorithm work before that?
e.g.
we go over all the splashes looking for the one that has the closest aspect ratio to the current device and from all the icons that have the same closest aspect ratio we pick up the one the closest in its with as long as the with it greater or equal to that of the device.
(NOTE TO READERS: THIS IS JUST AN EXAMPLE OF HOW I WOULD EXPECT THIS TO BE EXPLAINED AND NOT A DESCRIPTION OF HOW THINGS ACTUALLY WORK, AT LEAST NOT AFAIK).
such an explanation would result in full understanding of how things work.
personally I keep finding the names you pick for the images distracting,
I am never sure if the path names are actually used in the selection presses or not.
look for example at the sample for iOS taken from here:
https://build.phonegap.com/docs/confi...
<icon src="icons/ios/icon.png" width="57" height="57" />
<icon src="icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="icons/ios/icon_at_2x.png" width="114" height="114" />
Why is the gap:platform attribute used only on the second icon?
must they all sit in icons/ios? or is this just an example ?
Looking at the android samples, what sizes should the icons/splashed for gap:density="ldpi", gap:density="mdpi" & gap:density="hdpi" be ?
Well, Thats all for now.
thank you for reading.
Eyal
- 1941 Posts
- 89 Reply Likes
Hey Eyal,
I'll start with how the algorithm works at the moment, and try to explain it as best as I can.
(I think some revised documentation will help with this as well)
Build tries to find a best fit image to use as an icon/splash.
1. If a config.xml is provided we run through the following filters.
Is there an icon/splash match for height and width (height and width in the config.xml)?
If so use it.
Is there an icon/splash match for a density (gap:density in the config.xml)?
If so use it.
Is there an icon/splash match for a role (gap:role defined in the config.xml)?
If so use it.
Is there an icon/splash match for a state (gap:state defined in the config.xml)?
If so use it.
Is there an icon for the platform at all?
If so use it.
Default to icon.png or splash.png if defined.
Use the form upload icon if it exists.
Use the default icons/splashes provided by the phonegap platforms.
2. If NO config.xml is provided
Use the form upload icon if it exists.
Use the default icons/splashes provided by the phonegap platforms.
The application that I provided as an example in the blog serves as a guideline on how to configure every possible icon and splash, you do not need to create all of these if you do not wish to.
For example to use the same icon across all android platforms the following would suffice.
PhoneGap 1.7.0 will help with Android as 9patch images will work, the above example will also apply to 9patch images.
ex:
Next I will address some of your issues that you've raised.
personally I keep finding the names you pick for the images distracting,
I am never sure if the path names are actually used in the selection presses or not.
The icon paths can be any path that you like, they are not used in the selection process. They serve as an aid so build knows what file to copy.
can be any path
Why is the gap:platform attribute used only on the second icon?
must they all sit in icons/ios? or is this just an example ?
Some users were wondering how to differentiate between the android and ios 72x72 icons. This just served as an example
You can also use
Looking at the android samples, what sizes should the icons/splashed for gap:density="ldpi", gap:density="mdpi" & gap:density="hdpi" be ?
I would use the Android documentation as a reference.
Hope that helped.
Hardeep Shoker
I'll start with how the algorithm works at the moment, and try to explain it as best as I can.
(I think some revised documentation will help with this as well)
Build tries to find a best fit image to use as an icon/splash.
1. If a config.xml is provided we run through the following filters.
Is there an icon/splash match for height and width (height and width in the config.xml)?
If so use it.
Is there an icon/splash match for a density (gap:density in the config.xml)?
If so use it.
Is there an icon/splash match for a role (gap:role defined in the config.xml)?
If so use it.
Is there an icon/splash match for a state (gap:state defined in the config.xml)?
If so use it.
Is there an icon for the platform at all?
If so use it.
Default to icon.png or splash.png if defined.
Use the form upload icon if it exists.
Use the default icons/splashes provided by the phonegap platforms.
2. If NO config.xml is provided
Use the form upload icon if it exists.
Use the default icons/splashes provided by the phonegap platforms.
The application that I provided as an example in the blog serves as a guideline on how to configure every possible icon and splash, you do not need to create all of these if you do not wish to.
For example to use the same icon across all android platforms the following would suffice.
<icon src="some/path" gap:platform="android" />
PhoneGap 1.7.0 will help with Android as 9patch images will work, the above example will also apply to 9patch images.
ex:
<gap:splash src="some/path" gap:platform="android" />
Next I will address some of your issues that you've raised.
personally I keep finding the names you pick for the images distracting,
I am never sure if the path names are actually used in the selection presses or not.
The icon paths can be any path that you like, they are not used in the selection process. They serve as an aid so build knows what file to copy.
<icon src="icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
can be any path
<icon src="icon-72.png" gap:platform="ios" width="72" height="72" />
Why is the gap:platform attribute used only on the second icon?
must they all sit in icons/ios? or is this just an example ?
Some users were wondering how to differentiate between the android and ios 72x72 icons. This just served as an example
You can also use
<icon src="some/path" width="72" height="72" />
Looking at the android samples, what sizes should the icons/splashed for gap:density="ldpi", gap:density="mdpi" & gap:density="hdpi" be ?
I would use the Android documentation as a reference.
Hope that helped.
Hardeep Shoker
- 149 Posts
- 2 Reply Likes
Hi Hardeep Shoker,
Such a description of the algorithm is indeed much better.
you should add this to the official docs.
That said,
Now that I have switched PGB to use 1.7.0 - on my iphone (3GS 320*480)
I get the default PG splash screen even though I have the following in my config.xml:
I would have expected that either splash320x480.png would be used (per your first "rule" in the algorithm) or if not that then splash.png would be used instead as the default.
any ideas how I can continue with resolving this ?
Such a description of the algorithm is indeed much better.
you should add this to the official docs.
That said,
Now that I have switched PGB to use 1.7.0 - on my iphone (3GS 320*480)
I get the default PG splash screen even though I have the following in my config.xml:
I would have expected that either splash320x480.png would be used (per your first "rule" in the algorithm) or if not that then splash.png would be used instead as the default.
any ideas how I can continue with resolving this ?
- 18 Posts
- 0 Reply Likes
Eyal, I like your idea if embedding only ressources usefull for each platform. The 2 PNG files for splash screen on iPad can easily take more than 400 kB each, it would make lighter Android apps to download.
About splash screens again, it would be nice to let user disable splash on a single platform (ie Android) while having splash screen enabled on other platform (ie iOS), all in the same config.xml. For now, I have to build the app with 2 different config.xml setups to make this work. After reading the PGB blog about the new splash/icon config, I thought you would use the "gap:platform" tag to address this issue. And like Eyal said, why don't you make this tag mandatory in the config file? This is too confusing...
I'd like to ask again here if you plan to embed 9-patch splash screens on Android. It would solve a lot of headaches and frustration with PGB users. 9-patch are fully fonctional on Phonegap 1.7: http://simonmacdonald.blogspot.fr/201.... Is it on your roadmap?
Thanks!
About splash screens again, it would be nice to let user disable splash on a single platform (ie Android) while having splash screen enabled on other platform (ie iOS), all in the same config.xml. For now, I have to build the app with 2 different config.xml setups to make this work. After reading the PGB blog about the new splash/icon config, I thought you would use the "gap:platform" tag to address this issue. And like Eyal said, why don't you make this tag mandatory in the config file? This is too confusing...
I'd like to ask again here if you plan to embed 9-patch splash screens on Android. It would solve a lot of headaches and frustration with PGB users. 9-patch are fully fonctional on Phonegap 1.7: http://simonmacdonald.blogspot.fr/201.... Is it on your roadmap?
Thanks!
- 1941 Posts
- 89 Reply Likes
Hey Vince,
I just covered some of these in my above post, and the idea of embedding only resources useful for each platform is in our to do list :) (this will be a definite issue now as it will start adding extra weight to packages with retina, and xhdpi resources)
Hardeep Shoker
I just covered some of these in my above post, and the idea of embedding only resources useful for each platform is in our to do list :) (this will be a definite issue now as it will start adding extra weight to packages with retina, and xhdpi resources)
Hardeep Shoker
- 18 Posts
- 0 Reply Likes
Thanks for you reply. Can you confirm that 9-patch splash screens will work with Phonegap 1.7? Do you have a release date?
- 1941 Posts
- 89 Reply Likes
Hey Vince,
We're working on getting 1.7.0 up and running sometime this week, or next. Simon's post (http://simonmacdonald.blogspot.com/20...) states that 9patch images are now supported. I'll be testing this within the next couple of days.
Hardeep Shoker
We're working on getting 1.7.0 up and running sometime this week, or next. Simon's post (http://simonmacdonald.blogspot.com/20...) states that 9patch images are now supported. I'll be testing this within the next couple of days.
Hardeep Shoker
- 20 Posts
- 0 Reply Likes
Splashscreen for IOS, stays for more then a minute.
- 20 Posts
- 0 Reply Likes
Sorry. Was an issue on my side.
Alan Neveu, Champion
- 213 Posts
- 11 Reply Likes
I have tried many things with 1.7.0 and I still cannot get a splash screen other than the default plug image to show up on iPhone. I am testing on iPhone retina (4S). Does anybody have a sample portion of their config.xml that demonstrates working splash screens for iPhone/iPad?
Also, in previous documentation the iPad resolution was listed as 1004x768, and I wondered if it was a type-o and should have been 1024x768. Now it appears that 1024 is being used in go-forward docs so I assume it was a type-o. Can I get confirmation of that?
Please post sample portion of config.xml that works with iPhone/iPad for splash screens. MANY thanks in advance!
Also, in previous documentation the iPad resolution was listed as 1004x768, and I wondered if it was a type-o and should have been 1024x768. Now it appears that 1024 is being used in go-forward docs so I assume it was a type-o. Can I get confirmation of that?
Please post sample portion of config.xml that works with iPhone/iPad for splash screens. MANY thanks in advance!
Alan Neveu, Champion
- 213 Posts
- 11 Reply Likes
Cancel that request. I am quite certain there is nobody who can produce working config.xml code for splash screens with 1.7.0.
Hardeep and others, Please help, this is blocking big time.
Hardeep and others, Please help, this is blocking big time.
- 1941 Posts
- 89 Reply Likes
Have you looked at the sample project? It was provided in the blog post.
Build that and see if your able to get it working :)
https://github.com/hardeep/pgbuild-app
Hardeep Shoker
Build that and see if your able to get it working :)
https://github.com/hardeep/pgbuild-app
Hardeep Shoker
- 1941 Posts
- 89 Reply Likes
Hey Alan,
Are you building with 1.7.0? I've tested and confirmed an issue with 1.7, we've added it to our backlog and should be looking at it soon.
Hardeep Shoker
Are you building with 1.7.0? I've tested and confirmed an issue with 1.7, we've added it to our backlog and should be looking at it soon.
Hardeep Shoker
- 149 Posts
- 2 Reply Likes
You should push his ahead as much as possible as this is a blocking issue for anyone expecting to publish the resulting app.
Alan Neveu, Champion
- 213 Posts
- 11 Reply Likes
Well yes, I tried using the config.xml splash screen portion from the blog post and could not get any splash screen to work on my iPhone 4S - it just shows the plug splash screen.
- 18 Posts
- 0 Reply Likes
I have the same issue, as many people on this forum
- 1941 Posts
- 89 Reply Likes
This discussion regarding the latest changes made in PG are now being discussed here:
http://community.phonegap.com/nitobi/...
Hardeep Shoker
http://community.phonegap.com/nitobi/...
Hardeep Shoker
This conversation is no longer open for comments or replies.
This conversation is no longer open for comments or replies.
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers






Aleksandr Burnazyan
So previously I was setting splash screen with this line.
< gap:splash src = "splashes/splash.png" / >
Then I made it a default spash as described in config.xml documentation by moving it to root directory and changing the line to:
< gap:splash src = "splash.png" / >