Apache Cordova splash screens not showing in Andro

Question

I am running Apache Cordova 3.6.3-0.2.13. And I try to get the splash screens working. I have followed the documentation on http://cordova.apache.org/docs/en/3.6.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens. And the icons are working, but no success for the splash screens. We are also using the Ionic framework (version 1.2.8) on top of Cordova.

What I have done:

Added icons and splash screens to config.xml from the project root:

<preference name="SplashScreen" value="splash"/>
<preference name="SplashScreenDelay" value="10000"/>
<platform name="android">
  <icon src="icons/icon.png"/>

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

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

Ofcourse the icons directory exists and also the files are in place. When I build the project with ionic run android or cordova run android. The build process also creates the icons and splash screens into the platforms/android/res/drawable directory!

Also the config file located at platforms/android/res/xml/config.xml is correctly updated and the <preference> and <icon> and <splash> elements are in place.

I also tried with the org.apache.cordova.splashscreen plugin and also no success. I have added the plugin with ionic plugin add org.apache.cordova.splashscreen and also added onDeviceReady the code navigator.splashscreen.show();. But this also shows nothing.

What am I missing here?

Answer 1

Splashscreen integration:

Android

1. Add the Splashscreen images to folders like below:

   root/res/drawable-land-hdpi/screen.png
   root/res/drawable-land-ldpi/screen.png
   root/res/drawable-land-mdpi/screen.png
   root/res/drawable-land-xdpi/screen.png
   
   root/res/drawable-port-hdpi/screen.png
   root/res/drawable-port-ldpi/screen.png
   root/res/drawable-port-mdpi/screen.png
   root/res/drawable-port-xdpi/screen.png
   

2. Add splash Screen plugin to android project. (git : git://git.apache.org/cordova-plugin-splashscreen.git)

   src/org/apache/cordova/splashscreen/SplashScreen.java
   

3. Add plugin javascript file in assets/www/js/lib/android/plugins/cordova-plugin-splashscreen/www/ (git : https://github.com/apache/cordova-plugin-splashscreen/blob/master/www/splashscreen.js)

4. Add plugin entery in cordova_plugins.js

   {
       "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
       "id": "cordova-plugin-splashscreen.SplashScreen",
       "clobbers": [
           "navigator.splashscreen"
       ]
   },
   
   
   "cordova-plugin-splashscreen": "3.1.0",..   
   

5. Add following code in config.xml

   <preference name="SplashScreen"         value="screen"/>
   <preference name="SplashScreenDelay"    value="5000" />
   <feature name="SplashScreen">
       <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
       <param name="onload" value="true" />
   </feature>
   

6. now build the android project.

Answer 2

I had a similar issue on android, I put the Splash Screen Directly into res/drawable-hdpi and got the following error during cordova build.

res/drawable-hdpi-v4/DocBackground.png: Invalid file name: must contain only [a-z0-9_.]

When I de-capitalised the file name, in ~project/icons, cordova build copied them to the res/drawable folder & splash screen worked.

Answer 3

For new comers and those who are still facing this issue

1) Add Splash screen preference in config.xml

<preference
    name="SplashScreen"
    value="screen" />
<preference
    name="AutoHideSplashScreen"
    value="true" />
<preference
    name="SplashScreenDelay"
    value="5000" />

<feature name="SplashScreen" >
    <param
        name="android-package"
        value="org.apache.cordova.splashscreen.SplashScreen" />

    <param
        name="onload"
        value="true" />
</feature>

2) Declare your splash screens in config.xml

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

3) Finally Add this class into your android project structure under org.apache.cordova.splashscreen package

or

install it as Cordova plugin.