Building a Native Context Menu for PhoneGap Android

So I know I promised that I'd write about a HTML only menu but I thought folks might be interested in native context menus as well. It's not much different than my last blog post on menu's so it should be easy to follow.

So when I talk about a native context menu I mean the menu that clicks when you do a long press on an Android device. Again this is well covered on the Android Developer page. Here is an example of an context menu from the Contacts app:

The first step in creating the menu is to define it in XML. My recommendation is to create a menu folder under the res folder in your Android Eclipse project. Then you create a new File with an XML extension. For this post I'll call mine example.xml. When you're done your res folder should look something like this:

Don't worry about the red X's as we haven't edited the XML file yet so it is going to complain about a premature end of file. For a real good description of what goes into a menu XML file read this. For our purposes I'm just going to give you the XML to paste into the file:

But when you view the file in Eclipse you'll still see errors:

and that is to be expected as we haven't added the two images to the drawables folder nor have we added our two new strings to strings.xml. To fix these issues first download these two images:

and copy them to your projects res/drawable-hdpi folder. When you want to put out a professional application you'll need to provide icons of various sizes but the above is enough for our needs.

To fix the rest of the red X's you'll need to open the res/values/strings.xml and add two new Strings. The first should have the name "settings" and a value of "Settings. The second should have the name"help" and, predictably, the value of "Help". At this point all the red X's from example.xml and from the res folder hierarchy should have disappeared. 

If they haven't, well then you've done something wrong and should probably go back over all the steps to make sure you haven't missed anything.

Okay, so now we've got all the resources in place. Let's go write some actual Java code. Don't worry much of it will be cut and paste. In Eclipse open up your main Java class, you know the one that extends DroidGap.

First you'll need to register the context menu in the onCreate method. Basically, you'll need to add the call to registerForContextMenu to your onCreate method:

Secondly we'll need to tell your application what to do when it detects a long press. You'll need to paste the following code into you main Java class:

You shouldn't need to change anything unless you've called your menu XML file something different than example.xml. If you have you'll need to change R.menu.example into R.menu. where you replace with the name of your file minus the .xml extension.

The last bit of code you need to add is a method that will tell your application what to do when the individual menu items are clicked. Here's some example code:


When you click on the Setting button we'll use an Android intent to load the devices Settings panel. If you click on the Help button then we'll execute some JavaScript code. That's it! You don't need to add anything to your HTML/JS code to get a native Android context menu working with your PhoneGap application. Here is what it would look like:

Please note, I'm just providing a quick example and you are not limited to how you handle the menu button clicks in the least. You may want to handle it in Java and do something that you can't do in JavaScript or you may want to call a JavaScript function on your page to have your UI react in some interesting way.

So, there you go. The process is nearly identical to creating an options menu that I described in my previous post. I promise that in my next post I'll show you how to handle everything in HTML and JavaScript!