phonegap

 

Getting Started with PhoneGap (Android)

Page history last edited by Martijn Pannevis 1 mo ago

This tutorial provides instruction on setting up PhoneGap for your web application on the Android G1.

For information on setting up the Android SDK, see the Android Developer Documentation.  In general, you will need to download the Android SDK (remember where you put it!), and set up certificates to sign your applications.
For information on using Eclipse, please see the Eclipse website.

 

Step 1

 

  1. Download source from http://github.com/sintaxi/phonegap using the command:
    git clone git://github.com/sintaxi/phonegap.git
    

    Or from http://www.phonegap.com/download. If you already have Android for Eclipse set up, skip to step 27. (If you have trouble with steps 2-27, also see the standard Android Eclipse instructions at http://developer.android.com)

  2. Download Eclipse from here http://www.eclipse.org/downloads/

     either Eclipse IDE for Java Developers (85 MB)  or Eclipse IDE for Java EE Developers (163 MB)  will do the job, install one of these on your computer
  3. Here is Eclipse in our directory.

  4. [missing image]

  5. Lets click on that exe, do you see it in blue, lets click on that.

    This is what we get once we click on it.

  6. [missing image]
  7. Its saying select a workspace. Click OK.

    This is what happens next, see the program opened.

  8. [missing image]
  9. lets click on help from the top bar menu. 
  10. [missing image]
  11. see the pulldown menu, lets pick software updates
  12. [missing image]
  13. we now see this, software updates and add ons. it has two menus,

    Installed Software.

  14. [missing image]
  15. And the other file is Available Software
  16. [missing image]
  17. Click on "Add Site"
  18. enter the "https://dl-ssl.google.com/android/eclipse/" URL
  19. If you get this error
  20. [missing image]
  21. Try changing the url, change https, to http, lets try it with "http://dl-ssl.google.com/android/eclipse/"

    that one didnt get an error message, and we now see this.

  22. [missing image]
  23. Back in the Available Software view, you should see the plugin. Select the checkbox next to Developer Tools and click Install...
  24. On the subsequent Install window, "Android Developer Tools", and "Android Editors" should both be checked. The Android Editors feature is optional, but recommended. If you choose to install it, you need the WST plugin mentioned earlier in this page.

    Click Finish.

  25. Restart Eclipse.
  26. After restart, update your Eclipse preferences to point to the SDK directory:

    1. Select Window > Preferences... to open the Preferences panel. (Mac OS X: Eclipse > Preferences)
    2. Select Android from the left panel.
    3. For the SDK Location in the main panel, click Browse... and locate the SDK directory.
    4. Click Apply, then OK.
  27. Go to file - new project, then pick android and point it at the phonegap/android folder.
  28. [missing image]
  29. Open up the project in Eclipse

 

Step 2

 

  • Replace the /android/res/drawable/icon.png with your own 48 x 48 png (according to Google other sizes will work, but are scaled down to 48*48).

 

  • Edit the value url in strings.xml in /res/values to point at your URL

    This is the URL that is loaded when your application starts. So if you put here "http://www.google.com" then the Google homepage loads at startup.

    If you want to load a file from application's assets folder you should enter "file:///android_asset/" as prefix. For example to load the index.html file that comes with the PhoneGap demo project, the value should be: file:///android_asset/index.html

     

 

Step 3

 

  • You can now run it on your Emulator
  • Or run and debug it on your phone

 

 

Comments (Show all 41)

profile picture

Sunny Day said

at 2:15 am on Feb 3, 2009

Ive added what I was able to work out, If anyone else knows what to do, add to the wiki, then people will be able use phonegap for android

profile picture

Nik said

at 4:51 am on Feb 15, 2009

On the latest build, it seems to ignore the url value in the strings.xml section, and loads the site from \assets instead?

profile picture

Sunny Day said

at 12:54 pm on Feb 17, 2009

