Phonegap - add a splash screen for Android app

Question

Could anybody please advise how I can add a splash screen to my HTML5 Phonegap based Android App. I just want it to display for 5 seconds on load. Also - can anybody advise what dimensions the splash screen should be.

Solution 1

In order to have a splash screen in a PhoneGap Android application you need to put your splash.png file into res/drawable-ldpi, res/drawable-mdpi, res/drawable-hdpi, res/drawable-xhdpi. Where those directories represent low, medium, high and extra large dots per inch. You'll need to resize you splash.png (the file name is important here) for each directory or Android will stretch it for you.

The sizes of each image should be:

• xlarge (xhdpi): at least 960 x 720
• large (hdpi): at least 640 x 480
• medium (mdpi): at least 470 x 320
• small (ldpi): at least 426 x 320

Then in your main Java class, the one that extends DroidGap, you'll need to add one line and modify another. First add:

super.setIntegerProperty("splashscreen", R.drawable.splash);

this line should show up under super.onCreate but before super.loadUrl. Then you'll need to modify your loadUrl method to pause for 5 seconds before loading up the main page. It would look like this:

super.loadUrl("file:///android_asset/www/index.html", 5000);

That should do it for you.

I've recently made some updates to how the SplashScreen works on PhoneGap Android. The main app now loads while the splash screen is being shown. This is a big improvement over the previous blocking splash screen call. Read more about the changes on my blog.

Solution 2

Phonegap (Apache Cordova) documentation has enough details about the splash screen and different resolutions for both Android and iOS at one place.

http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html

Solution 3

I have also face this issue in Phonegap Android, but now I got solution.

super.setIntegerProperty("splashscreen", R.drawable.splash);(find image under drawable folder named splash,so put splash.png under drawable folder)
super.loadUrl("file:///android_asset/www/index.html",15000);(splash screen will show 15 sec.

Please edit your main Java file under src folder in your project directory:

public class radiobiafra extends DroidGap
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
         super.onCreate(savedInstanceState);
     
         super.setIntegerProperty("splashscreen", R.drawable.splash);
         super.loadUrl("file:///android_asset/www/index.html",15000);
     }
}

Solution 4

In my Phonegap app, Android version, Eclipse debugger throws tantrums if you set the splash screen or even the 'loading' dialog before calling loadUrl.

Both will work in the actual app installed on a device, but they will break your debugging. So I've put them behind loadUrl, where they can do no harm and still show well before the app itself.

public class App extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/index.html",5000);
    super.setStringProperty("loadingDialog", "Starting your app...");
    super.setIntegerProperty("splashscreen", R.drawable.splash);
    ...
}...

View more solutions

Comments

[Kurtis Nusbaum]

Just a friendly piece of advice, under no circumstances is it a good idea to put a splash screen on a mobile app. It's going to make your users super angry.

[Devgeeks]

I am sorry Kurtis, I am not sure what you are advocating. There are many very popular mobile apps that show a splash screen while they are loading without causing annoyance to their users. iOS even has an image caused Default.png specifically for this purpose.

[Kinjal Dixit]

@Devgeeks I agree with Kurtis Nusbaum for the case where you are showing a splash screen for the heck of it. If your application takes a long time to start up, a splash screen with an activity indicator probably better than nothing, which would be the likely reason for the popular applications you are talking about. Otherwise there are equal (or even greater) number of popular mobile apps that don't show splash screen. Basically get the user to the application as fast as you can. A 5 second splash screen every time is a bad idea as it will frustrate users in the long term.

[Štěpán Víteček]

Please... don't do it! Splashscreen isn't a good idea :) It's right, that some popular apps has it, but it doesn't mean, that is a good idea ;)

[numediaweb]

I think splash screens are a matter of taste/design. Of course most UX people will advice not using it but I disagree with them; a 1sec splash screen will not do any harm, instead, it will add a "personality" and sets a "theme" to your app making stand out of the thousands "bootstrapish" apps. In my device, more than 70% daily used apps have splash screens :)

[efkan]

I had answered another same issue. You might check the following answer out: stackoverflow.com/questions/13487124/…

[Dancer]

Hi SImon i Just get an error stating ' the application has stopped unexpectedly when implementing the above?

[Paul Beusterien]

There seems to be an issue using the timeout parameter in PhoneGap 1.2. See also stackoverflow.com/questions/8100219/…

[Dancer]

If I remove the 5 second timeout the app compiles and displays briefly on load - so it looks like a combination of above with a timeout fix would work a treat.. cheers for your help

[Simon MacDonald]

Yup, apparently there is a bug in 1.2 as Paul B mentioned. Bryce has already checked in a fix for it though.

[Wytze]

Just in case anyone is wondering, do NOT use a 9-patch image for your splash screen if you are developing with Phonegap. They do not support this, though they may in the future. community.phonegap.com/nitobi/topics/…

[Waynn Lue]

Has the timeout parameter been fixed? I'm running PhoneGap 1.5 and I'm still seeing a crash as soon as I open my app (both in ICS and 2.2 Simulator).

[Simon MacDonald]

Yes, it has been fixed. Can you send a repo scenario?

[Simon MacDonald]

Just an update. The 9 patch image bug has been fixed for the upcoming 1.6.0 release.

[Louis Sayers]

Simon - you guys really need to stick this information in the phonegap documentation. We shouldn't have to search everywhere to find it!!! if it is in the documentation I couldn't find it, not even with a search of site:docs.phonegap.com splashscreen

[Simon MacDonald]

Good idea, I will create and issue for myself to fix.

[grahamparks]

Requiring the user wait for 5 seconds is terrible advice.

[Simon MacDonald]

@grahamparks It's not a requirement at all. You don't need to use a splashscreen if you don't want to. Also, you can specify whatever timeout you want. In the latest PG you can dismiss the dialog once your page is loaded so you don't even see the page being rendered. It is all ready once you hide the splash screen.

[BallisticPugh]

My HTC Desire has a screen resolution of 800 x 480 and is classified as hdpi. Meaning it doesn't meet the aspect ratio of any of the image sizes recommended in this answer. This results in the splash screen being stretched horizontally and looking a bit naff. I am using Cordova 2.0. How can this be avoided?

[Simon MacDonald]

@BallisticPugh You want to use a 9-patch image so you can control what is stretched.

[Nirav Ranpara]

@SimonMacDonald : Please help me. I have one list view work on emulator but not work in device. please help me. can you give me email address

[Toni Michel Caubet]

how can you show it untill the app is ready? this code gives me the splash screen for 5 seconds, then a black screen and then will open index.html, si there a way to use any callback?

[Qadir Hussain]

@Simon MacDonald can we animate the splash screen?

[Ian Jamieson]

Make sure your files are named splash.png for Android. Also, for my project (PhoneGap 3.3.0) I had to create directories with the orientation preceeding the screen density. For example, drawable-land-ldpi, drawable-port-lpdi and so on for each dpi.

[Ian Jamieson]

This can normally be found: platforms/android/src/com/[your app name]/[Your App Name.java

[Prak]

I did not find any .java file in aforementioned path