Search code examples
cordova-pluginsphonegap-pluginsphonegap

phone gap splashscreen plugin is not displaying image

I'm using cordova splash-screen plugin and for some reason the image is not displaying it shows a splash-screen for the seconds specified in the code but the exact image is not displayed

here is a screen-shot: here is a screen-shot

I've tried to add the images to multiple sources ( once in the main folder, once in the www folder, tried adding all the images to drawable folders if thats a known thing, also have tried https://pgicons.abiro.com/ and its xml file same problem)

here my xml code

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
  <platform name="android">
    <!-- you can use any density that exists in the Android project 
<splash src="splash.png" />

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

         <platform name="ios">

      <splash platform="ios" src="www/res/screen/ios/320x480.png" width="320" height="480"/>
    <splash platform="ios" src="www/res/screen/ios/640x960.png" width="640" height="960"/>
    <splash platform="ios" src="www/res/screen/ios/768x1024.png" width="768" height="1024"/>
    <splash platform="ios" src="www/res/screen/ios/1536x2048.png" width="1536" height="2048"/>
    <splash platform="ios" src="www/res/screen/ios/640x1136.png" width="640" height="1136"/>
    <splash platform="ios" src="www/res/screen/ios/750x1334.png" width="750" height="1334"/>
    <splash platform="ios" src="www/res/screen/ios/2208x1242.png" width="2208" height="1242"/>
    <splash platform="ios" src="www/res/screen/ios/1242x2208.png" width="1242" height="2208"/>
    </platform>


        <platform name="browser">
    <preference name="SplashScreen" value="screen.png" /> <!-- defaults to "/img/logo.png" -->
    <preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
    <preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
</platform>


</platform>  

    <preference name="SplashScreen" value="screen"/>
    <preference name="SplashScreenDelay" value="5000" />
    <name>Project</name>
    <description>
        A blank PhoneGap app.
    </description>
    <author email="[email protected]" href="http://phonegap.com">
        PhoneGap Team
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

here is the xml code generated by https://pgicons.abiro.com/

<?xml version='1.0' encoding='utf-8'?>
<widget xmlns="http://www.w3.org/ns/widgets">
    <splash src="splash.png" />
    <platform name="ios">
        <icon height="1024" src="res/icon/ios/icon-1024.png" width="1024" />
        <icon height="29" src="res/icon/ios/icon-small.png" width="29" />
        <icon height="58" src="res/icon/ios/[email protected]" width="58" />
        <icon height="87" src="res/icon/ios/[email protected]" width="87" />
        <icon height="40" src="res/icon/ios/icon-small-40.png" width="40" />
        <icon height="80" src="res/icon/ios/[email protected]" width="80" />
        <icon height="120" src="res/icon/ios/[email protected]" width="120" />
        <icon height="50" src="res/icon/ios/icon-small-50.png" width="50" />
        <icon height="100" src="res/icon/ios/[email protected]" width="100" />
        <icon height="57" src="res/icon/ios/icon.png" width="57" />
        <icon height="114" src="res/icon/ios/[email protected]" width="114" />
        <icon height="60" src="res/icon/ios/icon-60.png" width="60" />
        <icon height="120" src="res/icon/ios/[email protected]" width="120" />
        <icon height="180" src="res/icon/ios/[email protected]" width="180" />
        <icon height="72" src="res/icon/ios/icon-72.png" width="72" />
        <icon height="144" src="res/icon/ios/[email protected]" width="144" />
        <icon height="76" src="res/icon/ios/icon-76.png" width="76" />
        <icon height="152" src="res/icon/ios/[email protected]" width="152" />
        <icon height="167" src="res/icon/ios/icon-167.png" width="167" />
        <icon height="167" src="res/icon/ios/[email protected]" width="167" />
        <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
        <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
        <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
        <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
        <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
        <splash src="res/screen/ios/Default@2x~ipad~comany.png" />
    </platform>
    <platform name="android">
        <preference name="SplashMaintainAspectRatio" value="true" />
        <preference name="SplashShowOnlyFirstTime" value="true" />
        <icon density="ldpi" src="res/icon/android/ldpi.png" />
        <icon density="mdpi" src="res/icon/android/mdpi.png" />
        <icon density="hdpi" src="res/icon/android/hdpi.png" />
        <icon density="xhdpi" src="res/icon/android/xhdpi.png" />
        <icon density="xxhdpi" src="res/icon/android/xxhdpi.png" />
        <icon density="xxxhdpi" src="res/icon/android/xxxhdpi.png" />
        <splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />
        <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
        <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
        <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
        <splash density="port-xxhdpi" src="res/screen/android/splash-port-xxhdpi.png" />
        <splash density="port-xxxhdpi" src="res/screen/android/splash-port-xxxhdpi.png" />
        <splash density="port-ldpi" src="www/res/drawable-port-ldpi/splash-port-ldpi.png" />
        <splash density="port-mdpi" src="www/res/drawable-port-mdpi/splash-port-mdpi.png" />
        <splash density="port-hdpi" src="www/res/drawable-port-hdpi/splash-port-hdpi.png" />
        <splash density="port-xhdpi" src="www/res/drawable-port-xhdpi/splash-port-xhdpi.png" />
        <splash density="port-xxhdpi" src="www/res/drawable-port-xxhdpi/splash-port-xxhdpi.png" />
        <splash density="port-xxxhdpi" src="www/res/drawable-port-xxxhdpi/splash-port-xxxhdpi.png" />
    </platform>
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="5000" />
    <name>Splash screen Project</name>
    <description>
        A PhoneGap app to test splash screen.
    </description>
    <author>
        Sara
    </author>
</widget>

here is a screen shot at both project folders and images sources

my configuration: my configuration

pgicons configuration: pgicons configuration

here is indx.html code for both projects 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>current location</title>

        <script type="text/javascript" charset="utf-8">
        </script>
    </head>

            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
         <body>
    <h1>hello</h1>
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    </body>


</html>

I've added the platforms using terminal (cordova platform add android) I've tried deleting the platforms and add them again the plugin was added using the terminal too, tried to remove it and added it again didn't work I check using phonegap local host / bluestacks android emulator / i've also tried to use adobe phonegap build and test the app using bluestacks. the icon works fine its only the splash screen

if you need me to add any details please don't hesitate to ask I'm stuck in here for a week now and I was assigned to finish it in two days :(

Solution

  • I have solved this issue, after updating the splash plugin line

    from 

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

    to 

       <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    • after adding the spec it worked