4 Replies Latest reply on Jan 26, 2017 9:54 AM by kerrishotts

    my phonegap build app uses icon as splash screen

    footbally69494486

      Recently, I used phonegap build to build my app. I already set up the icon and splash screen in the config.xml. It works fine in iOS before I upgraded it to iOS10.2

      But after upgrading to iOS 10.2, every time when I launch my app, it uses the app's icon as the splash screen for a second or so. It stretch the icon to fit the screen and really make it look ugly when launching.

       

      Wondering if someone else has the same problem? How to make it not using the stretched (transformed) icon as splash screen. Appreciate any instructions.

        • 1. Re: my phonegap build app uses icon as splash screen
          kerrishotts Adobe Community Professional

          Please share your config.xml file (minus identifying / secret information).

          • 2. Re: my phonegap build app uses icon as splash screen
            footbally69494486 Level 1

            Hi Kerrishotts, pls take a look at my config.xml below. Thanks.

             

             

            <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.something.something" versionCode="10004" version="1.3.0" ios-CFBundleVersion="1.3.100">

              <name>something</name>

              <description>something else</description>

              <author href="http://www.something.us" email="service@something.us">soemthing, Inc</author>

              <content src="index.html"/>

              <preference name="DisallowOverscroll" value="true"/>

              <preference name="android-minSdkVersion" value="16"/>

              <preference name="orientation" value="portrait" />

              <gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true">

                <false/>

              </gap:config-file>

              <gap:config-file platform="ios" parent="UIStatusBarHidden" overwrite="true"> <true/> </gap:config-file>

              <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.2.2"/>

              <plugin name="cordova-plugin-camera" source="npm" spec="~2.3.1"/>

              <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.4.1">

              <variable name="CAMERA_USAGE_DESCRIPTION" value="to scan cards." />

              <variable name="MICROPHONE_USAGE_DESCRIPTION" value="App will not access the microphone." />

              <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="to select photos of cards." />

              </plugin>

             

              <gap:plugin name="com.paypal.cordova.mobilesdk" source="npm" spec="~3.3.1" />

             

              <plugin name="cordova-plugin-console" source="npm" spec="~1.0.5"/>

              <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1"/>

              <plugin name="cordova-plugin-device" source="npm" spec="~1.1.4"/>

              <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.3"/>

              <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.5"/>

              <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.3.1"/>

              <plugin name="cordova-plugin-file" source="npm" spec="~4.3.1"/>

              <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.6.1"/>

              <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.4.1"/>

              <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.5"/>

              <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.6.1"/>

              <plugin name="cordova-plugin-media" source="npm" spec="~2.4.1"/>

              <plugin name="cordova-plugin-network-information" source="npm" spec="~1.3.1"/>

              <plugin name="cordova-plugin-splashscreen" source="npm" spec="~4.0.1"/>

              <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.2.1"/>

              <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.3"/>

              <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.3.1"/>

              <icon src="icon.png"/>

              <splash src="splash.png"/>

              <platform name="android">

                <icon src="res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>

                <icon src="res/icon/android/drawable-mdpi-icon.png" density="mdpi"/>

                <icon src="res/icon/android/drawable-hdpi-icon.png" density="hdpi"/>

                <icon src="res/icon/android/drawable-xhdpi-icon.png" density="xhdpi"/>

                <icon src="res/icon/android/drawable-xxhdpi-icon.png" density="xxhdpi"/>

                <icon src="res/icon/android/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>

                <splash src="res/screen/android/drawable-land-ldpi-screen.png" density="land-ldpi"/>

                <splash src="res/screen/android/drawable-land-mdpi-screen.png" density="land-mdpi"/>

                <splash src="res/screen/android/drawable-land-hdpi-screen.png" density="land-hdpi"/>

               

                <splash src="res/screen/android/drawable-port-ldpi-screen.png" density="port-ldpi"/>

                <splash src="res/screen/android/drawable-port-mdpi-screen.png" density="port-mdpi"/>

                <splash src="res/screen/android/drawable-port-hdpi-screen.png" density="port-hdpi"/>

                <splash src="res/screen/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>

                <splash src="res/screen/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>

                <splash src="res/screen/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>

              </platform>

              <platform name="ios">

                <icon src="res/icon/ios/icon.png" platform="ios" width="57" height="57"/>

                <icon src="res/icon/ios/icon@2x.png" platform="ios" width="114" height="114"/>

                <icon src="res/icon/ios/icon-40.png" platform="ios" width="40" height="40"/>

                <icon src="res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80"/>

                <icon src="res/icon/ios/icon-50.png" platform="ios" width="50" height="50"/>

                <icon src="res/icon/ios/icon-50@2x.png" platform="ios" width="100" height="100"/>

                <icon src="res/icon/ios/icon-60.png" platform="ios" width="60" height="60"/>

                <icon src="res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120"/>

                <icon src="res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180"/>

                <icon src="res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/>

                <icon src="res/icon/ios/icon-72@2x.png" platform="ios" width="144" height="144"/>

                <icon src="res/icon/ios/icon-76.png" platform="ios" width="76" height="76"/>

                <icon src="res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152"/>

                <icon src="res/icon/ios/icon-small.png" platform="ios" width="29" height="29"/>

                <icon src="res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58"/>

                <icon src="res/icon/ios/icon-small@3x.png" platform="ios" width="87" height="87"/>

                <splash src="res/screen/ios/Default-568h@2x~iphone.png" platform="ios" width="640" height="1136"/>

                <splash src="res/screen/ios/Default-667h.png" platform="ios" width="750" height="1334"/>

                <splash src="res/screen/ios/Default-736h.png" platform="ios" width="1242" height="2208"/>

                <splash src="res/screen/ios/Default-Landscape-736h.png" platform="ios" width="2208" height="1242"/>

                <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536"/>

                <splash src="res/screen/ios/Default-Landscape~ipad.png" platform="ios" width="1024" height="768"/>

                <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048"/>

                <splash src="res/screen/ios/Default-Portrait~ipad.png" platform="ios" width="768" height="1024"/>

                <splash src="res/screen/ios/Default@2x~iphone.png" platform="ios" width="640" height="960"/>

                <splash src="res/screen/ios/Default~iphone.png" platform="ios" width="320" height="480"/>

              </platform>

             

              <access origin="*"/>

              <allow-intent href="http://*/*"/>

              <allow-intent href="https://*/*"/>

              <allow-intent href="tel:*"/>

              <allow-intent href="sms:*"/>

              <allow-intent href="mailto:*"/>

              <allow-intent href="geo:*"/>

              <platform name="android">

                <allow-intent href="market:*"/>

              </platform>

              <platform name="ios">

                <allow-intent href="itms:*"/>

                <allow-intent href="itms-apps:*"/>

              </platform>

            </widget>

            • 3. Re: my phonegap build app uses icon as splash screen
              VectorP Level 4

              I would suggest:

              - use PGB cli-6.4.0, not the default cli-6.3.0

              - add the missing splashes. You have several splashes for one orientation, only.

               

              Also, your Android splashes won't show correctly. Use the qualifier attribute for compound qualifiers, not density.

              • 4. Re: my phonegap build app uses icon as splash screen
                kerrishotts Adobe Community Professional

                Also:

                 

                • Do you really need all those plugins? Eliminate plugins you don't need.
                • Can you share a screenshot along with your icon & splash screens?