Need help with displaying splash screen on Android (Cordova 3.6)

@Thamil Aaah. Ok. Will try that now.

Yup, that works! Thanks!

That’s not the way it’s supposed to work in 3.6. You’re supposed to be able to configure the splash screen through config.xml as described in the online docs, and in fact, I can build my Ionic project and see the splash screens being copied to res/drawable-XXXX/screen.png, they’re just not used. I can configure iOS splash screens through config.xml and they work fine; the problem is specific to Android. I’m going to see if I can figure out what’s going on, and if I can’t, I’ll ask over on the Phonegap/Cordova mailing list.

1 Like

I got Android splash screen working in config.xml by doing 2 things:

  1. Put the following preference elements in config.xml:
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="1000" />

In the <platform name="android">, put the <splash> elements in, but DO NOT include the file extension:

<splash src="res/screen/android/640x960" density="mdpi"/>
<splash src="res/screen/android/768x1024" density="hdpi"/>
<splash src="res/screen/android/1536x2048" density="xhdpi"/>

This combination of settings made splash screen work for me on Android. I’m not sure why Cordova docs are not correct.

Hope that helps.

1 Like

I’ll certainly try that myself. I have signed an Apache Foundation CLA and have volunteered to update the docs, and this should probably be my first edit. :slight_smile: But this is something that needs to be consistent across platforms. Also, I have 9-patch images. The files are named blahblahblah.9.png, not blahblahblah.png. I am wondering if this will be a problem.

I solved installing cordova splashscreen and adding the following code to my app.

<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  navigator.splashscreen.show();
}
</script>
1 Like

Removing the extensions didn’t work for me. 9-patch images need to have the extension .9.png and my source files, which I refer to in my config.xml, do have that extension but they get copied into the Android platform directories as “screen.png” which will not work. When I have some time, I’m going to try using regular PNGs instead and see what happens

MMmmmmkay. You know what, I can configure Android splash screens in config.xml if they aren’t 9-patch images. The build script creates files called screen.png - and I’d forgotten that when I was manually placing the splashscreen images into the Android drawable directories, I used splash.png as the filename and had this entry in config.xml:

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

When I changed the entry to

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

I was fine. But there are two problems with this:

  1. Whether or not the files are 9-patch files, they get copied into the drawable directories with a .png extension, and to be recognized as 9-patch files, the extension must be .9.png.
  2. If the value of the SplashScreen preference is, say, “Splash”, when the Android build scripts copy the files into the drawable directories, they should be named splash.png.

So - The extension is being ignored, and if you don’t use “screen” as your filename, the filename is being ignored too. I would like to open a bug on the Cordova project’s JIRA, and create a patch that will make the build scripts behave the way they should. I’m having a little trouble finding the appropriate script, so I’ll probably have to reach out to the Cordova mailing list to get some help.

1 Like

I’m seeing this exact same problem with 9-patch images in the splashscreens as you are, sjsobol. Any indication of this getting fixed?

1 Like

Yes, I’m working on it, need to see if a bug has been opened, and open it if not; but I am buried right now, so for now, I recommend generating those images and placing them directly into the appropriate directories under projectname/platforms/android.

Here is what worked for me. Of course you can choose any image you want for each line, and it works fine (for Android at least, didn’t try ios)

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

<platform name="ios">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="www/img/splash/splash.png" width="320" height="480"/>
    <splash src="www/img/splash/splash.png" width="640" height="960"/>
    <splash src="www/img/splash/splash.png" width="768" height="1024"/>
    <splash src="www/img/splash/splash.png" width="1536" height="2048"/>
    <splash src="www/img/splash/splash.png" width="1024" height="768"/>
    <splash src="www/img/splash/splash.png" width="2048" height="1536"/>
    <splash src="www/img/splash/splash.png" width="640" height="1136"/>
    <splash src="www/img/splash/splash.png" width="750" height="1334"/>
    <splash src="www/img/splash/splash.png" width="1242" height="2208"/>
    <splash src="www/img/splash/splash.png" width="2208" height="1242"/>
</platform>

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

Good luck !

2 Likes

I got mine working using 9.png files. Use fill file names like JerryBels did.

It took a while to figure out how the build works and where the files go. Had a few errors on the way too.

The biggest pain point was that the splash screen doesn’t work when you use the phonegap app with the desktop dev tool “phonegap serve”.

I had to build and install the apk on my device to get it to work.

Unfortunately, I’ve had absolutely no time to work on this, as I have to get my bills paid first :frowning: It is still on my radar

1 Like

@sjsobol you mentioned that your .9.png files get renamed during the build. I suspect that this is how you have your build hook configured, as I don’t think it’s part of the cordova build itself. Just a suggestion.

I compiled the advice in this thread, and numerous others, and created a blog post detailing how I got my 9-patch splash screen working on android:

Hope it helps someone, let me know if I’ve left out any important details.

1 Like

I will definitely check that out. I don’t do anything special with my build hooks, in fact I don’t use them at all… The fact is that the Splashscreen plugin does need to be updated to work the same on Android as it does on iOS, but your blog post may still be very helpful until I can find the time to update the plugin. (Which might not be for a while)

Thanks

This worked for me.

  1. Add the cordova splash screen plugin using command line cordova plugin add org.apache.cordova.splashscreen

  2. Put the splash screen image in the platforms/android/res/drawable folders

  3. Put the following in the config.xml file

    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="10000" />
    
    <platform name="android">
    <splash src="platforms/android/res/drawable/screen.png" density="hdpi"/>
    

Hey your preview not showing what i entered.

1 Like

This is what works.
``

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<platform name="android">
    <splash src="res/res-land-hdpi/screen.png" density="land-hdpi"/>
    <splash src="res/res-land-ldpi/screen.png" density="land-ldpi"/>
    <splash src="res/res-land-mdpi/screen.png" density="land-mdpi"/>
    <splash src="res/res-land-xhdpi/screen.png" density="land-xhdpi"/>
    <splash src="res/res-port-hdpi/screen.png" density="port-hdpi"/>
    <splash src="res/res-port-ldpi/screen.png" density="port-ldpi"/>
    <splash src="res/res-port-mdpi/screen.png" density="port-mdpi"/>
    <splash src="res/res-port-xhdpi/screen.png" density="port-xhdpi"/>
</platform>

``

So this also works with .9.png files? I had no problems with regular PNGs, but images that aren’t 9-patch run the risk of being displayed improperly (and in a very ugly way).

IMHO this is not how it was intended. Seems like you’re defining the src which is also the destination.

I currently using cordova 5 version. It works all the different versions of android devices

cordova plugin add cordova-plugin-splashscreen

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