How can I zoom into an ImageView without it jumping slightly elsewhere? (Android)

Question

I'm trying to create an application in which the user can drag and zoom an ImageView. But I'm experiencing problems with the following code.

When the scaleFactor is not 1 and the second finger gets down it is translated a little to somewhere else. I don't know where this translate comes from...

Here's the complete class:

package me.miutaltbati.ramaview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.widget.ImageView;

import static android.view.MotionEvent.INVALID_POINTER_ID;

public class RamaView extends ImageView {
    private Context context;
    private Matrix matrix = new Matrix();
    private Matrix translateMatrix = new Matrix();
    private Matrix scaleMatrix = new Matrix();

    // Properties coming from outside:
    private int drawableLayoutId;
    private int width;
    private int height;

    private static float MIN_ZOOM = 0.33333F;
    private static float MAX_ZOOM = 5F;

    private PointF mLastTouch = new PointF(0, 0);
    private PointF mLastFocus = new PointF(0, 0);
    private PointF mLastPivot = new PointF(0, 0);
    private float mPosX = 0F;
    private float mPosY = 0F;

    public float scaleFactor = 1F;
    private int mActivePointerId = INVALID_POINTER_ID;

    private Paint paint;
    private Bitmap bitmapLayout;

    private OnFactorChangedListener mListener;
    private ScaleGestureDetector mScaleDetector;

    public RamaView(Context context) {
        super(context);
        initializeInConstructor(context);
    }

    public RamaView(Context context, @android.support.annotation.Nullable AttributeSet attrs) {
        super(context, attrs);
        initializeInConstructor(context);
    }

    public RamaView(Context context, @android.support.annotation.Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initializeInConstructor(context);
    }

    public void initializeInConstructor(Context context) {
        this.context = context;
        paint = new Paint();
        mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
        mScaleDetector.setQuickScaleEnabled(false);

        setScaleType(ScaleType.MATRIX);
    }

    public Bitmap decodeSampledBitmap() {
        // First decode with inJustDecodeBounds=true to check dimensions
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inMutable = true;
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(), drawableLayoutId, options);

        // Calculate inSampleSize
        options.inSampleSize = Util.calculateInSampleSize(options, width, height); // e.g.: 4, 8