Any chance Nik you could add some lines to the wiki above, I added points 2-28 and cant get any further on what to do to wrap it for Android.

profile picture

Mark Dionne said

at 6:05 pm on Feb 17, 2009

Nik: yes, the URL in strings.xml seems to be ignored. You can work around it by editing your URL into the appView.loadUrl call in DroidGap.java.

profile picture

Mark Dionne said

at 6:11 pm on Feb 17, 2009

If your web page has JavaScript calls to alert() or confirm() they will not currently work in PhoneGap and will silently be ignored. I got them to work by adding the following to DroidGap.Java (replacing the JsAlert code that is there):

import android.app.AlertDialog;
import android.content.DialogInterface;


final class MyWebChromeClient extends WebChromeClient {
// See http://code.google.com/android/reference/android/webkit/WebChromeClient.html
// and http://code.google.com/p/mosembro/source/browse/trunk/src/com/lexandera/mosembro/Mosembro.java?spec=svn12&r=12#137

@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
new AlertDialog.Builder(myApp)
.setTitle("App title")
.setMessage(message)
.setPositiveButton(android.R.string.ok,
new AlertDialog.OnClickListener()
{
public void onClick(DialogInterface dialog, int which)
{
result.confirm();
}
})
.setCancelable(false)
.create()
.show();
return true;
};

(continued in next comment)

profile picture

Mark Dionne said

at 6:12 pm on Feb 17, 2009

(continued from previous comment)

@Override
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
new AlertDialog.Builder(myApp)
.setTitle("App Titler")
.setMessage(message)
.setPositiveButton(android.R.string.ok,
new DialogInterface.OnClickListener()
{
public void onClick(DialogInterface dialog, int which)
{
result.confirm();
}
})
.setNegativeButton(android.R.string.cancel,
new DialogInterface.OnClickListener()
{
public void onClick(DialogInterface dialog, int which)
{
result.cancel();
}
})
.create()
.show();

return true;
}
}

profile picture

Mark Dionne said

at 6:13 am on Feb 18, 2009

I left out one line of code. Add:
final Context myApp = this;
before "final class MyWebChromeClient..."

profile picture

Mauro Tortone said

at 11:46 am on Feb 18, 2009

for me doesn't work step 26.
I downloaded bot phonegap and eclipse today but when i locate the sdk folder doesn't work. Message 'could not find folder tools'

profile picture

Vinay said

at 11:09 pm on Feb 24, 2009

I downloaded latest version and I am always getting "Hello World, <projectname>", I noticed that these strings are coming from file /res/values/strings.xml
I also noticed that changing or removing "appView.loadUrl" call in DroidGap.java has no effect. I still see hello world.
I also tried putting a breakpoint in droidgap.java but it was never hit, I still see hello world.

Thanks for helping

Note that my platform is windows/eclipse/android

profile picture

Vinay said

at 11:07 pm on Feb 25, 2009

Well I finally figured out the problem. I had my project directory pointed to PhoneGap directory instead of PhoneGap/Android. Just in case somebody else runs into same problem

profile picture

Ave Wrigley said

at 4:00 am on Mar 3, 2009

I have got eclipse building and running my project in the emulator. How do you install it on the phone?

profile picture

Ram said

at 4:00 pm on Mar 5, 2009

I have downloaded the source code and set as above steps. While compiling it I am getting following error in DroidGap.java file "Syntax error, accotations are only available if source level is 1.5". Please help me as I am new to this. Thanks in advance.

profile picture

Daniel, Dao Quang Minh said

at 9:33 am on Mar 18, 2009

Hi Ram, the problem is likely because you are using earlier version of JDK. Can you try update to the latest version of JDK ?

profile picture

Ram said

at 1:47 pm on Mar 30, 2009

Thanks. changing the java version to 1.5 has resolved this issue.

profile picture

Ahmet KATRANCI said

at 2:59 pm on Apr 5, 2009

