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:

publicclassMarkableImageViewextendsImageView {

    ArrayList<Marker> mMarkers;

    // ...@OverrideprotectedvoidonDraw(Canvas canvas) {
        super.onDraw(canvas);

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

    @OverridepublicbooleanonTouchEvent(MotionEvent e) {
        if (e.getAction() == MotionEvent.ACTION_DOWN) {
            mMarkers.add(newMarker(e.getX(), e.getY()));
            invalidate();
            returntrue;
        }
        returnfalse;
    }

    publicvoidreset() {
        mMarkers.clear();
        invalidate();
    }

    // this class will be visible only inside MarkableImageViewprivateclassMarker {
        publicint x;
        publicint y;
        // you might want to add other properties, for example// if you need to have different types of markerspublicMarker(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 toppublic ImageView ptable;
Drawable[] layers;

Then

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

Then

ptable.setOnTouchListener(newOnTouchListener() {

        @OverridepublicbooleanonTouch(View v, MotionEvent event) {
            Stringtext="Click X:"+ String.valueOf(event.getX())+ " Y:" + String.valueOf(event.getY());


            //Dokunulan yere bir işaret oluştur.Bitmapmark= Bitmap.createBitmap(600, 400,Bitmap.Config.ARGB_8888);
            Canvasca=newCanvas(mark);
            Paintpa=newPaint();
            pa.setStyle(Paint.Style.STROKE);
            pa.setAntiAlias(true);
            //pa.setStrokeCap(Paint.Cap.ROUND);
            pa.setStrokeWidth((float)3);
            pa.setARGB(251, 20, 20, 20);
            floatcx= event.getX() + 10 + (8*event.getX()/100);
            floatcy= event.getY() + 10 + (6*event.getY()/100);

            ca.drawCircle(cx, cy, 13, pa);
            BitmapDrawablebmp=newBitmapDrawable(getResources(), mark);
            layers[1] = (Drawable)bmp;
            LayerDrawableldr=newLayerDrawable(layers);
            ptable.setImageDrawable(ldr);



            returntrue;
        }

    });

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

    returntrue;
}  

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

classMarkerOverlayextendsOverlay
{
    private GeoPoint p;
    private Projection projection; 

    publicMarkerOverlay(GeoPoint p)
    {
        this.p = p;
    }

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

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

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

        returntrue;   
     }



 }

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