Scale bitmap from center point in Android for zoom in effect

Question

I am trying to scale up a bitmap from its center point in Android to achieve a zoom effect, but without success. The code I have is:

float scaleWidth = ((float) width + (i * 5)) / width;
float scaleHeight = ((float) height + (i * 5)) / height;

Matrix matrix = new Matrix();
matrix.setScale(scaleWidth, scaleHeight, scaleWidth / 2, scaleHeight / 2);
Bitmap rescaledBitmap = Bitmap.createBitmap(src, 0, 0, width, height, matrix, true);

result.add(rescaledBitmap);

I am setting the pivot point by dividing the dimensions by 2, but the effect is just that the image is scaled from 0, 0 as coordinates instead of from the center. What I want is for the image to be a fixed size, but scaled up from its center point (thus cropping the image).

Wouldn't be easier to use createScaledBitmap of Bitmap class? http://developer.android.com/reference/android/graphics/Bitmap.html#createScaledBitmap(android.graphics.Bitmap, int, int, boolean) — Pawel Cala, Sep 25 '13 at 14:28
@Pawel that would rescale the image size, I just want to zoom in while using the same image size. My question wasn't very clear, will update it. — n83, Sep 25 '13 at 15:47

score 3 · Answer 1 · answered May 10 '14 at 05:03

I'm going to offer an alternative solution using a property animator since that is a cleaner solution I think.

SomeLayout.xml (The key here is that the ViewGroup is the same size as the View, so it will clip as you requested (like google maps zoom in))

<FrameLayout
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center">
    <View
    android:id="@+id/zoom"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/myCoolImage"
    />
</FrameLayout>

Code: (the 1,2,1 will start at a scale of 1x then 2x then back to 1x, it takes a list of values)

final View view = findViewById(R.id.zoom);
view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            final ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.SCALE_X, 1, 2, 1)
                    .ofFloat(view, View.SCALE_Y, 1, 2, 1)
                    .setDuration(5000);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            animator.start();
        }
    });

So with this version image if you had a zoom +, and zoom - views with onClickListeners, you could basically simulate the controlled zooming as long as you know what values you want to zoom with.

Also as previously noted the ViewGroup being the same size as the internal view will force the animation to clip to it's parent bounds instead of being completely visible.

References:

Google Android ObjectAnimator

score 3 · Answer 2 · answered Feb 15 '19 at 10:00

Sure this will come late, but for all looking after me:

double scaleFactor = 0.75; // Set this to the zoom factor
int widthOffset = (int) ((1 - scaleFactor)/2 * bmp.getWidth());
int heightOffset = (int) ((1 - scaleFactor)/2 * bmp.getHeight());
int numWidthPixels = bmp.getWidth() - 2 * widthOffset;
int numHeightPixels = bmp.getHeight() - 2 * heightOffset;
Bitmap rescaledBitmap = Bitmap.createBitmap(bmp, widthOffset, heightOffset, numWidthPixels, numHeightPixels, null, true);

This example will zoom in on the center of a bitmap and with a factor of 25%.

score 0 · Answer 3 · answered Sep 25 '13 at 14:31

0

The second and third arguments in createBitmap take the x/y coordinates of the top left corner. You're sending 0,0, so if I understand correctly...

The image is correctly scaled, but the image is not centered, right?

To center it, you need to find the correct (x,y) point for the top left corner. This should be 1/4th the original width/height.

So...

Bitmap rescaledBitmap = Bitmap.createBitmap(src, (width/2), (height/2), width, height, matrix, true);

should work.

answered Sep 25 '13 at 14:31

nhgrif

61,578
25
134
173

Thanks but that has no effect on the actual coordinates where the zoom should take place. Imagine zooming an image with the magnifying glass pointed at the top left corner instead of the center of the image, that's the problem I'm facing. – n83 Sep 25 '13 at 15:28
Okay, then I seem to have misunderstood your original question. What you're trying to accomplish is something similar to when you push the zoom-in button on Google Maps, for example. So, the space on the screen does not change, but we zoom in on the center half of the total image and what was once just the center half of the image now takes up the space the original image was taking up. Am I understanding correctly now? – nhgrif Sep 25 '13 at 15:33
Yep that's it! The image dimensions are always the same width and height, but the image itself is zoomed in on its center point. – n83 Sep 25 '13 at 15:44

Scale bitmap from center point in Android for zoom in effect

3 Answers3

Linked