11 Replies Latest reply on Apr 10, 2017 7:16 AM by cote.jp

    Documentation for Splash Screen

    cote.jp Level 1

      Today, I spent a huge amount of time trying to make splash screens work as per the documentation without any luck. Then I read somewhere that you actually need to use the cordova-plugin-splashscreen to do that.

       

      Is the information simply missing from the PGB documentation or is there a way to do that without a plugin? TIA.

        • 1. Re: Documentation for Splash Screen
          ryanskihead Adobe Employee

          Try using a template/example, such as phonegap star rack, and sub in your own splash screen images

           

          GitHub - phonegap/phonegap-app-star-track: The PhoneGap media example app

          • 2. Re: Documentation for Splash Screen
            cote.jp Level 1

            The Star Track example also uses cordova-plugin-splashscreen. If the proper way is to use the plugin, it would be immensely useful to mention that in the PGB documentation. Currently, there is no mention of that plugin in the section about splash screens: Icons and Splash | PhoneGap Docs

             

            Thanks.

             

            P.S. I did manage to make it work once I learned that I needed a plugin.

            • 3. Re: Documentation for Splash Screen
              kerrishotts Adobe Community Professional

              Thing is you shouldn't need the plugin if you just need the splash screen to be visible when starting your app. If you need to control the timings, however, or show/hide it programmatically, then you would need the plugin.

              • 4. Re: Documentation for Splash Screen
                cote.jp Level 1

                kerrishotts  I guess this is the answer to my question. The problem is that I haven't been able to make it work without the plugin. I guess I'll have to do more tests... You wouldn't happen to have a sample that I could start with that does not use the plugin?

                • 6. Re: Documentation for Splash Screen
                  cote.jp Level 1

                  Okay, I'll give it a try. Thanks a lot. 

                   

                  I have experience in JavaScript but Phonegap Build is a first for me. I have been tasked to give a college-level course that uses it, so I'm trying to clear as many hurdles as I can. So far, the problems have been mostly about sorting out the good examples from the bad and/or unrelated.

                   

                  A lot of tutorials, articles and sites are about Cordova or Phonegap-CLI and it's sometimes hard to know which syntax to use where.

                   

                  If I ever become annoying, just tell me. However, if my comments may help refine the documentation from a newbie's perspective, I'll be happy to report areas that could be improved.

                   

                  Thanks again.

                  • 7. Re: Documentation for Splash Screen
                    cote.jp Level 1

                    I first tried using the single <splash src="splash.png" /> instruction but it did not work.

                     

                    Then I tried doing it in the way your example suggested (with the gap namespace, even though I read somewhere this is deprecated):

                     

                    <gap:splash src="ressources/splash/splash-ldpi.png"  gap:platform="android" gap:density="ldpi" />
                    <gap:splash src="ressources/splash/splash-mdpi.png"  gap:platform="android" gap:density="mdpi" />
                    <gap:splash src="ressources/splash/splash-hdpi.png"  gap:platform="android" gap:density="hdpi" />
                    <gap:splash src="ressources/splash/splash-xhdpi.png" gap:platform="android" gap:density="xhdpi" />
                    <gap:splash src="ressources/splash/splash-xxhdpi.png" gap:platform="android" gap:density="xxhdpi" />

                    <gap:splash src="ressources/splash/splash-xxxhdpi.png" gap:platform="android" gap:density="xxxhdpi" />

                     

                    This did not work either. Then I tried this:

                     

                    <platform name="android">

                      <splash src="ressources/splash/splash-ldpi.png" qualifier="ldpi"/>
                      <splash src="ressources/splash/splash-mdpi.png" qualifier="mdpi"/>
                      <splash src="ressources/splash/splash-hdpi.png" qualifier="hdpi"/>
                      <splash src="ressources/splash/splash-xhdpi.png" qualifier="xhdpi"/>
                      <splash src="ressources/splash/splash-xxhdpi.png" qualifier="xxhdpi"/>
                      <splash src="ressources/splash/splash-xxxhdpi.png" qualifier="xxxhdpi"/>

                    </platform>

                     

                    Didn't work. Obviously, I also tried the way suggested in the documentation:

                     

                    <splash src="ressources/splash/splash-ldpi.png" platform="android" qualifier="ldpi" />
                    <splash src="ressources/splash/splash-mdpi.png" platform="android" qualifier="mdpi" />
                    <splash src="ressources/splash/splash-hdpi.png" platform="android" qualifier="hdpi" />
                    <splash src="ressources/splash/splash-xhdpi.png" platform="android" qualifier="xhdpi" />
                    <splash src="ressources/splash/splash-xxhdpi.png" platform="android" qualifier="xxhdpi" />
                    <splash src="ressources/splash/splash-xxxhdpi.png" platform="android" qualifier="xxxhdpi" />

                     

                    So far, I have not been able to display a splash screen on Android without using the plugin. Is it possible? If it is, would a kind soul point me in the direction of an example that works on Android.

                     

                    If not, the documentation should be updated to mention the plugin.

                     

                    Thanks.

                     

                     

                    P.S. This is my full 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  = "ca.dectim.mi4.superjeu"
                       version  = "0.0.1"
                    >

                      <name>SuperJeu!</name>
                      <description>Le SuperJeu du cours de Médias interactifs IV</description>

                      <author href="https://dectim.ca" email="abc@test.com">Jean-Philippe Côté</author>


                      <preference name="orientation" value="landscape" />
                      <preference name="fullscreen" value="true" />
                      <preference name="webviewbounce" value="false" />
                      <preference name="DisallowOverscroll" value="true" />

                      <platform name="android">
                           <icon src="ressources/icones/ldpi.png" qualifier="ldpi" />
                           <icon src="ressources/icones/mdpi.png" qualifier="mdpi" />
                           <icon src="ressources/icones/hdpi.png" qualifier="hdpi" />
                           <icon src="ressources/icones/xhdpi.png" qualifier="xhdpi" />
                           <icon src="ressources/icones/xxhdpi.png" qualifier="xxhdpi" />
                           <icon src="ressources/icones/xxxhdpi.png" qualifier="xxxhdpi" />

                           <splash src="ressources/splash/splash-ldpi.png" qualifier="ldpi"/>
                           <splash src="ressources/splash/splash-mdpi.png" qualifier="mdpi"/>
                           <splash src="ressources/splash/splash-hdpi.png" qualifier="hdpi"/>
                           <splash src="ressources/splash/splash-xhdpi.png" qualifier="xhdpi"/>
                           <splash src="ressources/splash/splash-xxhdpi.png" qualifier="xxhdpi"/>
                           <splash src="ressources/splash/splash-xxxhdpi.png" qualifier="xxxhdpi"/>
                      </platform>

                    </widget>

                    • 8. Re: Documentation for Splash Screen
                      taywagmbh

                      hi cote.jp

                       

                      did you manage to get the splashscreens working in android? also: do you build locally or with PGB?

                       

                      kind regards

                      team taywa

                      • 9. Re: Documentation for Splash Screen
                        cote.jp Level 1

                        I was not able to get the splashscreens working on Android without the plugin. I am building with PGB.

                        Thanks!

                        • 10. Re: Documentation for Splash Screen
                          taywagmbh Level 1

                          but it works for you with the <plugin name="cordova-plugin-splashscreen" spec="~4.0.2" /> node in your config.xml?

                          if so: could you paste the part of your config.xml where you define the splashscreens? mine is not working:

                           

                          <platform name="android">

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

                          [...]

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

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

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

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

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

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

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

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

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

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

                          </platform>

                           

                          thanks!

                          • 11. Re: Documentation for Splash Screen
                            cote.jp Level 1

                            Oh, I see. I thought you had an answer for me whereas you were expecting one from me. Here is a working example using cordova-plugin-splashscreen:

                             

                            <?xml version="1.0" encoding="UTF-8" ?>

                            <widget
                               xmlns  = "http://www.w3.org/ns/widgets"
                               xmlns:gap  = "http://phonegap.com/ns/1.0"
                               id  = "ca.dectim.mi4.superjeu"
                               version  = "0.0.1"
                            >

                              <!-- Identification et description -->
                              <name>SomeName!</name>

                              <description>
                                 Some description!

                              </description>

                              <author href="https://dectim.ca" email="xxx@cegepmontpetit.ca">
                               Jean-Philippe Côté

                              </author>

                              <preference name="orientation" value="landscape" />
                              <preference name="fullscreen" value="true" />
                              <preference name="webviewbounce" value="false" />
                              <preference name="DisallowOverscroll" value="true" />

                              <plugin name="cordova-plugin-splashscreen" source="npm">
                              <preference name="SplashScreen" value="splash" />
                              <preference name="AutoHideSplashScreen" value="false" />
                               <preference name="SplashMaintainAspectRatio" value="true" />
                              <preference name="FadeSplashScreen" value="true"/>
                              <preference name="FadeSplashScreenDuration" value="250"/>
                              <preference name="ShowSplashScreenSpinner" value="false" />
                              </plugin>

                              <platform name="android">

                               <splash src="ressources/splash/splash-ldpi.png" qualifier="ldpi"/>
                              <splash src="ressources/splash/splash-mdpi.png" qualifier="mdpi"/>
                              <splash src="ressources/splash/splash-hdpi.png" qualifier="hdpi"/>
                              <splash src="ressources/splash/splash-xhdpi.png" qualifier="xhdpi"/>
                              <splash src="ressources/splash/splash-xxhdpi.png" qualifier="xxhdpi"/>
                              <splash src="ressources/splash/splash-xxxhdpi.png" qualifier="xxxhdpi"/>

                              </platform>

                            </widget>