I have a phonegap application with splash screens in my project/resources/splash/ directory. My iOS project loads the portrait splash screen fine, but when I load the app in landscape mode, it uses my portrait splash screen then I get a white screen after the splash screen loads.
I've realized that in my log it keeps saying the splashscreen image named Default-Landscape was not found, even though I've renamed my landscape images in /splash/ directory to Default-Landscape.jpg it seems like it is not pulling the image.
Any insight as to how I can get this working? Am I going about it the wrong way?
This has been a confirmed bug in the previous versions but now has been fixed. Try using this:
<gap:splash src="splash-xlarge-portrait.png" gap:qualifier="port-xhdpi">
<gap:splash src="splash-xlarge-landscape.png" gap:qualifier="land-xhdpi">
<icon src="icon-xlarge-english.png" gap:qualifier="en-xhdpi">
<icon src="icon-xlarge-french.png" gap:qualifier="fr-xhdpi">
<icon src="icon.png" gap:qualifier="">
For iOS:
<!-- iPhone and iPod touch -->
<splash src="Default.png" platform="ios" width="320" height="480" />
<splash src="Default#2x.png" platform="ios" width="640" height="960" />
<!-- iPhone 5 / iPod Touch (5th Generation) -->
<splash src="Default-568h#2x.png" platform="ios" width="640" height="1136" />
<!-- iPhone 6 -->
<splash src="Default-667h#2x.png" platform="ios" width="750" height="1334" />
<splash src="Default-Portrait-736h#3x.png" platform="ios" width="1242" height="2208" />
<splash src="Default-Landscape-736h#3x.png" platform="ios" width="2208" height="1242" />
<!-- iPad -->
<splash src="Default-Portrait.png" platform="ios" width="768" height="1024" />
<splash src="Default-Landscape.png" platform="ios" width="1024" height="768" />
<!-- Retina iPad -->
<splash src="Default-Portrait#2x.png" platform="ios" width="1536" height="2048" />
<splash src="Default-Landscape#2x.png" platform="ios" width="2048" height="1536" />
Related
My app is a Cordova app...most everything I do is compiled from CLI and then in Xcode I verify a few things and then deploy to devices to test.
When deploying my app to real phone or simulator the splash screen is not scaled properly - its distorted. I have tried all kinds of edits and changes but nothing is correcting the issue. It sort of looks like its using a landscape version of my splash screen and smooshing it to fit into a portrait view.
In Xcode I verified the following:
Device orientation: Portrait
LaunchScreen: CDVLaunchScreen (this is a storyboard)
Interface Builder Doc:
x = use trait variations
x = use safe area layout guides
x = use as launch screen
View -> Content Mode = Scale To Fill
For my config.xml file:
<splash src="resources/ios/splash/Default#2x~universal~anyany.png" /> (2732 x 2732)
<splash src="resources/ios/splash/Default#2x~universal~comany.png" /> (1278 x 2732)
<splash src="resources/ios/splash/Default#2x~universal~comcom.png" /> (1334 x 750)
<splash src="resources/ios/splash/Default#3x~universal~anyany.png" /> (2208 x 2208)
<splash src="resources/ios/splash/Default#3x~universal~anycom.png" /> (2208 x 1242)
<splash src="resources/ios/splash/Default#3x~universal~comany.png" /> (1242 x 2208)
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1136" src="resources/ios/splash/Default-568h#2x~iphone.png" width="640" />
<splash height="2688" src="resources/ios/splash/Default-2688h~iphone.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-2688h~iphone.png" width="2688" />
<splash height="1792" src="resources/ios/splash/Default-1792h~iphone.png" width="828" />
<splash height="828" src="resources/ios/splash/Default-Landscape-1792h~iphone.png" width="1792" />
<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="1536" src="resources/ios/splash/Default-Landscape#2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape#~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait#2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait#~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default#2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
I am fresh out of ideas.
User error...always is right. It was 2am when I made the splash images and next day I couldn't figure out what was wrong. I took a 2732x2732 image and simply resized it to each of the universal sizes...which skewed each image. I just now corrected all of my images to center my image inside of each of the universal X/Y sizes.
Bonehead move. Exhaustion will do it to ya.
I am using PhoneGap for creating iOS application for iOS9+. As per guide line I have added following code in Config.xml to set the splash screen.
// set the cordova plugin
<plugin name="cordova-plugin-splashscreen" source="npm" spec=">1.0.0" />
// set splash screen for iPad only
<platform name="ios">
<gap:splash gap:platform="ios" height="2048" src="res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<gap:splash gap:platform="ios" height="2048" src="res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<gap:splash gap:platform="ios" height="768" src="res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<gap:splash gap:platform="ios" height="1536" src="res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
</platform>
Then I used following command in 'Terminal' to generate iOS platform
phonegap build ios --device
It copies all the splash images in iOS platform.
But it show default Phonegap splash screens image when I launch the app. I checked in iOS project 'Images.xcassets'-> 'LaunchImage, it is showing default PhoneGap images. It is not showing splash Image which I mentioned in Config.xml file. How do I set the splash images using config.xml for iOS?
First add the Splash screen plugin
cordova plugin add cordova-plugin-splashscreen
Then in config.xml add these lines.
<!-- iOS splash screen -->
<!-- iPad -->
<splash src="www/res/screen/ios/Default-Portrait.png" platform="ios" width="768" height="1024" />
<splash src="www/res/screen/ios/Default-Landscape.png" platform="ios" width="1024" height="768" />
<!-- Retina iPad -->
<splash src="www/res/screen/ios/Default-Portrait#2x.png" platform="ios" width="1536" height="2048" />
<splash src="www/res/screen/ios/Default-Landscape#2x.png" platform="ios" width="2048" height="1536" />
<!-- Default splash screen -->
<splash src="splash.png" />
Make sure of the image width and height should be same as it is defined in config.xml.
or try default splashscreen.
Just keep full size splash screen image where your config.xml is located it will copy the splash.png file for all platform it is not recommended this will increase the app size but you can check if that works.
Cheers.
You need to change/replace the image files in splash screen directory (www/res/screen/ios/).
By default it contains images of phone gap
I'm running into an issue delivering my app using Adobe's PhoneGapBuild. I'm getting an error in Application Loader that prevents me from proceeding.
"ERROR ITMS-90023: "Missing required icon file. The bundle does not contain an app icon for iPad of exactly '72x72' pixels, in .png format for iOS versions < 7.0."
I've noted other similar postings to try an eliminate the issue but it still persists. I've triple checked and rewritten my config.xml, verified the file is pathed properly, renamed the file to the exact file name used in the PhoneGap documentation, verified the file dimensions and recreated the file from scratch.
Nothing I've done so far is getting rid of this error.
Here's a screen grab of the "res/icons/ios/" directory.
enter image description here
Here's what my config.xml is for the ios icons:
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icons/ios/icon-60#3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icons/ios/icon-60.png" width="60" height="60" />
<icon src="res/icons/ios/icon-60#2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icons/ios/icon-76.png" width="76" height="76" />
<icon src="res/icons/ios/icon-76#2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="res/icons/ios/icon-40.png" width="40" height="40" />
<icon src="res/icons/ios/icon-40#2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="res/icons/ios/icon.png" width="57" height="57" />
<icon src="res/icons/ios/icon#2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icons/ios/icon-72.png" width="72" height="72" />
<icon src="res/icons/ios/icon-72#2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icons/ios/icon-small.png" width="29" height="29" />
<icon src="res/icons/ios/icon-small#2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icons/ios/icon-50#2x.png" width="100" height="100" />
<!-- images are determined by width and height. The following are supported -->
<splash src="res/splash/ios/splash-iphone.png" gap:platform="ios" width="320" height="480"/>
<splash src="res/splash/ios/splash-2x-iphone.png" gap:platform="ios" width="640" height="960"/>
<splash src="res/splash/ios/splash-portrait-ipad.png" gap:platform="ios" width="768" height="1024"/>
<splash src="res/splash/ios/splash-portrait-2x-ipad.png" gap:platform="ios" width="1536" height="2048"/>
<splash src="res/splash/ios/splash-landscape-ipad.png" gap:platform="ios" width="1024" height="768"/>
<splash src="res/splash/ios/splash-landscape-2x-ipad.png" gap:platform="ios" width="2048" height="1536"/>
<splash src="res/splash/ios/splash-568h-2x-iphone.png" gap:platform="ios" width="640" height="1136"/>
<splash src="res/splash/ios/splash-667h.png" gap:platform="ios" width="750" height="1334"/>
<splash src="res/splash/ios/splash-736h.png" gap:platform="ios" width="1242" height="2208"/>
<splash src="res/splash/ios/splash-landscape-736h.png" gap:platform="ios" width="2208" height="1242"/>
</platform>
I've done this before without issue with another app, and the development version works fine on an iPhone 4, iPhone 5S and an iPad Mini all running the latest version of iOS7. I'm using the same set-up as for the other app but for this one but I get this error:
ERROR ITMS-9000: "Invalid Image Path - No image found at the path referenced under key 'CFBundleIconFiles':'icon.png'" at SoftwareAssests/SoftwareAsset (MZItmspSoftwareAssetPAckage)
This error is repeated once in Application Loader.
My icon.png is in the root folder, as it should be (I understand) and this the relevant bit of my config.xml:
<!-- Icons -->
<!-- Android -->
<icon src="icon.png" />
<!-- iOS -->
<!-- iPhone / iPod Touch -->
<icon src="img/ios/icon/icon.png" gap:platform="ios" width="57" height="57" />
<icon src="img/ios/icon/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="img/ios/icon/icon-60#2x.png" gap:platform="ios" width="120" height="120" />
<!-- iPad -->
<icon src="img/ios/icon/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="img/ios/icon/icon-76#2x.png" gap:platform="ios" width="152" height="152" />
<!-- Settings Icon -->
<icon src="img/ios/icon/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="img/ios/icon/icon-small#2x.png" gap:platform="ios" width="58" height="58" />
<!-- Spotlight Icon -->
<icon src="img/ios/icon/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="img/ios/icon/icon-40#2x.png" gap:platform="ios" width="80" height="80" />
<!-- Splash Screens -->
<!-- Android -->
<gap:splash src="splash.png" />
<!-- iPhone and iPod touch -->
<gap:splash src="img/ios/splash/Default.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="img/ios/splash/Default#2x.png" gap:platform="ios" width="640" height="960" />
<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="img/ios/splash/Default-568h#2x.png" gap:platform="ios" width="640" height="1136" />
<!-- iPad -->
<gap:splash src="img/ios/splash/Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="img/ios/splash/Default-Landscape.png" gap:platform="ios" width="1024" height="768" />
<!-- Retina iPad -->
<gap:splash src="img/ios/splash/Default-Portrait#2x.png" gap:platform="ios" width="1536" height="2048" />
<gap:splash src="img/ios/splash/Default-Landscape#2x.png" gap:platform="ios" width="2048" height="1536" />
I added an extra icon.png in img/ios/icons just to test things, because that's what works for iOS6 and because there is no other "pure" icon.png in the img/ios/icons folder. It shouldn't need it though as the default
in the root folder should work.
Can anyone tell me what the problem is?
I found a solution. It's not (afaik) the "proper" way to do it - my version should work - but it was given to me by a PGB employee.
I added
<icon src="icon.png" gap:platform="ios" width="57" height="57"/>
I'm posting this because until the PGB iOS icon issue is fixed (and many people are having the same) this will be invaluable.
And when the issue is fixed it will be obsolete. Such is life.
Our config.xml has
<gap:splash src="splash.png" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
However when we upload to the Phonegap build (build.phonegap.com) service it is not giving us the splash screens in the iOS build/
Could you give us more information on what type of device you are using? If you are deploying your test application on an iphone 5, im afraid you are missing the splash screen for that. I ran into the same problem with my application. Try creating an image for iphone 5 which has the following screen dimension:
<gap:splash src="resources/images/ios/Default_iphone5.png" width="640" height="1136" />