7 Replies Latest reply on Jul 12, 2016 10:37 AM by RonSSA

    No splash screen for Android app

    RonSSA Level 1

      Hello, Newbie here.  I just built my first PhoneGap Build IOS/Android app and successfully ran the build process and installed the apps on both an iPhone 6 (IOS) and Samsung Galaxy S7 (Android).  Both apps look and work great, except...  There doesn't appear to be a splash screen on the Android app.  The IOS app works perfectly and displays my splash screen for about 3 seconds.  The Android app appears to go straight to my main screen although there seems to be a flash of a white screen for a millisecond.  I've searched quite a bit but can't find anything that looks relevant.  I started with the phonegap example app and modified the files from there.  Here is my config.xml which is located at the root of the www folder.  I used the same folder structure and filenames as the example app.  Do I need to do something special to make this work in Android?

       

      <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.ssa-corp.metalcalculator" version="2.0.0">

        <name>Service Steel Weight Calculator</name>

        <description>Service Steel Aerospace metal weight calculator and unit converter.</description>

        <author href="http://www.ssa-corp.com" email="sales@ssa-corp.com">Service Steel Aerospace</author>

        <content src="index.html"/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <icon src="icon.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-land-xhdpi-screen.png" density="land-xhdpi"/>

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

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

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

       

      Ron

        • 1. Re: No splash screen for Android app
          VectorP Level 4

          You are specifying compound qualifiers for the 'density' attribute, which is not correct.

          (Yes, that's how the default project defines them, and it's what the splashscreen plugin docs say, but it's still not correct)

          Use the 'qualifiers' attribute instead, and specify only ldpi-xxxhdpi in the 'density' attribute.

           

          BTW: You have a complete set of portrait splashes for iOS. However, only a couple of them have been specified for landscape, too. Don't you want the landscape version for the others?

          • 2. Re: No splash screen for Android app
            RonSSA Level 1

            I will give that a try.  Are you saying I should use the following instead of what I have?  How does Android know the difference between portrait and landscape?

             

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

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

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

            <splash src="res/screen/android/drawable-land-xhdpi-screen.png" qualifier="xhdpi"/>

            <splash src="res/screen/android/drawable-land-xxhdpi-screen.png" qualifier="xxhdpi"/>

            <splash src="res/screen/android/drawable-land-xxxhdpi-screen.png" qualifier="xxxhdpi"/>

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

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

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

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

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

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

             

            As for the iOS splashes I was just following the example app.  I find it pretty troubling the example app and the documentation can lead people so far astray.

            • 3. Re: No splash screen for Android app
              VectorP Level 4

              No, for the qualifier attribute, you can use compounds. Just not for the density attribute.

              You can even combine them.

              See the new docs, where they have even omitted the density attribute:

              Icons and Splash | PhoneGap Docs

               

              I find it pretty troubling the example app and the documentation can lead people so far astray.

              They do that on purpose. One of the core businesses of Adobe is to keep their forums alive.

               

              (Oh, and I noticed that you pinned a previous version for many plugins. Did you do that intentionally, or would you rather like to use the latest versions?)

              • 4. Re: No splash screen for Android app
                RonSSA Level 1

                Here's what I have in the android section now:

                  <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" platform="android" qualifier="land-ldpi"/>

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

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

                    <splash src="res/screen/android/drawable-land-xhdpi-screen.png" platform="android" qualifier="land-xhdpi"/>

                    <splash src="res/screen/android/drawable-land-xxhdpi-screen.png" platform="android" qualifier="land-xxhdpi"/>

                    <splash src="res/screen/android/drawable-land-xxxhdpi-screen.png" platform="android" qualifier="land-xxxhdpi"/>

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

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

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

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

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

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

                </platform>

                 

                I've tried it with and without the "platform="android"".

                I also tried adding "<preference name="SplashScreenDelay" value="3000"/>" after my other preferences.

                 

                I still have the same results.  A flash of a white screen then my main app starts.

                 

                Did I enter the new splash items correctly?

                • 5. Re: No splash screen for Android app
                  VectorP Level 4

                  You did.

                  Perhaps the splashes can't be found. What does your project directory structure look like?

                  Do you have something like this, or something different?:

                   

                  /index.html

                  /config.xml

                  /icon.png

                  /res/icon/....

                  /res/screen/....

                  • 6. Re: No splash screen for Android app
                    RonSSA Level 1

                    First, thank you for spending so much time with me on this.  greatly appreciated.

                     

                    Here's my entire WWW folder, I included everything in case there's something else I'm doing to cause this problem.

                     

                    Directory of C:\mobile_apps\SSA Calculator\www
                    <DIR>          res
                    <DIR>          css
                    <DIR>          js
                    <DIR>          img
                    <DIR>          spec
                    index.html
                    config.xml
                    icon.png
                    favicon.ico
                    spec.html

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\img

                    stainless_steel.png
                    logo.png

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\js

                    jquery.min.js
                    index.js

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\res

                    <DIR>          screen
                    <DIR>          icon
                    .pgbomit

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\res\icon

                    <DIR>          android
                    <DIR>          ios

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\res\icon\android

                    drawable-ldpi-icon.png
                    drawable-mdpi-icon.png
                    drawable-xhdpi-icon.png
                    drawable-xxhdpi-icon.png
                    drawable-xxxhdpi-icon.png
                    drawable-hdpi-icon.png

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\res\icon\ios

                    icon-40.png
                    icon-40@2x.png
                    icon-50.png
                    icon-50@2x.png
                    icon-60.png
                    icon-60@2x.png
                    icon-60@3x.png
                    icon-72.png
                    icon-72@2x.png
                    icon-76.png
                    icon-76@2x.png
                    icon-small.png
                    icon-small@2x.png
                    icon-small@3x.png
                    icon.png
                    icon@2x.png

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\res\screen

                    <DIR>          android
                    <DIR>          ios

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\res\screen\android

                    drawable-land-hdpi-screen.png
                    drawable-land-ldpi-screen.png
                    drawable-land-mdpi-screen.png
                    drawable-land-xhdpi-screen.png
                    drawable-land-xxhdpi-screen.png
                    drawable-land-xxxhdpi-screen.png
                    drawable-port-hdpi-screen.png
                    drawable-port-ldpi-screen.png
                    drawable-port-mdpi-screen.png
                    drawable-port-xhdpi-screen.png
                    drawable-port-xxhdpi-screen.png
                    drawable-port-xxxhdpi-screen.png

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\res\screen\ios

                    Default-568h@2x~iphone.png
                    Default-667h.png
                    Default-736h.png
                    Default-Landscape-736h.png
                    Default-Landscape@2x~ipad.png
                    Default-Landscape~ipad.png
                    Default-Portrait@2x~ipad.png
                    Default-Portrait~ipad.png
                    Default@2x~iphone.png
                    Default~iphone.png

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\spec

                    <DIR>          lib
                    index.js
                    helper.js

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\spec\lib

                    <DIR>          jasmine-1.2.0

                     

                    Directory of C:\mobile_apps\SSA Calculator\www\spec\lib\jasmine-1.2.0

                    jasmine.css
                    jasmine.js
                    MIT.LICENSE
                    jasmine-html.js

                    • 7. Re: No splash screen for Android app
                      RonSSA Level 1

                      OK, I've got it figured out!

                       

                      I have added the following preferences after my current preferences:

                        <preference name="SplashScreen" value="splash"/>

                        <preference name="SplashScreenDelay" value="4000"/>

                        <preference name="ShowSplashScreenSpinner" value="false" />

                       

                      And I copied one of my splash screens to the root of the www folder and named it splash.png

                       

                      Now both Android and IOS behave the same.

                       

                      Ron