Android images with clickable areas

What is android? This is a simple question but the answer is quite complicated. If you go deeper on the word “android”, we will get lot of answers for the question what is Android. To answer in a simple way. 

             Android is an operating system for Mobile phones.

“Android images with clickable areas”

If we want to display an image in Android with clickable areas we can usemethod that involves overlaying a hotspot image on top of the real image being displayed. The overlay image has exactly the same size as the first image. It uses different coloured regions  to indicate the hotspots.

                                                           

For Example:-

Let’s start with what the app looks like when you touch the screen. Circles appear that indicate roughly where the clickable regions on the screen are. When you touch one of the regions, the image changes. For example, when you touch the image near the end of the space ship, the app changes to make it look like you started the space ship.

Touching the image a second time, returns you to the initial view of the app, which is the first picture without the orange circles showing.

The way this app is set up with a Frame View and Image View gives you an easy way to handle scaling. I used a 800 x 480 image for this demo app. It scales automatically to all screen sizes, and it is high enough resolution that it looks good on a tablet. Here’s what it looks like in a portrait orientation.

In a real app, you might disallow portrait orientation because it has a very small usable view. I left it in for testing reasons. I wanted to know that the image and the hotspot image were scaling correctly.

Working

This takes place in 2 steps:-

1.    Getting the layout just right so the images would scale correctly on all Android devices and tablets.

2.    Getting the clickable regions to work and also to scale automatically.

The second image exactly has the same size as the first one. It uses different coloured regions to indicate the Hotspots.The main layout for this app uses a Frame View. It is defined to fill up the entire screen. Within it are two image views. Views defined this way in a Frame View share the space of the frame. The second one appears on top of the first one.

There is a lot going on in this method:

(1) The coordinates of the touch point come from the event object. The coordinates are relative to the view.

(2) Given the coordinates of the touch, we look up the colour of a pixel at the corresponding point in the mask image (the one with the coloured rectangles). The layout rules for a FrameView and identically sized images ensure that the points correspond.

(3) The colour for point is not necessarily the exact colour value we used in the hotspot image. The reason for this is that the colours could change a bit as the image is scaled.

“Conclusion”

A simple way of adding clickable regions and take full advantage of Android’s handling of different screen sizes and orientations. We do not find much overhead for the second image. For simple transitions from one activity to another, this method works out well.