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
6 Comments »