Make multiple clickacble areas in an image

Question

I have an image, and I want to preform a different action if the user clicked on different parts of the image.

I am kinda of new hobbyist, so I don't understand everything I find on my research. I have found a couple of solutions, but I don't quite understand how to implement any

1. Mask the image and get the pixel color of that underneath image to know which area has been clicked

2. ImageMap

PS:

• The image is in a gird like a table (if it will help)(drawing the table is NOT an option)
• I have seen a couple of other solutions, but I don't understand them, so PLEASE do not mark as duplicate. I can understand the idea behind these answers, but I can't implement them. I don't know what to do with the code provided in the answers.

I have Succeeded in making some transparent buttons and placing them on the image, but the buttons move from their relative positions when testing on different screens. I would appreciate a help with the buttons stuff, or explaining a different way to do this.

Answer 1

Add layer of buttons over the image using PercentRelativeLayout https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

First add a library:

dependencies {
    compile 'com.android.support:percent:25.3.1'
}

Then in your layout file:

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

    <ImageView
        android:layout_width="100dp"
        android:layout_height="200dp"
        android:background="@android:color/black" />

    <android.support.percent.PercentRelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="100dp"
        android:layout_height="200dp">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            app:layout_heightPercent="50%"
            app:layout_marginLeftPercent="25%"
            app:layout_marginTopPercent="25%"
            app:layout_widthPercent="50%" />
    </android.support.percent.PercentRelativeLayout>

</RelativeLayout>

This button will be in center of image. If you want to place in somewhere else your can count your position using pixels and see it on the preview. Buttons should have transparent background.

Answer 2

A solution will be implementing an OnTouchListener() to your ImageView

The View.OnTouchListener documentation: https://developer.android.com/reference/android/view/View.OnTouchListener.html

The following code block should help you do your work:

    //Set onTouchListener for your imageView
    imageView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){ //Checking if clicked on the image

            //Get the touch position from the event
            float x = motionEvent.getX();
            float y = motionEvent.getY();

            //Divide it by image width/height to get relative ratio
            x = x / imageView.getWidth();
            y = y / imageView.getHeight();

            //Write a if-else as per your requirent
            //Here I divided the image in 4 (quandrants) and showing where it was clicked
            if(x <= 0.5 && y <= 0.5){
                Toast.makeText(StartActivity.this, "Upper Left Quadrant", Toast.LENGTH_SHORT).show();
            }
            else if(x < 0.5 && y > 0.5){
                Toast.makeText(StartActivity.this, "Lower Left Quadrant", Toast.LENGTH_SHORT).show();
            }
            else if(x > 0.5 && y <= 0.5){
                Toast.makeText(StartActivity.this, "Upper Right Quadrant", Toast.LENGTH_SHORT).show();
            }
            else if(x > 0.5 && y > 0.5){
                Toast.makeText(StartActivity.this, "Lower Right Quadrant", Toast.LENGTH_SHORT).show();
            }

        }
        return false; //We have not handled the touch event
    }
});