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
February 8th, 2011 at 2:15 pm
[...] 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 [...]
February 8th, 2011 at 2:33 pm
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!
February 13th, 2011 at 9:41 pm
[...] Assorted GARbage» Blog Archive » Adding a Splash Screen for Android using Phonegap [...]
March 3rd, 2011 at 8:41 am
now thats something really helpful! Thanks very much!
May 23rd, 2011 at 2:51 am
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
May 23rd, 2011 at 3:51 am
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!
May 27th, 2011 at 3:33 am
[...] 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/ [...]
June 14th, 2011 at 10:19 am
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 !!!
June 14th, 2011 at 12:42 pm
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.
August 11th, 2011 at 3:32 pm
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…
August 14th, 2011 at 1:03 am
thanks for your nice tips and that really works for me…. thanks again…………..
September 9th, 2011 at 3:34 pm
Now why couldn’t PhoneGap say it that way. I love how we all help each other out!
Brian
October 20th, 2011 at 1:51 am
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 {
background-image:url(‘TKSplash.png’);
background-color:#b0c4de;
}
November 28th, 2011 at 7:07 am
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.
December 20th, 2011 at 12:14 am
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
December 21st, 2011 at 8:41 am
Thanks for the tip, this is exactly what I was looking for!
December 24th, 2011 at 4:29 am
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
January 27th, 2012 at 7:57 am
@Jim: Thanks for your comment. It did help :)
February 11th, 2012 at 5:48 pm
Perfect! Now I have a splash screen!!! Thanks!
February 21st, 2012 at 6:04 am
Thanks a lot :) this helped me…
March 1st, 2012 at 3:20 am
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?
May 29th, 2012 at 12:14 am
[...] 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/ [...]