PhoneGap Splash Screen, instruction not clear

Question

I recently decide to work on PhoneGap to write apps on multiple devices. Every time I try to use a plugin, it works after a lot of hours and hundreds and hundreds search on Google... and some time it not working at all for me. So I probably do not understand the basic knowledge of PhoneGap.

Let's talk about a simple plugin, the Splash Screen plugin (https://github.com/apache/cordova-plugin-splashscreen).

On the plugin instruction, I understand that I need to write those lines in config.xml:

<preference name="SplashScreen" value="foo" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />

But if you read the instruction in a link found in the Android part (http://cordova.apache.org/docs/en/dev/config_ref/images.html) I should write these lines in config.xml:

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

I tried both instruction and it's not working. I found also other instruction on PhoneGap Build and I suppose to write these liens in the config.xml:

<splash src="ldpi.png" platform="android" qualifier="ldpi" />
<splash src="mdpi.png" platform="android" qualifier="mdpi" />
<splash src="hdpi.png" platform="android" qualifier="hdpi" />
<splash src="xhdpi.png" platform="android" qualifier="xhdpi" />
<splash src="fr-xhdpi.png" platform="android" qualifier="fr-xhdpi" />
<splash src="portrait-xxhdpi.png" platform="android" qualifier="port-xxhdpi" />
<splash src="landscape-xxhdpi.png" platform="android" qualifier="land-xxhdpi" />

and to confuse me more, if I check the "default" config.xml that PhoneGap generates, I found these lines:

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

As you can see, sometime the source file starts with 'www' or 'res', sometime we have a that <splash> inside the <platform> element or platform is an attribute of <splash> element.
What is the difference between the <splash> and <gap:splash> element?

I'm very confused with instructions found in the PhoneGap API, PhoneGap Build API and Plugin web page.

I'm using PhoneGap 5.3.9 on a Mac. I test my app using the Android PhoneGap app or using PhoneGap Build (cli-5.2.0).

Answer 1

I recently started using Cordova (the open source version of phonegap) and I too struggled. However, there's a few things I learned that I think may help make things more clear for you.

Phonegap is meant to make your code on multiple platforms (iOS, android, etc). All the files you see in the 'platforms' directory are meant for specific platforms. You should only edit these files if you want to make changes for a specific platform that won't affect the other platforms. Each platform has its own config.xml file that it uses in addition to the config file found in your project root folder. Assuming that you're not trying to make your splash screen specifically for Android but want it to look the same across every platform, you should only edit the config.xml found in your project root folder.

I would try using only the 1st and 3rd blocks of code you posted. The 2nd one is for Android specific customization. And I'm not sure about the 4th one.

As for it not working, I recommend you use a debugger to pinpoint what is not working. For debugging android, I used Chrome Remote Debugging: https://developer.chrome.com/devtools/docs/remote-debugging

From there, you can look at the console logs and it will probably tell you something about your plugin not being loaded. And if not, it has a few tools you can use to pinpoint why your plugin isn't working (breakpoints, log statements).

Hope this helps! If not, you can ask me and might be able to offer further advice.

Answer 2

One very important point when using cordova is, to decide to use cordova or a variant of it, like phonegap, ionic, …

If you made this decision, then follow only the appropriate documentation, don't mix it with other documentation and use just the newest docs. Cordova is very heavily developed and there are a lot of changes. That means, that every varaint of cordova is based on an older version of cordova.

Another important point is, that the variants use an other syntax, phonegap settings for example are starting with

You should make the settings of your project in the config.xml in the root of your project. On every build of your project, cordova will use this settings.

In this config.xml you can have global settings and platform settings. Platform settings are looking like this:

<platform name="android">
   // Here your settings for android
</platform>

Working settings for the icons and splashscreens you can find here:

http://cordova.apache.org/docs/en/dev/config_ref/images.html

If you want to have very sharp icons and splashscreens, then you should create the different sizes by yourself and use a vector software for that.