Zoom and drag an image in Android

Question

I need to drag and zoom. Here is my code ...

//instance variables Matrix matrix = new Matrix(); Matrix savedMatrix = new Matrix(); static final int NONE = 0; static final int DRAG = 1; static final int ZOOM = 2; int mode = NONE; PointF start = new PointF(); PointF mid = new PointF(); float oldDist = 1f; 

// OnTouchListener for viewing images

 OnTouchListener touchAction = new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { ImageView i = (ImageView)v; dragAndZoom(i, event); return true; } }; 

// perform scaling and scaling operations

 private void dragAndZoom(View v, MotionEvent event) { ImageView view = (ImageView) v; view.setScaleType(ImageView.ScaleType.MATRIX); float scale; // Handle touch events here... switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: // first finger down only savedMatrix.set(matrix); start.set(event.getX(), event.getY()); mode = DRAG; break; case MotionEvent.ACTION_UP: // first finger lifted case MotionEvent.ACTION_POINTER_UP: // second finger lifted mode = NONE; break; case MotionEvent.ACTION_POINTER_DOWN: // first and second finger down oldDist = spacing(event); if (oldDist > 5f) { savedMatrix.set(matrix); midPoint(mid, event); mode = ZOOM; } break; case MotionEvent.ACTION_MOVE: if (mode == DRAG) { matrix.set(savedMatrix); matrix.postTranslate(event.getX() - start.x, event.getY() - start.y); } else if (mode == ZOOM) { // pinch zooming float newDist = spacing(event); if (newDist > 5f) { matrix.set(savedMatrix); scale = newDist / oldDist; matrix.postScale(scale, scale, mid.x, mid.y); } } break; } view.setImageMatrix(matrix); // display the transformation on screen } private float spacing(MotionEvent event) { float x = event.getX(0) - event.getX(1); float y = event.getY(0) - event.getY(1); return FloatMath.sqrt(x * x + y * y); } private void midPoint(PointF point, MotionEvent event) { float x = event.getX(0) + event.getX(1); float y = event.getY(0) + event.getY(1); point.set(x / 2, y / 2); } 

Everything is working fine. but sometimes the image goes beyond the borders of the screen to the touch. How can I save an image in the user interface all the time? Please help me. Thanks in advance.

Answer 1

 private void limitDrag(Matrix m, ImageView view) { float[] values = new float[9]; m.getValues(values); float transX = values[Matrix.MTRANS_X]; float transY = values[Matrix.MTRANS_Y]; float scaleX = values[Matrix.MSCALE_X]; float scaleY = values[Matrix.MSCALE_Y]; Rect bounds = view.getDrawable().getBounds(); int viewWidth = getResources().getDisplayMetrics().widthPixels; int viewHeight = getResources().getDisplayMetrics().heightPixels; if(viewHeight<=480) { _y_up=0; } if(viewHeight>480&&viewHeight<980) { _y_up=140; } int width = bounds.right - bounds.left; int height = bounds.bottom - bounds.top; int __width=width; int __height=height; width = viewWidth / 2; height = viewHeight / 2; //height = 200 ; float minX = (-width) ;//* scaleX; float minY = (-height) ;//* scaleY; if ((transX) > (viewWidth)) { //_x_left transX = viewWidth; } else if (transX < minX) { transX = minX; } if ((-transX) > (viewWidth)) { // _x_right transX = -(viewWidth); } else if (-transX < minX) { transX = -(minX+30); } if ((transY) > (viewHeight)) { // _y_up transY =( viewHeight); } else if (transY < minY) { transY = (minY+_y_up); } if ((-transY) > (viewHeight)) { // _y_down transY = -(viewHeight); } else if (-transY < minY) { transY = -(minY+170); } values[Matrix.MTRANS_X] = transX; values[Matrix.MTRANS_Y] = transY; m.setValues(values); } 

Call this function limitDrag (matrix, view) just above your view.setImageMatrix (matrix) to restrict movement within the screen Note: - IM does some ugly hard-coded calculations inside it. You can change it according to your needs. Just run it and check, remember that this is not the best solution, but something is better than nothing. Good coding!