Feb '11

Adding a Splash Screen for Android using Phonegap

In addition to using CSS3 Media Queries for mobile-optimized sites, I’ve recently begun a lot of experimentation with creating native mobile apps with HTML5/CSS3/JS. After looking at both Titanium and Phonegap, I chose to dive deeper into Phonegap. Both products are great, but their approaches (and capabilities) are very different. For me, the decision to use Phonegap was simply that I like the idea of actually “seeing” what I’m building, versus everything being generated by Javascript. For whatever reason, I just feel more comfortable like that. I will definitely experiment with Appcelerator at some point in the future, especially if I’m looking for deep reaching native access that Phonegap can’t currently achieve.

As for UI, I’m a big jQuery fan, so the choice of using jQuery Mobile is a natural — and it’s even more attractive because Adobe is one of the sponsors of the project.

I’ve got several ideas for additional blog posts surrounding my early learnings in this space (Android development, in particular) – especially due to the fact that the Phonegap and jQuery Mobile documentation is not very detailed, but I thought I’d start with one that had me completely perplexed — an application splash screen. The need for a splash screen started almost immediately. Even with the simplest of “Hello World” applications, once I got it onto my Android phone, I would notice a blank white screen for several seconds before the main “page” showed up. I tried modifying the HTML, CSS and JS of my pages – all to no avail.

It turns out, the white screen is the embedded browser starting up, and until it is loaded, nothing is going to be shown onscreen. Enter the need for a splash screen. After spending the better half of a day wandering the rabbit holes of the intertubes, it seemed that the solution was easy on iOS. Just add a Default.png file to the resource structure of your app and you are done. On Android… not so much. And yes, I did attempt that “simple solution” however, when attempting to compile the app, it would error out with “res/drawable-hdpi/Default.png:0: error: invalid symbol: ‘Default’“.

Back to Google, I finally discovered that splash screen support on Android was added in version 0.9.3. A single thread in a forum, seemed to solve the issue, but there was lots of confusion (as I would find) surrounding the implementation of the solution. The thread indicated that a line super.setIntegerProperty( “splashscreen”, R.drawable.splash ); needed to be added to DefaultActivity.java file in the onCreate method. A second argument to the loadURL method defines the length of time the splash screen should be displayed. The value is given in milliseconds: super.loadUrl(“file:///android/www/index.html”, 1000);

After upgrading to 0.9.3 the error changed to “res/drawable-hdpi/Default.png: Invalid file name: must contain only [a-z0-9_.]“, which really puzzled me until I realized that the file name started with a capital letter. Changing it to a lowercase “d”, brought the original error back. After some head scratching, I decided to change the file name to “splash” to match the line “R.drawable.splash” that I had added to the java file — and surprise, it worked!

The moral of the story?

  • Make sure you’re testing using version 0.9.3 or later
  • Add
    super.setIntegerProperty("splashscreen", R.drawable.splash);

    to DefaultActivity.java file in the onCreate method before the loadURL method

  • Add a second argument to the loadURL method for the timing
  • Be sure to use splash as your file name – which can be either a JPG or PNG file


22 Responses to “Adding a Splash Screen for Android using Phonegap”

  1. Tweets that mention Assorted GARbage» Blog Archive » Adding a Splash Screen for Android using Phonegap -- Topsy.com Says:

    [...] This post was mentioned on Twitter by PhoneGap and Greg R, robhuddles. robhuddles said: RT @garazi: Building apps for Android? Just blogged how to add a splash (startup) screen in Phonegap: http://bit.ly/hoUfdn #fb [...]

  2. bhofmann Says:

    Awesome! That blank white screen seems to take forever to load and is a major issue for me. This is exactly what I’ve been looking for – thank you!

  3. Master List of HTML(5)/JS/CSS Resources | Emerging Tech Talk Says:

    [...] Assorted GARbage» Blog Archive » Adding a Splash Screen for Android using Phonegap [...]

  4. ferdinand Says:

    now thats something really helpful! Thanks very much!

  5. OrhanCan Says:

    Hello again Sir,
    You announced IstanbulMay 27, 2011 conference for CS5. When I call istanbul office today , LONDON bureau picked up the phone? Where can i get info about the conference? You always leave us orphan here, i hardly and at last moment learned in 2009 Mr Prokopi’s workshop about Flex… You are global company, and I remember at NY 2003 MX introduction meetings at LOEWE THEATRE at Union Square Manhattan, which was very active and full of knowledge…
    As an Adobe fanatic , im very broken, dissapointed here

  6. Greg Says:

    My apologies — here’s the link for the CS5.5 event in Istanbul: http://www.cf-istanbul.com/

    We look forward to seeing you there!

  7. PhoneGap???????????????????? | Kwappa????? Says:

    [...] Assorted GARbage» Blog Archive » Adding a Splash Screen for Android using Phonegap http://blog.assortedgarbage.com/2011/02/adding-a-splash-screen-for-android-using-phonegap/ [...]

  8. Abhishek Kanitkar Says:

    I am very thankful to Greg for this solution. If that white patch remains then no one wants to buy your app. But with this solution we are free from it. Cheers to Greg !!!

  9. Jeremy Says:

    That got the splash screen loading great, but my app doesn’t seem to be loading behind the splash screen. I get the same amount of time staring at a white screen before the loading starts. Any ideas? I’m using sencha touch.

  10. Sephir Says:

    the white screen between splash screen and the start of sencha touch is the background color of the index.html, which is white… use css, apply a background image to html and body element, you’ll see disappear the white background…

  11. masud Says:

    thanks for your nice tips and that really works for me…. thanks again…………..

  12. EvoD Says:

    Now why couldn’t PhoneGap say it that way. I love how we all help each other out!


  13. barneymc Says:

    Sephir, great suggestion for the Sencha Touch+splash screen. I’ve been looking for a solution for Android web apps using Sencha for quiet a while.

    body {

  14. Nilanka Says:

    You can use Dreamweaver CS5.5 with PhoneGap to do this by simply setting up the splash screen on: Site> Mobile Application > Application Setting. No coding required. You will only have to create a nice looking splash screen design in PNG format.

  15. Gaurav Says:

    This Splash Screen code is not well for Android galaxy Tab.if you have any idea about solution of this problem . then tell me my mail id gaurav.dixit@daffodilsw.com

  16. pdominique Says:

    Thanks for the tip, this is exactly what I was looking for!

  17. Jim Says:

    What you call DefaultActivity.java whatever you called your “Create Activity” when you created your project in Eclipse.

    The PhoneGap docs show it as App.java as seen here: http://phonegap.com/start#android

    Because someone will spend over an hour like I did trying to find the fsking DefaultActivity.java

  18. Daniel Says:

    @Jim: Thanks for your comment. It did help :)

  19. tvance Says:

    Perfect! Now I have a splash screen!!! Thanks!

  20. Sujesh Says:

    Thanks a lot :) this helped me…

  21. tim Says:

    thanks for this post,

    but i have a problem with android splash screen..

    it shows 1-2 sec a blank screen after splash.

    what can i do?

  22. Native loading screen in phonegap and sencha touch application | PHP Developer Resource Says:

    [...] Android Code needed, was mentioned on StackOverflow, see http://easyjquery.com/a/8157103/734687 or http://blog.assortedgarbage.com/2011/02/adding-a-splash-screen-for-android-using-phonegap/ [...]

Leave a Reply