Scaling image of ImageView while maintaining cente

Question

I have set a prescaled Bitmap as ImageView's source. Then I've read Matrix of an ImageView and shift Bitmap of an ImageView via matrix.postTranslate(shiftX, shiftY).

Now I want to zoom in / out and image while maintaining center of ImageView at the same point of Bitmap that was before scale.

If I try to zoom in an image with matrix.postScale(zoom, zoom), point that I want to maintain (blue dot) shifts to other place (purple dot).

I have tried several different ways to shift Bitmap back, but I cant get it to work correctly. I know initial Bitmap size, ImageView size, distances marked by doted line. Tried to calculate needed shift and use matrix.postTranslate(-zoomshiftX, -zoomshiftY) afterwards, but it doesn't shift correctly.

Even found out, that underlying Bitmap's pixel count doesnt change after matrix.postScale() function and tried matrix.postTranslate(-zoomshiftX/zoom, -zoomshiftY/zoom) - but still no luck.

How do I achieve such zoom?

Answer 1

Take a look at my question here regarding creating a zoomable ViewGroup. I've described code snippets from my end solution, and some of it might be helpful.

Extending RelativeLayout, and overriding dispatchDraw() to create a zoomable ViewGroup

Answer 2

Maybe this can be helpful:

If you got two fingers on screen, you can get the event of the two fingers and get the mid point:

PointF mid;
MotionEvent event;
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
mid.set(x / 2, y / 2);

Then you can set the scalation having the mid point in the center of the screen:

matrix.postScale(scale, scale, mid.x, mid.y);