17 Replies Latest reply on Nov 25, 2016 9:31 AM by Abel From Worona

    Android splashscreen not working in Phonegap build

    devtcps Level 1

      I am running with the latest cli-6.3.0. My splash screen is working fine in IOS, but on android it doesn't show at all. The sceen is momentarily blank (black), and then it shows the home page. I have splash.png in the root folder (as well as icon.png). I have verified that the apk package contains the files in their appropriate directories.

       

      When the splash screen displays in IOS, I can tell that the preferences are used because the delay is set to 4000. In android, the splash screen is blank and goes away after about a second. It's as if the plugin doesn't work on android.

       

      My config.xml is as follows (pertinent parts only):

       

      <!-- preferences -->
      <preference name="phonegap-version" value="cli-6.3.0" />
      <preference name="orientation"      value="portrait" />
      <preference name="target-device"    value="universal" />
      <preference name="fullscreen"       value="false" />
      <preference name="SplashScreen" value="splash" />
      <preference name="SplashScreenDelay" value="4000" />
      <preference name="AutoHideSplashScreen" value="true" />
      <preference name="SplashMaintainAspectRatio" value="true" />
      <preference name="SplashShowOnlyFirstTime" value="false" />
      <preference name="StatusBarOverlaysWebView" value="false" />
      
      <!-- icons and splash screens -->
      <icon src="icon.png" />
      <splash src="splash.png" />
      <platform name="ios">
        <icon src="res/icon/ios/icon_ios_57x57.png" width="57" height="57"/>
        <icon src="res/icon/ios/icon_ios_72x72.png"  width="72" height="72"/>
        <icon src="res/icon/ios/icon_ios_76x76.png"  width="76" height="76"/>
        <icon src="res/icon/ios/icon_ios_120x120.png"  width="120" height="120"/>
        <icon src="res/icon/ios/icon_ios_152x152.png"  width="152" height="152"/>
        <splash src="res/screen/ios/splash_320x480.png" width="320" height="480"/>
        <splash src="res/screen/ios/splash@2x.png" width="640" height="960" />
        <splash src="res/screen/ios/splash-568h@2x.png" width="640" height="1136" />
        <splash src="res/screen/ios/splash-667h@2x.png" width="750" height="1334" />
      </platform>
      <platform name="android">
        <splash src="res/screen/android/splash-ldpi_200x320px.png" qualifier="ldpi"/>
        <splash src="res/screen/android/splash-mdpi_320x480px.png" qualifier="mdpi"/>
        <splash src="res/screen/android/splash-hdpi_480x800px.png" qualifier="hdpi"/>
        <splash src="res/screen/android/splash-xhdpi_720px1280px.png" qualifier="xhdpi"/>
        <splash src="res/screen/android/splash-xxhdpi_960px1600px.png" qualifier="xxhdpi"/>
      </platform>
      
      
       <!-- plugins  -->  
        <gap:plugin name="cordova-plugin-device" version="1.1.3" source="npm"/>
        <gap:plugin name="phonegap-plugin-push" version="1.8.3" source="npm">
        <param name="SENDER_ID" value="390638769384" />
        </gap:plugin>
        <gap:plugin spec="https://github.com/apache/cordova-plugin-dialogs#1.3.0" />
        <gap:plugin name="cordova-plugin-media" version="2.4.0" source="npm"/>
        <gap:plugin name="cordova-plugin-file" version="4.3.0"  source="npm"/>
        <gap:plugin name="cordova-plugin-file-transfer" version="1.6.0"  source="npm"/>
        <gap:plugin name="cordova-plugin-calendar" version="4.5.5" source="npm" />
        <gap:plugin name="cordova-plugin-appversion" version="1.0.0" source="npm"/>
        <gap:plugin name="cordova-plugin-statusbar" version="2.2.0" source="npm"/>
        <gap:plugin name="cordova-plugin-whitelist" version="1" source="npm" />
        <gap:plugin name="cordova-plugin-camera" version="2.3.0" source="npm" />
        <gap:plugin name="cordova-plugin-crop" version="0.3.1" source="npm" />
        <gap:plugin name="cordova-plugin-splashscreen" version="3.1.0" source="npm" />
        <gap:plugin name="cordova-plugin-uniquedeviceid" version="1.3.2" source="npm" />
      
        • 1. Re: Android splashscreen not working in Phonegap build
          devtcps Level 1

          Also note: if I call navigator.splashscreen.show() from the code, it works! For some reason it isn't working on startup which sounds like I may have a configuration problem?

           

          This isn't  a workaround because I can't use this method until the device ready event is fired, and that's too late.

          • 2. Re: Android splashscreen not working in Phonegap build
            kerrishotts Adobe Community Professional

            What Android device(s) have you tested on?

            • 3. Re: Android splashscreen not working in Phonegap build
              devtcps Level 1

              Good question - sorry - galaxy s5. That's the only android I have handy.

               

              Remember though, the splashscreen shows when calling the navigator.splashscreen.show() method.

               

              Thaks very much

              • 4. Re: Android splashscreen not working in Phonegap build
                ryanskihead Adobe Employee

                Have you tried removing the splash screen configuration preferences you're using and starting from vanilla splash plugin?

                • 5. Re: Android splashscreen not working in Phonegap build
                  devtcps Level 1

                  Just tried that. No luck. Same result.

                  • 6. Re: Android splashscreen not working in Phonegap build
                    ryanskihead Adobe Employee

                    How about changing your SplashScreen preference to this:

                     

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

                     

                    (sorry unable to test android myself at the moment).

                    • 7. Re: Android splashscreen not working in Phonegap build
                      devtcps Level 1

                      That was it! Thanks.

                       

                      So... Let it be known that the "SplashScreen" preference is required, and that the value refers to the name of the *directory* under which the files are stored (i.e. res/sceen/android). Is there anyone on this forum who can update the doc?

                       

                      Thanks again for your help!

                      1 person found this helpful
                      • 8. Re: Android splashscreen not working in Phonegap build
                        VectorP Level 4

                        Let it be known that the "SplashScreen" preference is required, and that the value refers to the name of the *directory* under which the files are stored (i.e. res/sceen/android).

                        Why do you think so?

                        The splashscreen plugin docs seem to say otherwise, and they don't mention anything about a directory name. Furthermore, using PGB you don't need any named directories at all!

                        • 9. Re: Android splashscreen not working in Phonegap build
                          Abel From Worona

                          Hi!

                           

                          After hours and hours searching in Internet and trying to figure out what the problem is in order to display this, so simple and so complicated, splash screens; I show you bellow in this post, my config.xml in case someone get help from it. I don't really know exactly what I was missing before, since I started from what's stated in the phonegap docs and I did many changes from different sources: this post, this other post from adobe forums and this stackoverflow question.

                           

                          Over all, changes had to do with:

                          1. Adding cordova-plugin-splashscreen.
                          2. Setting SplashScreen preference with the value where my splash images are.
                          3. Setting an orientation preference.
                          4. Setting density instead of qualifier in splash entries.
                          5. Set a fix version for phonegap-version.

                           

                          Note that I am always using PhoneGap Build. Not sure if this works using a local PhoneGap build.

                           

                          I would expect better and updated documentation in Phonegap in order to have this so basic feature working seamless.

                          Thank you very much devtcps for posting this and sharing your fix!!

                           

                          So here you go:

                          <?xml version='1.0' encoding='utf-8'?>
                          <widget id="com.example.www.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
                              <name>Example</name>
                              <author email="example@example.com" href="http://www.example.com/">
                                  Dr. Example
                              </author>
                              <content src="index.html" />
                              <preference name="android-minSdkVersion" value="14" />
                              <preference name="phonegap-version" value="cli-6.3.0" />
                              <preference name="orientation" value="all" />
                          
                          
                              <plugin name="cordova-plugin-splashscreen" source="npm" />
                              <preference name="SplashScreenDelay" value="3000" />
                              <preference name="AutoHideSplashScreen" value="true" />
                              <preference name="SplashScreen" value="www/res/screen/android" />
                              <preference name="SplashMaintainAspectRatio" value="true" />
                          
                          
                              <platform name="android">
                                  <icon qualifier="ldpi" src="www/res/icon/android/ldpi-icon.png" />
                                  <icon qualifier="mdpi" src="www/res/icon/android/mdpi-icon.png" />
                                  <icon qualifier="hdpi" src="www/res/icon/android/hdpi-icon.png" />
                                  <icon qualifier="xhdpi" src="www/res/icon/android/xhdpi-icon.png" />
                                  <icon qualifier="xxhdpi" src="www/res/icon/android/xxhdpi-icon.png" />
                                  <icon qualifier="xxxhdpi" src="www/res/icon/android/xxxhdpi-icon.png" />
                                  <splash density="ldpi" src="www/res/screen/android/ldpi.png" />
                                  <splash density="mdpi" src="www/res/screen/android/mdpi.png" />
                                  <splash density="hdpi" src="www/res/screen/android/hdpi.png" />
                                  <splash density="xhdpi" src="www/res/screen/android/xhdpi.png" />
                                  <splash density="xxhdpi" src="www/res/screen/android/xxhdpi.png" />
                                  <splash density="xxxhdpi" src="www/res/screen/android/xxxhdpi.png" />
                              </platform>
                              <platform name="ios">
                                  <icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
                                  <icon height="114" platform="ios" src="www/res/icon/ios/icon@2x.png" width="114" />
                                  <icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
                                  <icon height="80" platform="ios" src="www/res/icon/ios/icon-40@2x.png" width="80" />
                                  <icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
                                  <icon height="100" platform="ios" src="www/res/icon/ios/icon-50@2x.png" width="100" />
                                  <icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
                                  <icon height="120" platform="ios" src="www/res/icon/ios/icon-60@2x.png" width="120" />
                                  <icon height="180" platform="ios" src="www/res/icon/ios/icon-60@3x.png" width="180" />
                                  <icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
                                  <icon height="144" platform="ios" src="www/res/icon/ios/icon-72@2x.png" width="144" />
                                  <icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
                                  <icon height="152" platform="ios" src="www/res/icon/ios/icon-76@2x.png" width="152" />
                                  <icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
                                  <icon height="58" platform="ios" src="www/res/icon/ios/icon-small@2x.png" width="58" />
                                  <icon height="87" platform="ios" src="www/res/icon/ios/icon-small@3x.png" width="87" />
                                  <splash height="480" platform="ios" src="www/res/screen/ios/Default.png" width="320" />
                                  <splash height="960" platform="ios" src="www/res/screen/ios/Default@2x.png" width="640" />
                                  <splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h@2x.png" width="640" />
                                  <splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h@2x.png" width="750" />
                                  <splash height="2208" platform="ios" src="www/res/screen/ios/Default-Portrait-736h@3x.png" width="1242" />
                                  <splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait@2x.png" width="1536" />
                                  <splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait.png" width="768" />
                              </platform>
                              <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>
                              <engine name="android" spec="~6.0.0" />
                          </widget>
                          
                          • 10. Re: Android splashscreen not working in Phonegap build
                            benjamino96587917 Level 1

                            Abel From Worona and devtcps you shouldn't need to define the value as the splash location.

                            I have mine defined as below, and it works every time.

                             

                            <splash src="www/splash.png" />  (PS: This is in line with the updated app structure here)


                            <plugin name="cordova-plugin-splashscreen"                source="npm">
                                  <preference name="SplashScreen"               value="splash" />
                                  <preference name="AutoHideSplashScreen"       value="true" />
                                  <preference name="SplashScreenDelay"          value="5000" />
                                  <preference name="SplashMaintainAspectRatio"  value="true" />
                                  <preference name="FadeSplashScreen"           value="false"/>
                                  <preference name="ShowSplashScreenSpinner"    value="false" />
                            </plugin> 
                            • 11. Re: Android splashscreen not working in Phonegap build
                              Abel From Worona Level 1

                              Hi benjamino96587917!

                               

                              Please, could you check whether that works if you move that splash .png in a subdirectory of www and you define it inside a platform tag?

                              I'm not looking for just one default splash, but for the specific splash with right resolution (as shown in phonegap docs) and I also prefer to have them organized in subdirectories like www/res/screen/android.

                              • 12. Re: Android splashscreen not working in Phonegap build
                                benjamino96587917 Level 1

                                Abel From Worona, sure I didn't mention before, but I also have these resolution-specific definitions:

                                 

                                <platform name="android">
                                    <splash src="www/res/screen/android/splash-land-hdpi.png" qualifier="land-hdpi"/>
                                    <splash src="www/res/screen/android/splash-land-ldpi.png" qualifier="land-ldpi"/>
                                    <splash src="www/res/screen/android/splash-land-mdpi.png" qualifier="land-mdpi"/>
                                    <splash src="www/res/screen/android/splash-land-xhdpi.png" qualifier="land-xhdpi"/>
                                    <splash src="www/res/screen/android/splash-land-xxhdpi.png" qualifier="land-xxhdpi"/>
                                    <splash src="www/res/screen/android/splash-land-xxxhdpi.png" qualifier="land-xxxhdpi"/>

                                 

                                    <splash src="www/res/screen/android/splash-port-hdpi.png" qualifier="port-hdpi"/>
                                    <splash src="www/res/screen/android/splash-port-ldpi.png" qualifier="port-ldpi"/>
                                    <splash src="www/res/screen/android/splash-port-mdpi.png" qualifier="port-mdpi"/>
                                    <splash src="www/res/screen/android/splash-port-xhdpi.png" qualifier="port-xhdpi"/>
                                    <splash src="www/res/screen/android/splash-port-xxhdpi.png" qualifier="port-xxhdpi"/>
                                    <splash src="www/res/screen/android/splash-port-xxxhdpi.png" qualifier="port-xxxhdpi"/>
                                </platform>

                                 

                                Also, can you use the resource "qualifier" as opposed to the "density" you have used.

                                • 13. Re: Android splashscreen not working in Phonegap build
                                  Abel From Worona Level 1

                                  sure benjamino96587917, but, in order to make sure that you're using the highest resolution and not only the default splash, have you tried to remove the splash.png from the root an use the resolution specifics only? and, also, are you using phonegap build or just local phonegap?

                                  • 14. Re: Android splashscreen not working in Phonegap build
                                    benjamino96587917 Level 1

                                    Abel From Worona I have indeed tried removing it from the root as you suggested, and it still works.

                                    I loaded my app both in portrait and landscape orientations and it loaded with the two different spalshscreens I specified for each orientation.

                                     

                                    Have you changed to resource "qualifier" as opposed to the "density" you have used?

                                     

                                    I am using PhoneGap Build.

                                    • 15. Re: Android splashscreen not working in Phonegap build
                                      Abel From Worona Level 1

                                      I've simply changed "density" by "qualifier" and the app doesn't display splash-screens anymore, changed back and it works again.

                                      • 16. Re: Android splashscreen not working in Phonegap build
                                        benjamino96587917 Level 1

                                        Abel From Worona Couple of things:

                                          1. In your orientation preference, is `all` an acceptable value? I think it should be default, landscape or portrait.  The "all" below means it applies to all platforms.
                                          2. This PhoneGap Blog talks about the change from "density" to "qualifier".
                                          3. Abel From Worona wrote:

                                             

                                            I've simply changed "density" by "qualifier" and the app doesn't display splash-screens anymore, changed back and it works again.

                                            The OP in this solution made the same change and others to resolve the same issue. Maybe change in combination with something else?

                                          4. Have you tried putting a completely different image as the default splash just to check that it's not the default splash that displays? In the root of your app www folder named splash.png, and add the splash tag to the config.xml

                                          5. As a last resort, maybe when all else fails, we can request PhoneGap to update the docs here (after their testing) along the lines of:
                                            • For those who do not want a default splash image, use the directory of your splash files as the value for your SplashScreen preference.
                                        • 17. Re: Android splashscreen not working in Phonegap build
                                          Abel From Worona Level 1

                                          1. You're right, phonegap says to use default. I think I took it from Cordova docs:

                                          NOTE: The default value means Cordova will strip the orientation preference entry from the platform's manifest/configuration file allowing the platform to fallback to its default behavior. For iOS, to specify both portrait & landscape mode you would use the platform specific value 'all'.

                                          (Extracted from Config.xml - Apache Cordova )

                                          Anyway, I've tested it with either default or all and it works. Thank you.

                                           

                                          2. I read it and it makes sense that it should work just replacing it density by qualifier. Maybe adding some prefix like drawable- or port- it might work, but I'm not willing to experiment with this anymore and I don't need any of those "quaifier" features. "if it ain't broke, don't fix it".

                                           

                                          3. I've never used a default splash screen, so I can be very confident that's not the problem.

                                           

                                          4. IMHO, Adobe is not taking care of updating the docs and that's the main issue. We could PR them, help people in forums and write posts about it; but, as I see it, Adobe is the main responsible to have its products updated and usable and, also, it's who has access to the source code and configuration of PhoneGap Build.