        // Decode bitmap with inSampleSize set
        options.inJustDecodeBounds = false;
        return BitmapFactory.decodeResource(getResources(), drawableLayoutId, options);
    }

    public void setDrawable(int drawableId) {
        drawableLayoutId = drawableId;
    }

    public void setSize(int width, int height) {
        this.width = width;
        this.height = height;

        bitmapLayout = decodeSampledBitmap();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mScaleDetector.onTouchEvent(event);

        int action = event.getActionMasked();

        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                int pointerIndex = event.getActionIndex();
                float x = event.getX(pointerIndex);
                float y = event.getY(pointerIndex);

                // Remember where we started (for dragging)
                mLastTouch = new PointF(x, y);

                // Save the ID of this pointer (for dragging)
                mActivePointerId = event.getPointerId(0);
            }

            case MotionEvent.ACTION_POINTER_DOWN: {
                if (event.getPointerCount() == 2) {
                    mLastFocus = new PointF(mScaleDetector.getFocusX(), mScaleDetector.getFocusY());
                }
            }

            case MotionEvent.ACTION_MOVE: {
                // Find the index of the active pointer and fetch its position
                int pointerIndex = event.findPointerIndex(mActivePointerId);

                float x = event.getX(pointerIndex);
                float y = event.getY(pointerIndex);

                // Calculate the distance moved
                float dx = 0;
                float dy = 0;

                if (event.getPointerCount() == 1) {
                    // Calculate the distance moved
                    dx = x - mLastTouch.x;
                    dy = y - mLastTouch.y;

                    matrix.setScale(scaleFactor, scaleFactor, mLastPivot.x, mLastPivot.y);

                    // Remember this touch position for the next move event
                    mLastTouch = new PointF(x, y);
                } else if (event.getPointerCount() == 2) {
                    // Calculate the distance moved
                    dx = mScaleDetector.getFocusX() - mLastFocus.x;
                    dy = mScaleDetector.getFocusY() - mLastFocus.y;

                    matrix.setScale(scaleFactor, scaleFactor, -mPosX + mScaleDetector.getFocusX(), -mPosY + mScaleDetector.getFocusY());

                    mLastPivot = new PointF(-mPosX + mScaleDetector.getFocusX(), -mPosY + mScaleDetector.getFocusY());
                    mLastFocus = new PointF(mScaleDetector.getFocusX(), mScaleDetector.getFocusY());
                }

                mPosX += dx;
                mPosY += dy;

                matrix.postTranslate(mPosX, mPosY);

                break;
            }

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL: {
                mActivePointerId = INVALID_POINTER_ID;
                break;
            }

            case MotionEvent.ACTION_POINTER_UP: {
                final int pointerIndex = event.getActionIndex();
                final int pointerId = event.getPointerId(pointerIndex);

                if (pointerId == mActivePointerId) {
                    // This was our active pointer going up. Choose a new
                    // active pointer and adjust accordingly.
                    final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                    mLastTouch = new PointF(event.getX(newPointerIndex), event.getY(newPointerIndex));
                    mActivePointerId = event.getPointerId(newPointerIndex);
                } else {
                    final int tempPointerIndex = event.findPointerIndex(mActivePointerId);
                    mLastTouch = new PointF(event.getX(tempPointerIndex), event.getY(tempPointerIndex));
                }

                break;
            }
        }

        invalidate();
        return true;
    }

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

        canvas.setMatrix(matrix);
        canvas.drawColor(Color.BLACK);
        canvas.drawBitmap(bitmapLayout, 0, 0, paint);

        canvas.restore();
    }

    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            scaleFactor *= detector.getScaleFactor();
            scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));

            return true;
        }
    }
}

I think the problem is on this line:

matrix.setScale(scaleFactor, scaleFactor, -mPosX + mScaleDetector.getFocusX(), -mPosY + mScaleDetector.getFocusY());

I tried a lot of things but I couldn't get it to work properly.

UPDATE:

Here's how you can init a RamaView instance:

Main activity's onCreate:

rvRamaView = findViewById(R.id.rvRamaView);

final int[] rvSize = new int[2];
ViewTreeObserver vto = rvRamaView.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    @Override
    public boolean onPreDraw() {
        rvRamaView.getViewTreeObserver().removeOnPreDrawListener(this);
        rvSize[0] = rvRamaView.getMeasuredWidth();
        rvSize[1] = rvRamaView.getMeasuredHeight();

        rvRamaView.setSize(rvSize[0], rvSize[1]);
        return true;
    }
});

rvRamaView.setDrawable(R.drawable.original_jpg);

Answer 1

It would be better to use the matrix to accumulate changes rather than try to recalculate the transformations yourself. You can do this with the matrix post... and pre... methods and stay away from the set... methods which reset the matrix.

Here is a rework of the RamaView class which was largely on target except for the specific handling of the matrix as noted above. The mods are to the onTouchEvent() method. The video is output of the code working in a sample app.

RamaView.java

public class RamaView extends ImageView {
    private final Matrix matrix = new Matrix();

    // Properties coming from outside:
    private int drawableLayoutId;
    private int width;
    private int height;

    private static final float MIN_ZOOM = 0.33333F;
    private static final float MAX_ZOOM = 5F;

    private PointF mLastTouch = new PointF(0, 0);
    private PointF mLastFocus = new PointF(0, 0);

    public float scaleFactor = 1F;
    private int mActivePointerId = INVALID_POINTER_ID;

    private Paint paint;
    private Bitmap bitmapLayout;

    //    private OnFactorChangedListener mListener;
    private ScaleGestureDetector mScaleDetector;

    public RamaView(Context context) {
        super(context);
        initializeInConstructor(context);
    }

