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

Question

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

Answer 1

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.

Answer 2

In the activity's onCreate, you can do something like (not tested)

    ImageView img = (ImageView) findViewById(R.id.img_bg);
    img.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP){
            int x = (int) event.getX();
            int y = (int) event.getY();
            int colour = getColour( x, y);
            //switch to correct province
        }
        return true;
     }
    });

I'm not sure though that getColour will work correctly for an invisible (or a hidden view) View. An alternative could be to do something like (again not tested)

private int getColour( int x, int y)
{
    ImageView img = (ImageView) findViewById(R.id.img_bg);
    Drawable d = getResources().getDrawable(R.drawable.nl_clickable);
    Bitmap b1 =((BitmapDrawable)d).getBitmap();
    //scale loaded bitmap to same resolution as visible view
    Bitmap hotspots = Bitmap.createScaledBitmap(b1, img.getWidth(), img.getHeight(), false);
    return hotspots.getPixel(x, y);
}

Answer 3

The main problem in your case is the screen densities. You could divide your image in to coordinates and then by using ontouch event do what you want to do, but as there are millions of different screen's density it will be difficult for you. To mention, that peace of code that brings your back a color is also depends on coordinates, you have to pass x and y coordinates of the image so then it will give you back colors, so forget about colors. Better think about screen densities, and do research on this way.