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
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 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" />
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.