What should be the url parameter value in strings.xml file please?

profile picture

Ahmet KATRANCI said

at 2:10 pm on Apr 8, 2009

I managed to make it work by putting "file:///android_asset/index.html" in strings.xml file as the value of url parameter. I need to investigate what is going on in the background. For those who are interested, I found the value according to this document: http://developer.android.com/reference/android/webkit/WebView.html

profile picture

aninda maji said

at 5:03 am on May 5, 2009

The index.HTML seems to be changed over the time, can please share the old index.html where multiple navigation between the HTML files was present, instead of the AJAX call within the same HTML page... I need to navigate a different web page while clicked on something in the index.html, can someone help me how to do that..

profile picture

Chris Moses said

at 12:01 pm on May 19, 2009

Problem at Step 27:
I'm sure I'm doing something stupid, but I'm new to Eclipse. Any help is greatly appreciated:

Step 27 - My dialog box is differnt than the picture.
Which "Build Target" should I use?
Package name displays com.phonegap.demo not com.nitobi.phonegap. Is this important?
MinSDk box appears. What should I put?
As in the picture, the finish button is greyed out. I can't "Finish" What do I do?

profile picture

Chris Moses said

at 1:45 pm on May 19, 2009

OK, my last one was some bad android SDK configuration.
Now, I get an an error saying it is missing the gen folder in src. When I create this I get 4 errors in AccelListener. Lines 39,43,10,37.
Anybody else experience this?

profile picture

fitzjohn said

at 11:48 am on May 27, 2009

For the other noobs out there, after running through the steps above (on Ubuntu 9.04) the following messages were displayed in the Eclipse console when trying to run the "DroidGap" demo:

[2009-05-27 12:18:36 - DroidGap] Project has no target set. Edit the project properties to set one.
[2009-05-27 12:18:38 - DroidGap] no classfiles specified
[2009-05-27 12:18:38 - DroidGap] Conversion to Dalvik format failed with error 1

I was able to solve this on the Projects > Properties > Android screen by first selecting Google APIs (which was incorrect for my setup) and then reselecting Android 1.5 (which is correct and had previously been selected). I was immediately able to run the emulator following this change.

Of course, I'm now having problems getting the app to work correctly in the emulator, but that's a separate issue.

profile picture

fitzjohn said

at 1:50 pm on May 27, 2009

Has anyone experienced the emulator with nothing more than the title ("PhoneGap") at the top of the screen and the rest is just black? It doesn't make any difference what the value of url in the res/values/string.xml file happens to be. Everything else seems to work okay and my console is saying the following:

[2009-05-27 14:34:01 - DroidGap] WARNING: Application does not specify an API level requirement!
[2009-05-27 14:34:01 - DroidGap] Device API version is 3 (Android 1.5)
[2009-05-27 14:34:01 - DroidGap] HOME is up on device 'emulator-5554'
[2009-05-27 14:34:01 - DroidGap] Uploading DroidGap.apk onto device 'emulator-5554'
[2009-05-27 14:34:01 - DroidGap] Installing DroidGap.apk...
[2009-05-27 14:34:16 - DroidGap] Application already exists. Attempting to re-install instead...
[2009-05-27 14:34:18 - DroidGap] Success!
[2009-05-27 14:34:18 - DroidGap] Starting activity com.phonegap.demo.DroidGap on device
[2009-05-27 14:34:20 - DroidGap] ActivityManager: Starting: Intent { comp={com.phonegap.demo/com.phonegap.demo.DroidGap} }

I tried tried editing the DroidGap.java file so that appView.LoadUrl always calls "http://www.google.com/" (or similar), but this had no impact.

All I can do is click on the emulator's phone buttons until a message comes up stating, "Sorry! Activity PhoneGap (in application PhoneGap) is not responding." I get the options to "Force close" or "Wait," but waiting doesn't help.

