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
Related
I'm using Cordova 6.5.0 with platform ios 4.3.1. I have installed the SplashScreen plugin and am using Legacy Launch Images
I have prepared splash screen images of the below sizes, added them in config.xml and placed them in project_folder/res/screen/ios
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default#2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-568h#2x~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
After building the app, I can see in Xcode that all the above images are reflected in the LaunchImage asset catalog under unassigned category.
When I run the app on iPhone 5 (iOS 10), I get a launch screen followed by a white screen (with loading indicator) for 1 second, followed by the app's main screen. Also in the Xcode console, I can see the below warning
WARNING: The splashscreen image named Default-568h was not found
Whereas I expect it to display the splash screen for 10 seconds (SplashScreenDelay)
Follow the syntax in Legacy Launch Image. There is no <splash src="res/screen/ios/Default-568h.png" width="640" height="1136"/> in the config.xml
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" />
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>
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" />
I'm trying to configure a splashscreen for a landscape mode ipad app using phonegap build. I used the specification mentioned in phonegap documentation (https://build.phonegap.com/docs/config-xml), however it doesn't seem to work. It seems to be a problem with the splashcreen tag, because the icons work just fine.
I'm running an iPad with iOS 5.1. Has anyone had a similar problem ?
Any help would be much appreciated.
Here is my config.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.myapp"
version = "1.0.0">
<name>myapplication</name>
<description>myapplication</description>
<author href="https://www.myapp.org" email="my#app.org">myapp</author>
<preference name="orientation" value="landscape" />
<gap:splash src="gfx/ios/splashscreen_landscape.png" width="1024" height="748"/>
<gap:splash src="gfx/ios/splashscreen_portrait.png" width="768" height="1004"/>
<icon src="gfx/ios/icon57x57.png" width="57" height="57"/>
<icon src="gfx/ios/icon72x72.png" width="72" height="72"/>
<icon src="gfx/ios/icon114x114.png" width="114" height="114"/>
</widget>
Turns out that height is 768 instead of 748 (no status bar), so i ended up with this tag in my config.xml:
<gap:splash src="gfx/ios/splashscreen_tablet.png" width="1024" height="768"/>
And the splashscreen_tablet.png, must also be rotated by 90 degrees. It should be a 768x1024 png. It works the same way offline webapps do.