Handling clickable areas in imageview

Question

I have some image like this

and I want to make the red areas clickable areas. I want to make this areas clickable meaning when user touches the screen at some red sot I want to be notified a.i I want to register a listener.

The problem is with that the image is different size for different screen, some screens have a size of 240x320 some 400x800 for the image view I use fill_parent so the image will fill the whole screen in every screen. and this clickable areas sometimes will be 50dip from the left border sometimes will be 150dip. Sometimes it is 10dip from the top sometimes it is 500dip... everything depends on the screen size

how to handle this kind of scenario ?

Answer 1

I found a very good tutorial on this site here: http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/

The way you do it: - You have 2 images. - 1 is the background and the other is on top of it and is an invisible mask. - The mask gets an OnTouchListener. - The mask has different colored areas(your touch areas). - If you touch the image, the mask checks for the color and do an action.

The nice thing is: If you scale the image, the touch areas also scale, so you will always have your touch areas on the right position.

It is pretty straight forward. Hope i could help, even if your question is older than a year.

Answer 2

The best way is to cut your image for separate pieces, and put them inside RelativeLayout.

Then set click listener for those images where you need.

Another way you could handle this is determine screen size and calculate touch areas:

final Display display = ((WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();

final int width = display.getWidth();
final int height = display.getHeight();

Answer 3

Here is another example (last). You just put on top of your image transparent buttons and handle click.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@android:drawable/edit_text" />

    <Button
        android:id="@+id/bottomLeft"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@android:color/transparent" />

    <Button
        android:id="@+id/center"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@android:color/transparent" />

    <Button
        android:id="@+id/bottomRight"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_centerInParent="true"
        android:background="@android:color/transparent" />

</RelativeLayout>