Note: I'm using Ubuntu 9.04, Ganymede for Eclipse, and a cloned version of the GitHub repo for PhoneGap.

profile picture

ade said

at 7:48 am on May 29, 2009

@fitzjohn I've fixed your problem and @Nik also tracked down how to get strings.xml to work too. I established out that /src/com.phonegap.demo/DroidGap.java onCreate() was been invoked, but was barking before appView.loadUrl was being called. After hours of trial and error I worked out that bindBrowser(appView) was causing the app to freeze. If you comment that line out (hope it doesn't do anything important) it works. You can then add your url, or path to local files, to strings.xml url property, rebuild, and it works OK.
Ade

profile picture

ade said

at 8:06 am on May 29, 2009

Tracking this down a bit further, the bindBrowser(appView) method does do some pretty fundamental stuff. If you leave it uncommented, but open up AccelListener class and comment out //sensorManager = (SensorManager) mCtx.getSystemService(Context.SENSOR_SERVICE); in the constrcutor, your app should build OK. Obviously, something to do with the accellerator is going to bark at some point, but at least you can get your app up and running until someone fixes it.
Ade

profile picture

Ed Turner said

at 4:38 pm on Jun 2, 2009

Hi there... discovered this PhoneGap lark a few days ago and the prospect of accessing core APIs through Javascript is great... I'm not surprised you won web 2.0 launch awards... if I can get it to work, that is :)
I'm running Eclipse Ganymede for Android and trying to get PhoneGap (and thus your index.html 'program') to run through the emulator. I tried opening 0.7.2 in the eclipse/android environment originally but I kept getting 2 or 3 'Error' notices. I restarted the process several times but seemed to get different error messages! Some were regarding AccelListeners, others about SMSlisteners... although I can't remember exactly what some of them were I do remember two methods had '@Override' placed just above them - for some reason these threw errors (I think the tip mentioned 'must override superclasses', or something like that). Another time, the R class, seemed unacceptable to it. Another time 'build path/target' error. I thought perhaps you 0.7.2 version was unstable so tried 0.6.0 - same type of problems. Always about 10/11/12/13 'warnings' and about 1/2/3 errors - only care about the latter.

I got AVDs set up, and emulator up and running through command line ok... until I can run all your phone gap files succesfully without getting errors (different every time I try!) I can't even begin to APK it and try it out on the emulator. Eclipse seems fairly integrated with the emulator from what I've read, so it should be a fairly straight forward compile/test process.

Would appreciate reply or link to appropriate help pages... Thanks! I'll tell everyone about it!

profile picture

AceMaker said

at 10:37 pm on Jun 6, 2009

Hi ade, getSystemService(Context.SENSOR_SERVICE) hangs for me as well, I am using the 1.5 r2 SDK. Some of the sensor manager API changed in 1.5. I've attached my change here that compiles on 1.5. I don't have a device that has Accelerometer so I can't test it. Cheers,
Bryan

public class AccelListener implements SensorEventListener{

WebView mAppView;
Context mCtx;
private SensorManager sensorManager;

private long lastUpdate = -1;

AccelListener(Context ctx, WebView appView)
{
mCtx = ctx;
mAppView = appView;
// sensorManager = (SensorManager) mCtx.getSystemService(Context.SENSOR_SERVICE); // Hangs 1.5 emulator!
}

public void start()
{
if (sensorManager == null)
return;
List<Sensor> sensors = sensorManager.getSensorList(Sensor.TYPE_ACCELEROMETER);

if (sensors.size() > 0) {
Sensor sensor = sensors.get(0);
sensorManager.registerListener(this,
sensor,
SensorManager.SENSOR_DELAY_GAME);
}

}

public void stop()
{
sensorManager.unregisterListener(this);
}
/* old interface
public void onAccuracyChanged(int sensor, int accuracy) {
// This should call the FAIL method
}
*/
public void onSensorChanged(int sensor, float[] values) {
if (sensor != SensorManager.SENSOR_ACCELEROMETER || values.length < 3)
return;
long curTime = System.currentTimeMillis();
if (lastUpdate == -1 || (curTime - lastUpdate) > 1000) {

lastUpdate = curTime;

float x = values[DATA_X];
float y = values[DATA_Y];
float z = values[DATA_Z];
mAppView.loadUrl("javascript:gotAccel(" + x + ", " + y + "," + z + " )");
}
}

@Override
public void onAccuracyChanged(Sensor arg0, int arg1) {
// TODO Auto-generated method stub

}

@Override
public void onSensorChanged(SensorEvent arg0) {
// TODO Auto-generated method stub

}


}

