Pinch-zoomable Android frame layout

ZoomLayout.java

package au.id.alexn;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.FrameLayout;

/**
 * Layout that provides pinch-zooming of content. This view should have exactly one child
 * view containing the content.
 */
public class ZoomLayout extends FrameLayout implements ScaleGestureDetector.OnScaleGestureListener {

  private enum Mode {
    NONE,
    DRAG,
    ZOOM
  }

  private static final String TAG = "ZoomLayout";
  private static final float MIN_ZOOM = 1.0f;
  private static final float MAX_ZOOM = 4.0f;

  private Mode mode = Mode.NONE;
  private float scale = 1.0f;
  private float lastScaleFactor = 0f;

  // Where the finger first  touches the screen
  private float startX = 0f;
  private float startY = 0f;

  // How much to translate the canvas
  private float dx = 0f;
  private float dy = 0f;
  private float prevDx = 0f;
  private float prevDy = 0f;

  public ZoomLayout(Context context) {
    super(context);
    init(context);
  }

  public ZoomLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context);
  }

  public ZoomLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context);
  }

  private void init(Context context) {
    final ScaleGestureDetector scaleDetector = new ScaleGestureDetector(context, this);
    this.setOnTouchListener(new View.OnTouchListener() {
      @Override
      public boolean onTouch(View view, MotionEvent motionEvent) {
        switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
          case MotionEvent.ACTION_DOWN:
            Log.i(TAG, "DOWN");
            if (scale > MIN_ZOOM) {
              mode = Mode.DRAG;
              startX = motionEvent.getX() - prevDx;
              startY = motionEvent.getY() - prevDy;
            }
            break;
          case MotionEvent.ACTION_MOVE:
            if (mode == Mode.DRAG) {
              dx = motionEvent.getX() - startX;
              dy = motionEvent.getY() - startY;
            }
            break;
          case MotionEvent.ACTION_POINTER_DOWN:
            mode = Mode.ZOOM;
            break;
          case MotionEvent.ACTION_POINTER_UP:
            mode = Mode.DRAG;
            break;
          case MotionEvent.ACTION_UP:
            Log.i(TAG, "UP");
            mode = Mode.NONE;
            prevDx = dx;
            prevDy = dy;
            break;
        }
        scaleDetector.onTouchEvent(motionEvent);

        if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
          getParent().requestDisallowInterceptTouchEvent(true);
          float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
          float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
          dx = Math.min(Math.max(dx, -maxDx), maxDx);
          dy = Math.min(Math.max(dy, -maxDy), maxDy);
          Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
            + ", max " + maxDx);
          applyScaleAndTranslation();
        }

        return true;
      }
    });
  }

  // ScaleGestureDetector

  @Override
  public boolean onScaleBegin(ScaleGestureDetector scaleDetector) {
    Log.i(TAG, "onScaleBegin");
    return true;
  }

  @Override
  public boolean onScale(ScaleGestureDetector scaleDetector) {
    float scaleFactor = scaleDetector.getScaleFactor();
    Log.i(TAG, "onScale" + scaleFactor);
    if (lastScaleFactor == 0 || (Math.signum(scaleFactor) == Math.signum(lastScaleFactor))) {
      scale *= scaleFactor;
      scale = Math.max(MIN_ZOOM, Math.min(scale, MAX_ZOOM));
      lastScaleFactor = scaleFactor;
    } else {
      lastScaleFactor = 0;
    }
    return true;
  }

  @Override
  public void onScaleEnd(ScaleGestureDetector scaleDetector) {
    Log.i(TAG, "onScaleEnd");
  }

  private void applyScaleAndTranslation() {
    child().setScaleX(scale);
    child().setScaleY(scale);
    child().setTranslationX(dx);
    child().setTranslationY(dy);
  }

  private View child() {
    return getChildAt(0);
  }
}

i have added table layout in this ZoomLayout class, now i want to perform click or touch event for custom view, and zoom in-out won't stop working, please help

Any one knows how to add click event on child views of this "ZoomLayout" ?

@Chirag117
In the ZoomLayout, change

