How To Display Cross Mark In Images On Touch Event?

In my project there is an image. When the user touches any place in the image, it should be marked with a cross sign. Also we have to clear this cross on a button click. I managed

Solution 1:

I would create a custom ImageView, something like:

public class MarkableImageView extends ImageView {

    ArrayList<Marker> mMarkers;

    // ...

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        for(Marker m : mMarkers) {
            // draw the marker
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        if (e.getAction() == MotionEvent.ACTION_DOWN) {
            mMarkers.add(new Marker(e.getX(), e.getY()));
            invalidate();
            return true;
        }
        return false;
    }

    public void reset() {
        mMarkers.clear();
        invalidate();
    }

    // this class will be visible only inside MarkableImageView
    private class Marker {
        public int x;
        public int y;
        // you might want to add other properties, for example
        // if you need to have different types of markers

        public Marker(int x, int y) {
            this.x = x;
            this.y = y;
        }
    }
}

Solution 2:

I'm also looking for a solution to this. I need to make round mark on an image where user touches. I'm also going to remote control a device with this infomation. What i found as a solution i'll provide next. What I'm facing as a problem is as the dpi and device screens changes this marking operation needs calibration. I'm trying to improve the method. But also maybe it is useful for someone.

Here it is:

1) Method: First create image with a program like Gimp or photoshop (or ...) . In the layout, place an imageview. Put the image to that imageview with the original size. (this is the weak point #1). For the onTouchEvent add the following code. What code will do is create 2 drawables. Create 2 layers. 1st layer is the image(above) and second layer is the mark. Then place the mark where user touches. (this is the weak point #2).

2) Code:

// On the top
public ImageView ptable;
Drawable[] layers;

Then

//OnCreateView
ptable = (ImageView)rootView.findViewById(R.id.img_ptable);
layers = new Drawable[2];
layers[0] = r.getDrawable(R.drawable.pratik);
layers[1] = r.getDrawable(R.drawable.pratik);
LayerDrawable ldr = new LayerDrawable(layers);
ptable.setImageDrawable(ldr);

Then

ptable.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            String text = "Click X:"+ String.valueOf(event.getX())+ " Y:" + String.valueOf(event.getY());


            //Dokunulan yere bir işaret oluştur.
            Bitmap mark = Bitmap.createBitmap(600, 400,Bitmap.Config.ARGB_8888);
            Canvas ca = new Canvas(mark);
            Paint pa = new Paint();
            pa.setStyle(Paint.Style.STROKE);
            pa.setAntiAlias(true);
            //pa.setStrokeCap(Paint.Cap.ROUND);
            pa.setStrokeWidth((float)3);
            pa.setARGB(251, 20, 20, 20);
            float cx = event.getX() + 10 + (8*event.getX()/100);
            float cy = event.getY() + 10 + (6*event.getY()/100);

            ca.drawCircle(cx, cy, 13, pa);
            BitmapDrawable bmp = new BitmapDrawable(getResources(), mark);
            layers[1] = (Drawable)bmp;
            LayerDrawable ldr = new LayerDrawable(layers);
            ptable.setImageDrawable(ldr);



            return true;
        }

    });

This code is working but working correct only with a certain screen size and pixel density. I'm going to improve this.

Solution 3:

This code is working 100 %. If you have still any questions then you can contact me.

public boolean onTouchEvent(MotionEvent event, MapView mapView) 
{   
    if (event.getAction() == 1) 
    {                
            GeoPoint p = mapView.getProjection().fromPixels(
                (int) event.getX(),
                (int) event.getY());
                Toast.makeText(getBaseContext(), "lat and longtd is \n "+
                    p.getLatitudeE6() / 1E6 + "," + 
                    p.getLongitudeE6() /1E6 , 
                    Toast.LENGTH_LONG).show(); //
               mapView.getOverlays().add(new MarkerOverlay(p));
                mapView.invalidate();
    } 

    return true;
}  

and also define another(2nd) overlay class... where this event will get.

class MarkerOverlay extends Overlay
{
    private GeoPoint p;
    private Projection projection; 

    public MarkerOverlay(GeoPoint p)
    {
        this.p = p;
    }

    @Override
    public boolean draw(Canvas canvas, MapView mapView,boolean shadow, long when)
    {
        super.draw(canvas, mapView, shadow);                   

        //---translate the GeoPoint to screen pixels---
        Point screenPts = new Point();
        mapView.getProjection().toPixels(p, screenPts);

        //---add the marker---
        Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.pir_pictr);            
        canvas.drawBitmap(bmp, screenPts.x, screenPts.y-50, null);

        return true;   
     }



 }

Solution 4:

Use 2 images with two ImageView - One without cross mark say no_cross.png - image_view1. - Another is with cross mark say with_cross.png - image_view2.

Place them at same position in xml. Initially visibility of image_view2 (containig with_cross.png) is invisible.

android:visibilty="gone"

OnImage touch make visibility of with_cross.png to visible and no_cross.png to invisible.

setVisibility(View.GONE) for image_view1 setVisibility(View.VISIBLE) for image_view2

On Button touch do reverse.

setVisibility(View.VISIBLE) for image_view1 setVisibility(View.GONE) for image_view2