profile picture

AceMaker said

at 10:39 pm on Jun 6, 2009

Hi Ed, the zip file in the download area is not up to date, try use git to get the source, that should work.
Cheers,
Bryan

profile picture

Ed Turner said

at 5:29 pm on Jun 12, 2009

Thanks, Bryan... I downloaded the latest version from GitHub... at least now I'm getting the same error messages.

I make sure Eclipse is set to run the Android SDK environment, then go new->Android project then select 'create project from existing source', select the android folder within the downloaded and extracted folder's root... DroidGap becomes the Porject name.. it gives me 3 options of target build: Android 1.1, 1.5 or Google API... I don't think the first time it selected one automatically, so I selected 1.5 (because i couldn't procede without selecting one). On opening up the workspace, it shows the various bits in the package explorer but shows a cross symbol over the root 'DroidGap' node, indicating an error, I presume. In the 'problems' tab it always gives me 2 errors: #1 - Project 'DroidGap' is missing required source folder: 'gen' #2 The project cannot be built until build path errors are resolved (I presume as a result of #1). On clicking on the droidgap node in package explorer, I see the 'gen [Generated Java Files]' folder - inside it is: com.phonegap.demo->R.java->R (a file, I presume, and then the following attributes) -> attr, drawable, id, layout, raw, string (each of which have a few sub-elements of their own).

'Gen' seems to be there, but errors are given, and therefore it will not compile also. Doesn't give any line numbers/locations in addition to the error messages. I've tried this over and over (selecting build target (when I create the project) as 1.1 API too) and get the same error.

What the ~"@!? Would love to hear from anyone if they've experienced this too, as well as the PhoneGap chaps. Thanks to all.

profile picture

AceMaker said

at 12:15 am on Jun 14, 2009

did u do a clean and build all? also make sure ur java compiler compliance version is set to 1.6.

profile picture

Tavis said

at 3:49 pm on Jun 17, 2009

I installed everything as this tutorial indicates. I can run the sample android apps from android sdk but when I try to run the phonegap program there are numerous errors and warnings in eclipse. Running all recently downloaded versions of everything. Did not use git however. Version of phonegap I downloaded is 0.72

here are the errors :
Description Resource Path Location Type
The method onAccuracyChanged(int, int) of type AccelListener must override a superclass method AccelListener.java blahnose/src/com/phonegap/demo line 39 Java Problem
The method onAccuracyChanged(int, int) of type AccelListener must override a superclass method AccelListener.java hello/src/com/phonegap/demo line 39 Java Problem
The method onSensorChanged(int, float[]) of type AccelListener must override a superclass method AccelListener.java blahnose/src/com/phonegap/demo line 43 Java Problem
The method onSensorChanged(int, float[]) of type AccelListener must override a superclass method AccelListener.java hello/src/com/phonegap/demo line 43 Java Problem
The type R is already defined R.java blahnose/gen/com/phonegap/demo line 10 Java Problem
The type R is already defined R.java hello/gen/com/phonegap/demo Unknown Java Problem
Unhandled exception type IOException AudioHandler.java hello/src/com/phonegap/demo line 37 Java Problem

Here is what it says in console when opening the phonegap/android project :

[2009-06-17 16:27:24 - blahnose] Project has no target set. Edit the project properties to set one.
[2009-06-17 16:27:25 - blahnose] no classfiles specified
[2009-06-17 16:27:25 - blahnose] Conversion to Dalvik format failed with error 1

profile picture

Ed Turner said

at 1:49 am on Jun 18, 2009

Tavis' problem is exactly the sort of thing I've been having trouble with and writing about... even after downloading latest version from Git, although I don't get a bunch of changing errors like 'AccelListener must override a superclass method' etcetc, I still get the 'build target' and talk of 'Dalvik format' etc. Still haven't got it to work... hmm

profile picture

Abdirisaq Hassan said

at 4:34 pm on Jul 1, 2009

what about development on windows?

profile picture

Aaron Montana said

at 12:46 pm on Aug 6, 2009

I'm having trouble getting started with Android development, but I could be missing something because the most of the screen shots in this tutorial are missing.

Is this page no longer supported?

Also, is it necessary to download the newer git-hub version?

profile picture

Richard Paul said

at 11:47 pm on Aug 9, 2009

Initially I had just a blank screen with any action causing a "This application is not responding" dialog. I then removed the PhoneGap demo app from the emulator (Launcher > Settings > Applications > Manage Applications > PhoneGap > Uninstall). Before reinstalling the app I did a Project > Clean in Eclipse. Running the PhoneGap app via PhoneGap project > Run As > Android Application, I was then able to view the application on the emulator.

profile picture

Rob Chohan said

at 4:25 pm on Aug 17, 2009

Adding my experiences:

1. Can't seem to get the emulator to work, but it runs properly on my phone. Any ideas? I did the uninstall/clean mentioned by Richard Paul and others. It builds find and deploys fine, but nothing when it gets to the emulator.

I'm on Windows XP
+ Eclipse 3.3.1.1
+ Java 1.6.0_15
+ Gitball 0.7.4
+ Build Target is Google API's 1.5

2. Same bit of code, DroidGap.apk, runs fine on my physical device. Great work PhoneGap team.


profile picture

saurabh said

at 11:48 am on Aug 22, 2009

Hey you forgot to tell that u need to make AVD(android virtual device ) while using it first time
by using avd manager that appears when u try to run your app

profile picture

Rob Chohan said

at 4:21 pm on Aug 25, 2009

Ok, Saurabh, thanks for the reply. I am able to get my AVD & Emulator working for other Android projects that I'm running in Eclipse. I just can't seem to get it to work for PhoneGap. I am using Platform 1.5 and API Level 3.

profile picture

Aaron Montana said

at 12:54 pm on Sep 4, 2009

Having the same issues as Tavis and Ed Turner ... Also, still wondering about all the missing images on this page. Tried with the standard download and github build, no dice. Keep in mind I am able to create and run standard projects with the same eclipse install, AVD and all, but if I wanted to write Java, I won't be here.

It seems like I'm missing a step in the project setup.

Anyone?


profile picture

entity said

at 10:56 pm on Sep 11, 2009

I'm also having trouble here. No problem emulating or debugging on a device. But the index.html in the phonegap demo is not running properly. Only function that works is the call-method...

profile picture

entity said

at 10:57 pm on Sep 11, 2009

By the way the only function not using onclick-command

profile picture

bibby said

at 6:25 pm on Sep 22, 2009

I don't use Eclipse at all, but rather the android, emulator, and adb programs in tools/ of the SDK, so already this article could be much shorter. A lot of that section is in the android documentation anyway. What there isn't enough of is what PhoneGap specific things I ought to be doing. Should 'PhoneGap' be the default Activity for instance?

Copying the source of the demo app to my project, ant halts on CameraPreview throwing:
[javac] Note: Some input files use or override a deprecated API.
[javac] Note: Recompile with -Xlint:deprecation for details.

You don't have permission to comment on this page.