Enhanced Splash and Icon Support [User Action Required]

  • 1
  • Announcement
  • Updated 8 years ago
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/...
Photo of Hardeep Shoker

Hardeep Shoker

  • 1941 Posts
  • 89 Reply Likes

Posted 8 years ago

  • 1
Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 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.

Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 20 Posts
  • 0 Reply Likes
Seems that my tags got stripped from the previous post, (trying to post them with adding whitespaces if that will help)

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" / >
Photo of zeligmanos

zeligmanos

  • 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.
Photo of Hardeep Shoker

Hardeep Shoker

  • 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
Photo of Hardeep Shoker

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
Photo of zeligmanos

zeligmanos

  • 20 Posts
  • 2 Reply Likes
Mine is: 109879
Photo of Hardeep Shoker

Hardeep Shoker

  • 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
Photo of zeligmanos

zeligmanos

  • 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?
Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 20 Posts
  • 0 Reply Likes
My app id is: 40188, using iOS version. Tested on iPod Touch.

--Aleksandr Burnazyan
Photo of Hardeep Shoker

Hardeep Shoker

  • 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
Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 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.
Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 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.
Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 20 Posts
  • 0 Reply Likes
Sorry. Was an issue on my side.
Photo of Hardeep Shoker

Hardeep Shoker

  • 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
Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 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.
Photo of Vince

Vince

  • 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 !
Photo of Hardeep Shoker

Hardeep Shoker

  • 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
Photo of Eyal Peleg

Eyal Peleg

  • 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
Photo of Hardeep Shoker

Hardeep Shoker

  • 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.

<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
Photo of Eyal Peleg

Eyal Peleg

  • 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 ?
Photo of Vince

Vince

  • 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!
Photo of Hardeep Shoker

Hardeep Shoker

  • 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
Photo of Vince

Vince

  • 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?
Photo of Hardeep Shoker

Hardeep Shoker

  • 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
Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 20 Posts
  • 0 Reply Likes
Splashscreen for IOS, stays for more then a minute.
Photo of Aleksandr Burnazyan

Aleksandr Burnazyan

  • 20 Posts
  • 0 Reply Likes
Sorry. Was an issue on my side.
Photo of Alan Neveu

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!
Photo of Alan Neveu

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.
Photo of Hardeep Shoker

Hardeep Shoker

  • 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
Photo of Hardeep Shoker

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
Photo of Eyal Peleg

Eyal Peleg

  • 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.
Photo of Alan Neveu

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.
Photo of Vince

Vince

  • 18 Posts
  • 0 Reply Likes
I have the same issue, as many people on this forum
Photo of Hardeep Shoker

Hardeep Shoker

  • 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

This conversation is no longer open for comments or replies.