Question

I need to make this clickable image similar to an imageMap in HTML. I also need to put an icon over the clickable area (in the center, sort of like a map marker), but how do I account for image resizing?

i.e. my image might be 800×600 and the clickable area might be the rectangle covered by 20,20 and 60,40, but these pixels don’t actually refer to the same position in the image anymore when it isn’t displayed on a pixel perfect fashion.

EDIT: my images are taken from sdcard, not from drawable folders

Answer 1

This is what i found in this link

I found myself needing to display an image and have the user tap on
different parts of the image to navigate and perform actions. After
sketching out what I needed, it became apparent that what I wanted was
something like an HTML map tag, but in an Android view. A bit more
thinking and I decided this would be a useful widget to have
available.

The resulting code:

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 The code can be found in GitHub –
Android Image Map

Update 2 March 2012: Added an option to always resize the image using
the original image bits. Certain images, when resized up and down lose
a lot of their image quality. Always resizing from the original bits
gives the best possible image, but requires extra memory. The tradeoff
is now up to you.

Here are some quick notes about the implementation, I’ll make some
follow up posts with more details about some of the key areas.

The ease of associating the map with the img matches the ease of doing
so in an img tag in HTML. Just supply the name of the map to use in
the layout:

<!--?xml version="1.0" encoding="utf-8"?-->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ctc="http://schemas.android.com/apk/res/com.ctc.android.widget"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <com.ctc.android.widget.ImageMap  
        android:id="@+id/map"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:src="@drawable/usamap"
        ctc:map="usamap"/>
</LinearLayout>

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 current implementation
also requires a name for each area, though this could be changed
easily.

<!--?xml version="1.0" encoding="utf-8"?-->
<maps xmlns:android="http://schemas.android.com/apk/res/android">
    <map name="gridmap">
        <area id="@+id/area1001" shape="rect" coords="118,124,219,226" />
        <area id="@+id/area1002" shape="rect" coords="474,374,574,476" />
        <area id="@+id/area1004" shape="rect" coords="710,878,808,980" />
        <area id="@+id/area1005" shape="circle" coords="574,214,74" />
        <area id="@+id/area1006" shape="poly" coords="250,780,250,951,405,951" />
        <area id="@+id/area1007" shape="poly" coords="592,502,592,730,808,730,808,502,709,502,709,603,690,603,690,502" />
    </map>
    <map name="usamap">
        <area id="@+id/area1" shape="poly" coords="230,35,294,38,299,57,299,79,228,79" />
...
     </map>
</maps>

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.

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;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

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

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

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

Hope this will help.