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

Possible duplicate of [clickable area of image](http://stackoverflow.com/questions/16670774/clickable-area-of-image) — Lukas Lechner, Jan 23 '16 at 15:21

Marc Van Daele · Answer 1 · 2012-11-05T15:54:35.290

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);
}

score 1 · Accepted Answer · answered Nov 05 '12 at 14:59

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.

answered Nov 05 '12 at 14:59

Stephane Mathis

6,542
6
43
69

The image is not scrollable, so it would be easy? Did you have some explanation code for me? I don't know how to start – Marvin Nov 06 '12 at 07:01
Here is an example : iv is an ImageView iv.setOnTouchListener(new View.OnTouchListener() { float downX, downY; public boolean onTouch(View view, MotionEvent event) { float currentX, currentY; switch (event.getAction()) { case MotionEvent.ACTION_DOWN: downX = event.getX(); break; } } } – Stephane Mathis Nov 06 '12 at 09:21
But on different screen density your image will have different size, so a touch at the position 150/200 will not be at the same location. Define your areas for one density and adjust your value for the others. – Stephane Mathis Nov 06 '12 at 09:28
How do i define the density's, is that a special xml file or? – Marvin Nov 06 '12 at 10:14
Density is a device property (dots per inch). The device density can be retrieved with DisplayMetrics metrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metrics);int density = metrics.densityDpi; It's value is xhdpi (320dpi), hdpi (240dpi), mdpi (160dpi) or ldpi (120dpi). You can also get metrics.xdpi and metrics.ydpi. But I don't think it's relevant right now. Did the solution I proposed worked? If not, what was the issue? – Marc Van Daele Nov 08 '12 at 07:40

score 0 · Answer 3 · answered Nov 05 '12 at 15:08

0

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.

answered Nov 05 '12 at 15:08

Daler

1,205
3
18
39

Did you have a tutorial or something? Or a blog where someone explains it? – Marvin Nov 06 '12 at 12:27
Upper Stephane and Marc gave to you a piece of code that will track the click on some area of your image and depends on their results you can do what you want. About different densities i could suggest you to take the screen resolution and do calculating. So, when you knew what is screen resolution(density) you knew where is your image and where will be your regions situated. – Daler Nov 07 '12 at 15:21

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

3 Answers3