The image I want clickable is below:
2 Answers
You could slice the image in Photoshop / Fireworks etc. Then use multiple ImageViews to display it back. Using RelativeLayout it will be possible to align them all correctly.
Failing that you will need to have an onTouch event, and then calculate which portion of the screen was touched by getting the coordinates etc.
IMO the first option is easier.

- 2,335
- 21
- 25
First duplicate the image that you want to use as an image map and colour each section. Needless to say, a different colour for each section :D. Then create two ImageViews in your layout. Set the background of the first one as the image that you want displayed to screen and the background of the second as the coloured in one.
Then set the visibility of the second ImageView to invisible. If you run the program at this point you should see the image that you want displayed. Then use an OnTouch listener and get the colour of the pixel where you touched. The colour will correspond to that of the coloured image.
The following getColour method would need to be passed the x and y coordinates of the touch event. R.id.img2 is the invisible image.
private int getColour( int x, int y)
{
ImageView img = (ImageView) findViewById(R.id.img2);
img.setDrawingCacheEnabled(true);
Bitmap hotspots=Bitmap.createBitmap(img.getDrawingCache());
img.setDrawingCacheEnabled(false);
return hotspots.getPixel(x, y);
}

- 4,390
- 1
- 34
- 57
-
wow this is great answer , i have done this thing but the second way of @Tony answer above , also it was very hard getting the coordinates and making them relative to screen width and hight to work on different screens, your solution is great really thanks – Ali Feb 29 '12 at 07:45
-
6Looks like the answer is copied and pasted from here: http://stackoverflow.com/questions/3961071/android-how-to-make-a-clickable-map-image-with-each-country-producing-a-differe, I expected a mention to @Scotty at least, not a very good example of SO etiquette. – Arnab Mar 23 '12 at 13:51