FROM
case MotionEvent.ACTION_DOWN:
Log.i(TAG, "DOWN");
if (scale > MIN_ZOOM) {
mode = Mode.DRAG;
startX = motionEvent.getX() - prevDx;
startY = motionEvent.getY() - prevDy;
}
break;

TO

case MotionEvent.ACTION_DOWN:
Log.i(TAG, "DOWN");
if (scale > MIN_ZOOM) {
mode = Mode.DRAG;
startX = motionEvent.getX() - prevDx;
startY = motionEvent.getY() - prevDy;
}else{
//write your code here
}
break;

To drag without having to zoom

You have to change

 case MotionEvent.ACTION_DOWN:
                        Log.i(TAG, "DOWN");
                        if (scale > MIN_ZOOM) {
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        }
                        break;

To

                        Log.i(TAG, "DOWN");
                        // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                        /*if (scale > MIN_ZOOM) {*/
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        /*}*/
                        break;

And

                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

To

if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    /*dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);*/
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

Full Code

public boolean onTouch(View view, MotionEvent motionEvent) {
                switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
                    case MotionEvent.ACTION_DOWN:
                        Log.i(TAG, "DOWN");
                        // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                        /*if (scale > MIN_ZOOM) {*/
                            Log.e("DOWN","Drag");
                            mode = Mode.DRAG;
                            startX = motionEvent.getX() - prevDx;
                            startY = motionEvent.getY() - prevDy;
                        /*}*/
                        break;
                    case MotionEvent.ACTION_MOVE:
                        if (mode == Mode.DRAG) {
                            Log.e("MOVE","Drag");
                            dx = motionEvent.getX() - startX;
                            dy = motionEvent.getY() - startY;
                        }
                        break;
                    case MotionEvent.ACTION_POINTER_DOWN:
                        mode = Mode.ZOOM;
                        break;
                    // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                    /*case MotionEvent.ACTION_POINTER_UP:mode = Mode.DRAG;*/
                    case MotionEvent.ACTION_POINTER_UP: mode = Mode.NONE;
                        Log.e("ACTION_POINTER_UP","Drag");
                        break;

                    case MotionEvent.ACTION_UP:
                        Log.i(TAG, "UP");
                        Log.e("ACTION_UP","None");
                        mode = Mode.NONE;
                        prevDx = dx;
                        prevDy = dy;
                        break;
                }
                scaleDetector.onTouchEvent(motionEvent);

                if ((mode == Mode.DRAG && scale >= MIN_ZOOM) || mode == Mode.ZOOM) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    float maxDx = (child().getWidth() - (child().getWidth() / scale)) / 2 * scale;
                    float maxDy = (child().getHeight() - (child().getHeight() / scale))/ 2 * scale;
                    // TODO ORGINAL CODE UNCOMMENT BELOW CODE
                    /*dx = Math.min(Math.max(dx, -maxDx), maxDx);
                    dy = Math.min(Math.max(dy, -maxDy), maxDy);*/
                    Log.i(TAG, "Width: " + child().getWidth() + ", scale " + scale + ", dx " + dx
                            + ", max " + maxDx);
                    applyScaleAndTranslation();
                }

                return true;
            }

How to set boundaries for drag?

Pan is compulsorily required when we zoom. Both functions are provided in a single class. Great tutorial. Thank you anorth for the post.

not working below android 7.0

zooming and panning is not working with mouse. how can i do that?

I am facing a problem if the zoom layout includes a landscape image. It will leave space at the top and bottom. When I zoom and drag the image. It will be outside the top or bottom boundary. How to calculate the correct "maxDy" in this case?

It works perfectly, thank you very much!

You're welcome

…

On Fri, Sep 29, 2023, 3:25 PM AlexEkaterinin ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ It works perfectly, thank you very much! — Reply to this email directly, view it on GitHub <https://gist.github.com/anorth/9845602#gistcomment-4708443> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALMDZGOXKEOSREMZJE2CV63X43K35BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFU44TQNBVGYYDFJ3UOJUWOZ3FOKTGG4TFMF2GK> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

How can we reset the zoom?

Hi how can we achieve the focus zoom in this code? I mean when ever we zoom the image it always zoom from center. If we want to zoom and see a specific part of image it doesn't work. I try making use of "getFocusX() & getFocusY()" but it is still not zooming on the focused position but always to centre.