Android Shape / Image map borders?

For an Android App I’m trying to create a map and allow the users to click on the map, and need to show the bordering areas of the shape that’s been clicked on.

I’m using an image with areas defined in a similar way to an HTML image map. i.e.

<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” />

Are there any simple solutions to determine which shapes are touching where the user clicks? I already have a solution to determin the area Id, so I know which shape is touched.

I have thought about trying to walk the line of the shape and adding a couple of X/Y coordinates and creating a hashmap of areas that I find. This seems fairly easy for rectangles, but harder for more complex triangles or circles. Is there a solution that I’m missing?

Thanks for any help offered.

I’m not aware of any “correct” solution to this problem. But one approach (which I have used successfully) would be to create a bitmap with various shapes drawn in different colours. Then add a click handler for your ImageView, get the x and y coordinates, and find the colour of the pixel at the equivalent spot on the bitmap. This will tell you which shape has been clicked.

Perhaps a little hacky - but it does work!

Thanks for replying.

I did see the defining colours as a solution to the image map problem. However, I couldn’t see that it helped determine which shapes are bordering the one that has been touched - how do you know that a red shape is touching a green one and a blue one?

The solution with defining the areas as coordinate does work to define areas so that if a user touches an point on the screen, I know that corseponds to area 1. I also need to know whether area 1 borders area 2 and area 3 etc. I could eyeball the image and define these in xml, so I know that area 1 borders area 2 and 3 ie:

<area id=“@+id/area1001” shape=“rect” coords=“118,124,219,226” borders=“@+id/area1002, @+id/area1003” />

But this seems time consuming to produce and prone to human error, hence looking for a solution where I can get the bounding box of the shape, and determine which other shapes are touching it.

Ah yes, sorry I misinterpreted your original post.

The only thing I can think of is, surely there are some existing intersect-detection algorithms on the web. Maybe you could have the shapes overlap each other by 1 pixel, and then simply look up which shapes overlap the clicked area.