Need help with AndroidImageMap?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

201 Stars 76 Forks 14 Commits 24 Opened issues


An HTML map like widget in an Android view

Services available


Need anything else?

Contributors list

# 303,390
6 commits

eclipse quickstart:

  • git clone
  • Run Eclipse and choose a workspace
  • File|New->Project...
  • Select Android Project from Existing Code
  • Browse to AndroidImageMap and hit Finish

An implementation of an HTML map like element in an Android View:

  • Supports images as drawable or bitmap in layout
  • Allows for a list of area tags in xml
  • Enables use of cut and paste HTML area tags to a resource xml (ie, the ability to take an HTML map - and image and use it with minimal editing)
  • Supports panning if the image is larger than the device screen
  • Supports pinch-zoom
  • Supports callbacks when an area is tapped.
  • Supports showing annotations as bubble text and provide callback if the bubble is tapped

New in this version: By default, the initial image is resized to fit the view dimensions with no regard to maintaining aspect ratio. This appears to be the most common use.

To have the aspect ratio kept: change this ( line 54) to from true to false private boolean mFitImageToScreen=true;

Common issues: NOTE: You will need to change the xmlns (xml namespace) to match the base package of your application xmlns:ctc="" becomes xmlns:ctc=""

The package is listed in your AndroidManifest.xml file (ie package="" )

Use notes:

To associate the map with the img, list the map in in ImageMap attributes

The area map is specified in your project at res/xml/map.xml One difference over HTML maps is that each area must have an id. I went back and forth on this requirement, and I may change the code to allow for areas without id. The code will use the name attribute if present, otherwise it will look for title or alt.


The image itself is placed in res/drawable-nodpi so that the system will not attempt to fit the image to the device based on dpi. This way we are guaranteed that our area coordinates will map properly to the displayed image. If you want to use different density drawables, you will have to make changes in the code based on the DisplayMetrics.density.

Here is a sample activity that finds the view in the layout and adds an on click handler

public class ImageMapTestActivity extends Activity { ImageMap mImageMap;

public void onCreate(Bundle savedInstanceState) {

// find the image map in the view
mImageMap = (ImageMap)findViewById(;

// add a click handler to react when areas are tapped
mImageMap.addOnImageMapClickedHandler(new ImageMap.OnImageMapClickedHandler() {
    public void onImageMapClicked(int id) {
        // when the area is tapped, show the name in a
        // text bubble

    public void onBubbleClicked(int id) {
        // react to info bubble for area being tapped



Don't hesitate to ask if you have any other questions.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.