how can I create a custom clickable shape on an image in android?

Question

I want to create a clickable image, my image has some different clickable parts in it, like this one:

I want to draw a custom shape like : A,B,C,D,E,F and make sure when user click on of this something happen. the problem is I don't have any kind of idea to, how create shapes like the shapes in the image make sure it just fix on the image and in different screen size don't see a massed up thing.

Answer 1

Will there be more than many of such images?

If no I suggest you to create mask image for each region where black part of image represents the region and white part excludes rest.

To draw image:

• create custom View
• in constructor don't forget to use setWillNotDraw to true so you can do custom drawing
• override View.onDraw method where you can draw main image and all others with some filters via setColorFilter.

To handle click events:

• override onTouchEvent method
• get touch position
• compare touch position with point color in mask image

To optimise:

• create mask image downscaled by some scale factor
• during comparison divide touch position by scale factor

This is not ideal, but solution with vectors is non trivial I think

Answer 2

Take it as image and setOnclickListner for that image