How do i make an image to move when i touch it?

Question

I have an image bigger than the screen and it would look horrible if i shrink it so i need a way to move the image when i touch it, like when you use the hand to move the images on PS. I know i need motionEvents and setOnTouchListener but i'm not quite sure about what should do i do next for a nice movement. Do i need to move the image margins and link them to X/Y motion events? :

I already checked the android explanation about motionEvents so i already know how to get the information when X/Y increase/decrease. The layout is a relative layout with other content.

What's the best way to achieve this? Thanks

Answer 1

First, change the scaletype of your ImageView in your xml layout:

android:scaleType="matrix"

Next, add an OnTouchListener in your Fragment or Activity:

imageView.setOnTouchListener(this);

Let your Fragment or Activity implement View.OnTouchListener and implement this method:

public boolean onTouch(View v, MotionEvent event)
{
    switch (event.getAction() & MotionEvent.ACTION_MASK)
    {
        case MotionEvent.ACTION_DOWN:
            savedMatrix.set(matrix);
            start.set(event.getX(), event.getY());
            break;

        case MotionEvent.ACTION_MOVE:
            matrix.set(savedMatrix);
            float dx = event.getX() - start.x;
            float dy = event.getY() - start.y;
            matrix.postTranslate(dx, dy);
            break;
    }

    imageView.setImageMatrix(matrix);
    return true;
}

savedMatrix, matrix and start should be defined in your Fragment or Activity:

private Matrix matrix = new Matrix();
private Matrix savedMatrix = new Matrix();
private PointF start = new PointF();

Now you can move the image inside the ImageView.