clickable area of image

Question

i'am designing a GUI remote control, but instead of making separate buttons for each remote button, i want to get a full ready remote image and set certain parts of it click-able. is there a way rather than the motion event to do this?

Answer 1

I have 2 solutions for your requirement.in both,the whole image stays clickable but you can get information about clicked area.

Solution 1:

you can mask the image and get the pixel color of that underneath image.so ultimately you can come to know which area has been clicked.

here,whenever clicked occurs,you can check the pixel color of background image and match it with predefined color set to know about which area has been clicked.

Foreground image:

Background image:

Clickable area:

Still confused?

Reference: I would like to suggest you to go through this tutorial.

Solution 2:

you can map your image with co-ordinates and accordingly you can get the information of area which has been clicked.

Example: MappedImage with co-ordinates

if you are not aware of co-ordinates,you can create your mappedimage from here

co-ordinates for Kansas will look something like this,

        <area shape="poly" coords="243,162,318,162,325,172,325,196,244,196" id="@+id/area14" name = "Kansas"/>

Reference: Please have a look at Android Image Mapping.

I hope it will be helpful !!

Answer 2

You can still use buttons.

You can place them over your image in the correct spots and make them invisible.

In XML

<Button android:visibility="invisible"/>

Or

Button mybutton = (Button) v1;
mybutton.setVisibility(View.INVISIBLE);

Answer 3

I had the same challenges and solved it with the library "PhotoView", where you can listen for

onPhotoTap(View view, float x, float y){} 

events and check if the tab is inside your image area, and then perform certain tasks.

I created a library to to help other developers implement such functionality much faster. It's on Github: ClickableAreasImages

This library lets you define clickable areas in an image, associate objects to it and listen for touch events on that area.

How To Use the library:

public class MainActivity extends AppCompatActivity implements OnClickableAreaClickedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Add image
        ImageView image = (ImageView) findViewById(R.id.imageView);
        image.setImageResource(R.drawable.simpsons);

        // Create your image
        ClickableAreasImage clickableAreasImage = new ClickableAreasImage(new PhotoViewAttacher(image), this);

        // Initialize your clickable area list
        List<ClickableArea> clickableAreas = new ArrayList<>();

        // Define your clickable areas
        // parameter values (pixels): (x coordinate, y coordinate, width, height) and assign an object to it
        clickableAreas.add(new ClickableArea(500, 200, 125, 200, new Character("Homer", "Simpson")));
        clickableAreas.add(new ClickableArea(600, 440, 130, 160, new Character("Bart", "Simpson")));
    }

    // Listen for touches on your images:
    @Override
    public void onClickableAreaTouched(Object item) {
        if (item instanceof Character) {
            String text = ((Character) item).getFirstName() + " " + ((Character) item).getLastName();
            Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
        }
    }
...
}

Answer 4

If clicking rectangles is enough, then this can be achieved quite easily by extending ImageView. The following is a simple implementation, without regard to accessibility.

The View:

package com.example.letzterwille.views;

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

import java.util.HashMap;
import java.util.Map;

import androidx.annotation.Nullable;

public class ClickableAreaImageView extends ImageView {

    Map< Rect, Runnable > areaEffects = new HashMap<>();

    public ClickableAreaImageView( Context context ) {
        super( context );
    }

    public ClickableAreaImageView( Context context, @Nullable AttributeSet attrs ) {
        super( context, attrs );
    }

    public ClickableAreaImageView( Context context, @Nullable AttributeSet attrs, int defStyleAttr ) {
        super( context, attrs, defStyleAttr );
    }

    public ClickableAreaImageView( Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes ) {
        super( context, attrs, defStyleAttr, defStyleRes );
    }

    public void addAreaEffect( Rect target, Runnable event ) {
        areaEffects.put( target, event );
    }

    @Override
    public boolean onTouchEvent( MotionEvent event ) {
        if ( event.getAction() == MotionEvent.ACTION_DOWN ) {
            int x = ( int ) event.getX();
            int y = ( int ) event.getY();

            for ( Map.Entry< Rect, Runnable > entry : areaEffects.entrySet() ) {
                Rect rect = entry.getKey();
                if ( rect.contains( x, y ) ) entry.getValue().run();
            }
        }

        return super.onTouchEvent( event );
    }
}

In your XML or Java, use it like a normal ImageView.

Then, you have to register the click actions. I wanted to go to specific activities, which looked like this in Kotlin:

class MenuSelection : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_menu_selection)
        val areaImage = findViewById<ClickableAreaImageView>(R.id.menuSelectionImage)

        areaImage.addAreaEffect(Rect(530, 100, 1080, 800), makeRunnable(SettingsActivity::class.java))
        areaImage.addAreaEffect(Rect(30, 80, 430, 700), makeRunnable(StatsActivity::class.java))
    }

    private fun makeRunnable(activity: Class<*>): Runnable {
        return Runnable {
            val intent = Intent(this, activity)
            startActivity(intent)
            overridePendingTransition(R.anim.slide_in_from_bottom, R.anim.slide_out_to_top);
        }
    }
}

In general, use it by defining rectangles, a Runnable to execute when the rectangle is clicked and then add them to the view via ClickableAreaImageView.addAreaEffect

Answer 5

Improving @sealz reply, here my answer:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_centerInParent="true"
        android:layout_alignTop="@+id/mail"
        android:layout_alignBottom="@+id/mail"
        >
        <Button
            android:id="@+id/leftMail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@android:color/transparent"
            />
        <Button
            android:id="@+id/rightMail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@android:color/transparent"    
            />
        </LinearLayout>
    <ImageView 
       android:id="@+id/mail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/mail1600x600"
        android:layout_centerInParent="true"
        />
</RelativeLayout>