PhoneGap Tutorial for Android Development
PhoneGap + Apple Dashcode = Rapid Android App Development
by Dave Prochnow (daveprochnow.com)
is walking on water but, DROID
has arrived. The Apple iTunes App
Store has delivered in excess of 1 billion App downloads
and is grossing $200 million
monthly, but the Android Market has 12,000 applications available for download and
grosses approximately $5 million monthly
. Clearly, cross-platform development is
not in a developer's best interest. Or, is it?
If time were money, then expending effort for building distinct and
separate Apps for two divergent platforms currently poised as economic-
polar opposites would not be proﬁtable. On the other hand, if you could
craft a single App, capable of being deployed on both the iPhone and
DROID, then you might have a solid marketing foothold for evaluating the
economy of continued cross-platform development. Similarly, you will
have “hedged your bets” pending future market shifts
On ﬁrst blush, this notion sounds downright harebrained—iPhone's tightly-controlled
Xcode Objective-C integrated development environment (IDE) offers a wonderful
while the Google Java-based Android software development kit
is best accessed with third-party products (e.g., Sun Java JDK and Eclipse
which help to put a prettier face on all of the developer's heavy lifting.
Objective-C versus Java; how could any developer be expected to become ﬂuent in
two such drastically different IDE mobile development solutions?
PhoneGap is an open-source development tool for mobile cross-platform App
wrappers that can be rapidly deployed on Android, Blackberry, and iPhone platforms.
That's right; PhoneGap is a “develop once, publish anywhere” package/project that
enables you to take virtually any Webkit
-ﬂuent project, add it to the appropriate
PhoneGap code bundle, and publish it on Android, Blackberry, and iPhone…well,
Even with such a radical development tool as PhoneGap there's no such thing as a
free lunch. Publishing a PhoneGap-based App on a speciﬁc mobile target does take
some tweaking (e.g., iPhone Apps require NIBs, whereas Android Apps can rely
exclusively on your HTML layout). For the most part, though, these platform-speciﬁc
coding nuances are thoroughly detailed on the PhoneGap wiki
. Unfortunately, with
the popularity of the iPhone, the Apple portion of the wiki is ﬂourishing, while the less
popular DROID section doesn't seem to be receiving the same level of lovin'.
This tutorial is an attempt at helping the budding Android/PhoneGap development
community gain a stronger support base and bring more powerful Apps to the
What you'll need
§ Adobe Illustrator
§ Adobe ImageReady
§ Adobe Photoshop
§ Apple Dashcode
§ Bare Bones BBEdit
These are the tools that I used during the preparation of this tutorial.
§ Latest PhoneGap project
(v.0.8.0 was used in this tutorial)
§ Sun Java SE JDK 6 (Apple version was used in this tutorial)
§ Eclipse IDE (Galileo Classic version was used in this tutorial)
§ Android SDK
§ ADT Plug-in
Before you begin this tutorial, you should have read and completed
instructions in the “Getting Started with Android PhoneGap in Eclipse (Tested)
In this tutorial, we will be
developing an RSS Reader
Android App for receiving
the PhoneGap RSS feed.
Start Apple Dashcode.
Select the RSS Safari
template and develop for
Layout the RSS template
according to your design
Add a Page
your Eclipse Workspace folder. Your Dashcode products should go inside the
PhoneGap android project folder: assets
www. Make sure that your
Dashcode target folder is at least one level deep inside the Workspace
folder, otherwise you might receive a “location” error inside Eclipse. You can
have any number of folders and ﬁles inside the www folder. Just make sure
that all of your folders and ﬁles are properly linked to each other.
Include the phonegap.js ﬁle inside the www folder.
Create an icon and copy it into the drawable folder at: res
“app_name”) and the location/name of your App's main ﬁlename (i.e.,
“url”). For this test App, the AndroidManifest.xml ﬁle should be OK, as is.
If needed, once outside of Dashcode, modify your HTML, CSS, and
top of the RSS reader App.
extra code for enabling the RSS article links. This extra code is located
inside the Link for Article comments.
Test your HTML code inside Safari. If all tests work OK, launch Eclipse.
Begin a new Android Project in Eclipse.
Create this new project from existing source, select a project name, and
provide an Application Name.
Your new project is now visible in the Eclipse Package Explorer.
If the project creation window wouldn't allow you to select the proper
Android SDK (e.g., a Google API is hard-selected, instead), use Package
Explorer to show the package Properties, then inside the Android pane you
should be able to select the correct SDK. Click Apply and OK.
Expand your RSS reader package inside Package Explorer and verify that
the contents of strings.xml point to your project's main ﬁle and the App
name is correct.
: keep App names to 10 characters or less.
If you receive Build errors in Eclipse, you might need to modify some of the
stock PhoneGap Java code. In this case, I had to remove the Base64 import
and encoding code lines from the ﬁle CameraPreview.java.
Click Run and select Android Application in the Run As window.
Built with Apple Dashcode, this RSS reader App bears a strong resemblance
to its iPhone sibling. Scroll through the article headlines and click on a
headline. The headline window will transition to the article window. Selecting
the “Read More” button at the bottom of an article will launch the DROID
browser and take you to the PhoneGap Google Groups Web site for viewing
the complete RSS citation.
The total elapsed time for development of this project was 2 hours 10
minutes. May the DROID be with you and ﬂourish.
: This project has been tested only on the Android Simulator.