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

ionic-v1
1

I’ve tried to follow DevGirl’s tutorial (http://devgirl.org/2014/09/29/new-icons-and-splash-screen-help-for-cordovaphonegap/) and the Cordova documentation but my splashscreen is not showing on Android builds.

These are the steps I have taken:

1. Included this in my config.xml:

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

  <platform name="android">
    <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>

2. Added a new folder in the root of my project (not in /www): /res/screen/android and copied the files mentioned in the previous step there.

3. Built my app. No splash screen shows up on Android.

What am I doing wrong?

2

Look into /platform/android/res and put your splash files into appropriate folders.

3

Hey @rafaellop, I was under the impression from the Cordova 3.6 documentation (http://cordova.apache.org/docs/en/edge/config_ref_images.md.html) and DevGirl’s blogpost that if you define the splash screens within the config.xml file, Cordova would copy them to the correct platform/android/res folder.

Are you saying that’s not the case?

As what filename should I copy the files to the platform/android/res folder? As screen.png?

4

Add your splash screen in respective drawable folder to match for all density devices.
and dont mention the value screen.png in preference.mention as like .(make sure your value is the file name of your splash image)

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

@Thamil so you’re also saying do not use <platform name="android"><splash src="res/screen..." /> tags, but just copy them to the drawable folders in /platform/android/res?

6

Yes.exactly.But dont mention the value in file extension like scree.png mention only screen.

7

@Thamil Aaah. Ok. Will try that now.

8

Yup, that works! Thanks!

9

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
10

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
11

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.

12

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
13

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

14

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
15

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
16

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.

17

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
18

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.

19

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
20

@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