Creating image hot spots in Android

A typical example is creating a map of a country and clicking on a state, brings us some info about the city. For beginners, each clickable part of the image is called hotspot

While this is very common and easy to do in HTML, its slightly different and interesting in Android.

A typical idea I came up with is, to create transparent image buttons and implant them in a relative layout, in positions corresponding to the part of the image you want to click.

But I came across this interesting solution, where some one has created a widget called image map,

All you need to pass is

1. The image for which u want to create hotspots Eg: A map whose different areas should be clickable

2. The polygon coordinates for the different areas that you want to make clickable. Ok, wonder how to get polygon coordinates for an area in the image?

–  I used Photoshop CS6. Place the polygon lasso tool on an area in the image and look at the Info Palette (Press F8 for this dialog to appear), Note the X,Y co-ordinates. Take 5  such (X,Y) sets until you complete the area. 5 is not mandatory, but usually is comprehensive!

Here is the link to the widget https://github.com/catchthecows/AndroidImageMap

C ya :*

Advertisements

One thought on “Creating image hot spots in Android

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s