Search code examples
androidimagedictionaryclickableareas

How to make a clickable areas in a map image with each province doing a different action?


I want to make an Android app where you see an image of a Dutch map, there you can select an province. Each province has to go to another class.

The best way i found was to do it with 2 images, 1 you displayed and the other one exactly the same but with colors. Than get the color with touchEvent and let say if its Red go to a class.

So far i've 2 images, one i displayed and the other one (exactly the same but each province have another color), this image i maked 'invisible'.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#ffffff" >

    <ImageView
        android:id="@+id/img_bg"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"
        android:src="@drawable/nl_clickable_original" />

    <ImageView
        android:id="@+id/img_hitbox"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"
        android:src="@drawable/nl_clickable"
        android:visibility="invisible" />

</FrameLayout>

But now i have no idea how to go further.

I found some code on StackOverflow which should get the colors from the image but i don't no how to implement it.

private int getColour(int x, int y) {
    ImageView img = (ImageView) findViewById(R.id.img_hitbox);
    img.setDrawingCacheEnabled(true); 

    Bitmap hotspots = Bitmap.createBitmap(img.getDrawingCache()); 
    img.setDrawingCacheEnabled(false);

    return hotspots.getPixel(x, y);
}

Do i it the right way or have someone a better idea how to made this?

I've searching for 1 week now so a bit help would be nice :)!

Thanks


Solution

  • One image will be on top of the other, so you will never be able to click the one a the bottom. If your map is not scrollable, it will be easy, with the ontouch event, just keep in mind that the screen can have different densities.