How to display cross mark in images on touch event?

Question

There is an image in my project. When the user touches any place in the image, he should be marked with a cross. We also need to clear this cross at the touch of a button. I managed to display the image. What do I need to do in the ontouchlistener() function to display a cross point? Please, help.

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

Answer 2

This code works 100%. If you still have questions, 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 turn out.

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

Answer 3

I am also looking for a solution to this. I need to make a mark on the image where the user is touching. I am also going to remotely control a device with this information. What I found as a solution, which I will present below. I ran into a problem as dpi screens and devices change this marking operation. I am trying to improve the method. But also, perhaps this is useful for someone.

Here he is:

1) Method: First create an image using Gimp or Photoshop (or ...). Place the image in the layout. Place the image in this image with the original size. (this is the weak point number 1). For onTouchEvent, add the following code. What code will do is create 2 drawings. Create 2 layers. The 1st layer is the image (above), and the second layer is the sign. Then place the label where the user touches. (this is the weak point number 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 works, but only works with a specific screen size and pixel density. I am going to improve this.

Answer 4

Use 2 images with two ImageViews - Without a cross-label say no_cross.png - image_view1. - Another one with a cross, say with_cross.png - image_view2.

Put them in one place in xml. The initial visibility of image_view2 (containsig with_cross.png) is invisible.

 android:visibilty="gone" 

OnImage touch makes the visibility with_cross.png visible and no_cross.png invisible.

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

Pressing the On Button does the opposite.

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