Quote from luishp on July 24, 2019, 7:09 am

Hi @asmat, I think this should work:

1. Unzip your Mobile Application compiled file.
2. Edit config.xml file in Notepad or any other plain text editor.
3. Add this line and save:

<splash src="splash.png" />

Add the splash.png image to the root folder (same one where the config.xml is located)
Compress all the files again.
More information can be found here.

Let me know if it works.

Quote from asmat on July 24, 2019, 10:39 am

I have tried like this but it does not work,

1-I  have put the splash.png in the root folder(besides these files and folders):

css

fonts

js

config.xml

index.html

splash.png

2- I have changed the code of XML file like this:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="qatea.com.asmat"
>
<name>
teztz
</name>
<description>
new
</description>
<splash src="splash.png" />
<content src="index.html"/>
<access origin="*"/>
<gap:platform name="android"/>
<preference name="orientation" value="default" />
<preference name="android-MediaPlaybackRequiresUserAction" value="false" />
<preference name="android-AllowInlineMediaPlayback" value="true" />
<feature name="http://api.phonegap.com/1.0/device" />
<feature name="http://api.phonegap.com/1.0/media" />
<gap:plugin name="cordova-plugin-device" source="npm" />
<gap:plugin name="cordova-plugin-media" source="npm" />
<gap:plugin name="cordova-plugin-device-orientation" source="npm" />
<gap:plugin name="cordova-plugin-whitelist" source="npm" />
</widget>

 

Quote from luishp on July 24, 2019, 11:07 am

@asmat, I have found some additional information here:
https://www.joshmorony.com/dealing-with-splash-screens-in-a-phonegap-build-application/

It seems it is also necessary to include a PhoneGap plugin by adding this line of code:

<gap:plugin name = "org.apache.cordova.splashscreen" />

I think this should be enough.
Let me know please.

 

Quote from asmat on July 24, 2019, 11:38 am

I have added the above code also but still, it does not work.

when I  upload the zip file at phonegape, It gives an error message "plugin unsupported: org.apache.cordova.splashscreen"

Quote from luishp on July 24, 2019, 12:13 pm

I'm sorry @asmat, we should experiment a bit before success.

Please try in this other format:

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

 

 

Quote from asmat on July 24, 2019, 1:38 pm

Now just the white color changed to the black color and  The splash.png has not loaded.

Quote from luishp on July 24, 2019, 3:22 pm

I will try to find time to do some research and experiments.
Will update this thread as soon as I have new information.

Quote from shahram on November 4, 2020, 10:11 am

Hello

I'll tell you how to add a splash screen in your application. Unfortunately it seems the PhoneGap doe's not support splash screen!  I tried to change confix.xml many times in many ways, but I could not reach any result. Maybe it's a long way, probably with some errors and troubles. but it's hard just for first time, after that you can compile your application with any Cordova plugins without any limits.

So if you need it, just do these steps:

1: Add your splash screen file (with name splash.png and with your application screen size ***) in your project. also set an icon for your app.

2:  Add below codes to "App Events" > Start-Up event

BeginJS
navigator.splashscreen.show();
window.setTimeout(function () {
navigator.splashscreen.hide();
}, splashDuration - fadeDuration);
EndJS

2: Compile your project to mobile application. In conclusion, you'll have a zip file in your project's directory.

3: Go to the projects directory and extract the zip file. make a new folder with name www, then move all your project resources (zip file contents) to www folder, except for confix.xml file. (includes index.html file and css, fonts, js, img etc. folders)

4: Open config.xml and add these lines between <widget> and </widget> tags.

<platform name="android">
<gap:plugin name="cordova-plugin-splashscreen" source="npm" />
</platform>

<platform name="android">
<splash src="www/img/splash.png" />
</platform>

<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashScreenDelay" value="3000" />    ///in millisecond
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="750"/>   ///in millisecond
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="SplashScreenSpinnerColor" value="#FFFFFF" />

* You can make the settings you want. Just change the above values.

5: Also, you have to edit icon path:

<icon src="www/img/icon.png" />

6: After saving config.xml, you have to download and install node.js, JDK 8, Gradle V6.6.1 (Depends on android SDK) and android SDK that you need. (ask your questions about it, if you have any problems.)

7: Finally all you need to do is copy compile.bat file beside config.xml and run it. (attached file ) You can see the result by install test application. (attached file)

 

Note:

• Compile.bat gives you an unsigned apk file. So if you need to export a signed apk, you have to do more steps. (I will try to teach, how to use Cordova to make an android application.)

 

• ***  To effectively create your Android SplashScreen assets, it is important to understand the idiom and sizes used for the assets.Android defined its assets by the image's layout and `density`.#### Image Layout- `land` short for landscape mode
  - `port` short for portrait mode#### `density`

  The image's density refers to the number of pixels per square inch. Android, interchangeably refers to this as DPI.

  Not all devices have the same pixel size so it is important to create images for all DPI to ensure that the quality of the image for each device is great.

  If not all DPI images are considered, some devices might not show a SplashScreen or will use an incorrect DPI image that can result in a blurry scaled image.

  #### Image Sizing Table

  | size | portrait | landscape |
  | :-----: | :-------: | :-------: |
  | ldpi | 200x320 | 320x200 |
  | mdpi | 320x480 | 480x320 |
  | hdpi | 480x800 | 800x480 |
  | xhdpi | 720x1280 | 1280x720 |
  | xxhdpi | 960x1600 | 1600x960 |
  | xxxhdpi | 1280x1920 | 1920x1280 |

  #### Example Android Configuration

  ```xml
  <platform name="android">
  <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-land-xxhdpi.png" density="land-xxhdpi" />
  <splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-xxxhdpi" />

  <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" />
  <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi" />
  <splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-xxxhdpi" />
  </platform>

Notice to the explanations mentioned above. Not required, but Important.

Good luck :)