    public RamaView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initializeInConstructor(context);
    }

    public RamaView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initializeInConstructor(context);
    }

    public void initializeInConstructor(Context context) {
        paint = new Paint();
        mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
        mScaleDetector.setQuickScaleEnabled(false);

        setScaleType(ScaleType.MATRIX);
    }

    public Bitmap decodeSampledBitmap() {
        // First decode with inJustDecodeBounds=true to check dimensions
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inMutable = true;
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(), drawableLayoutId, options);

        options.inSampleSize = Util.calculateInSampleSize(options, width, height); // e.g.: 4, 8

        // Decode bitmap with inSampleSize set
        options.inJustDecodeBounds = false;
        return BitmapFactory.decodeResource(getResources(), drawableLayoutId, options);
    }

    public void setDrawable(int drawableId) {
        drawableLayoutId = drawableId;
    }

    public void setSize(int width, int height) {
        this.width = width;
        this.height = height;

        bitmapLayout = decodeSampledBitmap();
    }

    private float mLastScaleFactor = 1.0f;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mScaleDetector.onTouchEvent(event);

        int action = event.getActionMasked();

        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                int pointerIndex = event.getActionIndex();
                float x = event.getX(pointerIndex);
                float y = event.getY(pointerIndex);

                // Remember where we started (for dragging)
                mLastTouch = new PointF(x, y);

                // Save the ID of this pointer (for dragging)
                mActivePointerId = event.getPointerId(0);
            }

            case MotionEvent.ACTION_POINTER_DOWN: {
                if (event.getPointerCount() == 2) {
                    mLastFocus = new PointF(mScaleDetector.getFocusX(), mScaleDetector.getFocusY());
                }
            }

            case MotionEvent.ACTION_MOVE: {
                // Find the index of the active pointer and fetch its position
                int pointerIndex = event.findPointerIndex(mActivePointerId);

                float x = event.getX(pointerIndex);
                float y = event.getY(pointerIndex);

                // Calculate the distance moved
                float dx = 0;
                float dy = 0;

                if (event.getPointerCount() == 1) {
                    // Calculate the distance moved
                    dx = x - mLastTouch.x;
                    dy = y - mLastTouch.y;

                    // Remember this touch position for the next move event
                    mLastTouch = new PointF(x, y);
                } else if (event.getPointerCount() == 2) {
                    // Calculate the distance moved
                    float focusX = mScaleDetector.getFocusX();
                    float focusY = mScaleDetector.getFocusY();
                    dx = focusX - mLastFocus.x;
                    dy = focusY - mLastFocus.y;

                    // Since we are accumating translation/scaling, we are just adding to
                    // the previous scale.
                    matrix.postScale(scaleFactor/mLastScaleFactor, scaleFactor/mLastScaleFactor, focusX, focusY);
                    mLastScaleFactor = scaleFactor;

                    mLastFocus = new PointF(focusX, focusY);
                }

                // Translation is cumulative.
                matrix.postTranslate(dx, dy);

                break;
            }

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL: {
                mActivePointerId = INVALID_POINTER_ID;
                break;
            }

            case MotionEvent.ACTION_POINTER_UP: {
                final int pointerIndex = event.getActionIndex();
                final int pointerId = event.getPointerId(pointerIndex);

                if (pointerId == mActivePointerId) {
                    // This was our active pointer going up. Choose a new
                    // active pointer and adjust accordingly.
                    final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                    mLastTouch = new PointF(event.getX(newPointerIndex), event.getY(newPointerIndex));
                    mActivePointerId = event.getPointerId(newPointerIndex);
                } else {
                    final int tempPointerIndex = event.findPointerIndex(mActivePointerId);
                    mLastTouch = new PointF(event.getX(tempPointerIndex), event.getY(tempPointerIndex));
                }

                break;
            }
        }

        invalidate();
        return true;
    }

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

        canvas.setMatrix(matrix);
        canvas.drawColor(Color.BLACK);
        canvas.drawBitmap(bitmapLayout, 0, 0, paint);

        canvas.restore();
    }

    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            scaleFactor *= detector.getScaleFactor();
            scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));

            return true;
        }
    }
}