lola_the_coding_girl February 2016

Phonegap build with cordova splashscreen plugin not showing my custom splash graphic

And by "custom splash graphic" I just mean my own image. No matter what I try I it always just shows the little phonegap robot. Note that I'm only concerned with Android here. Here's what I've done:

  • installed the plugin via command line
  • ran my original image through this converter to get it as a collection of the appropriate Android sizes
  • replaced the files in these path with my own (yes, I renamed my own files to these names):

    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/ldpi.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/mdpi.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/hdpi.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/xhdpi.png" />
    
  • replaced the files in these paths to my own even though it shouldn't have anything to do with splash image:

    <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/ldpi.png" />
    <icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/mdpi.png" />
    <icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/hdpi.png" />
    <icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/xhdpi.png" />
    

At this point I honestly don't even see where the default phonegap robot image file could be hiding in my project or what in config.xml is pointing to it.

Answers


pointdeveloper.com February 2016

Have you added the default splash screen location like so

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

also as per the new updated docs seen here http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens

the gap:splash is be deprecated and you are supposed to use just the splash tag

I have found that if you add the plugin using npm in phonegap buil it does not work so the following will not work

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

and so you have add the plugin the old way so the followin works

<plugin name="br.com.paveisitemas.splashscreen" spec="2.1.1" source="pgb" />

Please note that in the past splash screens were specified with the gap:splash element and the platform specified with gap:platform. This is still supported but we recommend moving to splash and platform.


lola_the_coding_girl February 2016

In my case what I was seeing was, in fact, not the splash but rather the background image set in index.css. So while the app shows it loads the robot image... which is not the splash.

Post Status

Asked in February 2016
Viewed 3,430 times
Voted 11
Answered 2 times

Search




Leave an answer