Android image viewer panning

The android image viewer panning tutorial describes how to implement panning on the image view when it is in zoomed in position.

There are a couple of issues which will be resolved in the following tutorial. Which are there are no limits to the panning length. And the previous coordinate of the last pan movement are not saved.

Get Code

The code can be found on github below

https://github.com/mobapptuts/android_image_viewer.git Tag

image-viewer-pan

or you can run this command

git clone https://github.com/mobapptuts/android_image_viewer.git –branch

image-viewer-pan

Code Samples

 Add a case statement to track the various action events

 switch(event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:

            break;
        case MotionEvent.ACTION_UP:

            break;
        case MotionEvent.ACTION_MOVE:

            break;
        case MotionEvent.ACTION_POINTER_DOWN:

            break;
    }
    mScaleGestureDetector.onTouchEvent(event);
    invalidate();
    requestLayout();

    return true;
}

 Add some variables to track whether we are panning or zooming

private final static int NONE = 0;
    private final static int PAN = 1;
    private final static int ZOOM = 2;
    private int mEventState;

Assign those variables to the correct action event

@Override
    public boolean onTouchEvent(MotionEvent event) {

        switch(event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                mode = DRAG;
                break;
            case MotionEvent.ACTION_UP:
                mode = NONE;
                break;
            case MotionEvent.ACTION_MOVE:

                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                mode = ZOOM;
                break;
        }
        mDetector.onTouchEvent(event);
        invalidate();
        requestLayout();

        return true;
    }

Add some variables to track the finger positions on the screen

Variables to track the X, Y coordinates when the finger first touches the screen

private float mStartX = 0;
    private float mStartY = 0;

Variables to track the movement on the screen

private float mTranslateX = 0;
    private float mTranslateY = 0;

 Assign the motion event values to the tracking variables

@Override
    public boolean onTouchEvent(MotionEvent event) {

        switch(event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                mEventState = PAN;
                mStartX = event.getX();
                mStartY = event.getY();
                break;
            case MotionEvent.ACTION_UP:
                mEventState = NONE;
                break;
            case MotionEvent.ACTION_MOVE:
                mTranslateX = event.getX() - mStartX;
                mTranslateY = event.getY() - mStartY;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                mEventState = ZOOM;
                break;
        }
        mScaleGestureDetector.onTouchEvent(event);
        if((mEventState == PAN && mScaleFactor != mMinZoom) || mEventState == ZOOM) {
            invalidate();
            requestLayout();
        }
        return true;
    }

 Move the view to the new coordinates on the bitmap

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

        canvas.save();
        canvas.scale(mScaleFactor, mScaleFactor);
        // canvas.scale(mScaleFactor, mScaleFactor, mScaleGestureDetector.getFocusX(), mScaleGestureDetector.getFocusY());
        canvas.translate(mTranslateX/mScaleFactor, mTranslateY/mScaleFactor);
        canvas.drawBitmap(mBitmap, 0, 0, null);
        canvas.restore();
    }

Android image viewer panning summary

In the android image viewer panning tutorial we learned how to setup the onTouchEvent method to monitor various finger actions.

The important motion events here are the action down event when the  finger first touches the display. And the action move event which calculates the movements across the display.

The calculated values are then passed into the canvas translate method.