Android ImageView Zooming Effect

Question

Currently I'm trying to develop an app, where user will be able to zoom in on images. But instead of pinch zoom, I need to make lens effect, which means that when user clicks on image and holds his finger on it for some time, right over it appears circle with zoomed in image. It looks like this:

I have looked at answers and links provided below and got it like this, but it's not working:

public class MainActivity extends Activity implements OnTouchListener{
ImageView takenPhoto;
static PointF zoomPos;
Paint shaderPaint;
BitmapShader mShader;
BitmapShader shader;
Bitmap bmp;
Bitmap mutableBitmap;
static Matrix matrix;
Canvas canvas;
static Paint mPaint;
static boolean zooming;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        File file = new File(Environment.getExternalStorageDirectory() + "/Pictures/boxes.jpg");

        String fileString = file.getPath();


        takenPhoto = (ImageView) findViewById(R.id.imageView1);

        bmp = BitmapFactory.decodeFile(fileString);
        mutableBitmap = bmp.copy(Bitmap.Config.ARGB_8888, true);
        takenPhoto.setImageBitmap(mutableBitmap);

        matrix = new Matrix();
        mShader = new BitmapShader(mutableBitmap, TileMode.CLAMP, TileMode.CLAMP); 
        mPaint = new Paint();
        mPaint.setShader(mShader);
        takenPhoto.setOnTouchListener(this);
    }

    private static class ZoomView extends View {



        public ZoomView(Context context) {
            super(context);
        }


         public boolean onTouch(View view, MotionEvent event) {


                int action = event.getAction(); 

                zoomPos.x = event.getX();
                zoomPos.y = event.getY();

                switch (action) { 
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                    zooming = true;
                    this.invalidate();
                    break; 
                case MotionEvent.ACTION_UP:   
                case MotionEvent.ACTION_CANCEL:
                    zooming = false;
                    this.invalidate();
                    break; 

                default: 
                    break; 
                }



             return true;
         }

         @Override
         protected void onDraw(Canvas canvas) {

             super.onDraw(canvas);

             if (zooming) {
                 matrix.reset();
                 matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
                 mPaint.getShader().setLocalMatrix(matrix);

                 canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
             }
         }





    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub
        return true;
    }


}

theres alot of info and ideas here http://stackoverflow.com/questions/7902867/how-to-draw-a-circle-after-zoom-in-android — Rob85, Jul 29 '15 at 20:37
this question is more or less a duplicate of: http://stackoverflow.com/questions/13864480/android-how-to-circular-zoom-magnify-part-of-image — craigts, Jul 29 '15 at 20:40
Anyone knows why it works as magnifying "brush effect" and not as lens? — Oleksandr Firsov, Jul 30 '15 at 20:21

score 2 · Answer 1 · edited May 23 '17 at 12:04

2

Well my guess would be :

1- You have to use a touch listener on the imageview
2- You have to have a canvas (where you draw the zoomed bitmap)

If you also want you could implement onDragListener to update the circular zoomed image while you drag your finger across the image.

I would say take a look at this link : Android - How to circular zoom/magnify part of image?

edited May 23 '17 at 12:04

Community

1
1

answered Jul 29 '15 at 20:41

Miriana Itani

865
9
25

Hey. I've worked around your answer, it has been very useful. I encountered problem though - nothing happens when I use the exact same code from approved answer from the link. Would you be so kind to check on the code, please? I have updated the question. – Oleksandr Firsov Jul 30 '15 at 21:08
Well check it and get back to you – Miriana Itani Jul 31 '15 at 20:56
For the issue of having the circle move with one finger you have to have onDragListener on the image to be zoomed itself but the effect would be moving a circle. For clearing the drawing you should call Canvas.drawColor(). This method will re-draw every pixel in the canvas to the color you want. This will make the circle disappear. – Miriana Itani Aug 02 '15 at 08:02
onTouchListener works fine. So there's no point in adding onDragListener. when I use Canvas.drawColor(0) or canvas.drawColor(Color.TRANSPARENT) nothing happens - there are still zoom spots – Oleksandr Firsov Aug 03 '15 at 07:06
Did you try adding invalidate? – Miriana Itani Aug 03 '15 at 18:51
Can you show me how are you doing the clearing of the canvas? – Miriana Itani Aug 04 '15 at 13:15
Update in first code snippet of [Update] section. I used canvas.drawColor() when I move and take away the finger – Oleksandr Firsov Aug 04 '15 at 14:53
in the action_up after drawing add the invalidate please – Miriana Itani Aug 04 '15 at 19:21
Sorry. Forgot to write it when was updating the code. Result is the same. – Oleksandr Firsov Aug 04 '15 at 20:31
This is so weird. try adding to action_up – Miriana Itani Aug 05 '15 at 07:33
I played with this. It doesn't work. Try to use it on your phone. I've got most of the code here, so you need to copy paste it. If your approach works for you - that will be weird – Oleksandr Firsov Aug 05 '15 at 07:36

score 2 · Accepted Answer · answered Aug 09 '15 at 18:15

After quite a few days of trying to solve this particular issue, I, thanks to those answers above and other sources, was able to write full working code.

To save time for all of you guys here it is. Copy-paste and edit it a bit to fit your goals.

First of all you need to edit your main activity - we're going to use custom ImageView

 <your.package.name.ZoomView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Then we'll edit MainActivity.java. Use ZoomView just like ImageView

ImageView takenPhoto;
takenPhoto = (ZoomView) findViewById(R.id.imageView1);

After, create ZoomView class and paste this:

public class ZoomView extends ImageView {

PointF zoomPos;
boolean zooming;
Matrix matrix;
BitmapShader mShader;
Paint mPaint;

public ZoomView(Context context) {
    super(context);
}

public ZoomView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public ZoomView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public boolean onTouchEvent(@NonNull MotionEvent event) {
    zoomPos = new PointF();
    zoomPos.x = event.getX();
    zoomPos.y = event.getY();

    matrix = new Matrix();
    mShader = new BitmapShader(MainActivity.mutableBitmap, TileMode.CLAMP, TileMode.CLAMP);
    mPaint = new Paint();
    mPaint.setShader(mShader);

    int action = event.getAction(); 

    switch (action) { 
    case MotionEvent.ACTION_DOWN:
    case MotionEvent.ACTION_MOVE:
        zooming = true;
        this.invalidate();
        break; 
    case MotionEvent.ACTION_UP: 
        zooming = false;
        this.invalidate();
        break;
    case MotionEvent.ACTION_CANCEL:
        zooming = false;
        this.invalidate();
        break; 

    default: 
        break; 
    }
 return true;
}

@Override
protected void onDraw(@NonNull Canvas canvas) {
    super.onDraw(canvas);
    if (zooming) {
        matrix.reset();
        matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
        mPaint.getShader().setLocalMatrix(matrix);
        canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
    }
}
}

Now you should have working magnifying effect.

but then the circle will be always under your finger. If you change its location by changing the zoomPos.x and zoomPos.y the bitmap will be zoomed in the wrong position. — user 007, May 07 '18 at 13:52

score 0 · Answer 3 · edited May 23 '17 at 12:04

One possible solution is grabbing the Canvas object from the view where your image in displayed. You will need to update the Canvas using various motion events.

Within handling these events, use functionality to draw only a portion of the image. The method listed is a part of the Canvas object. As far as parameters:

Bitmap bitmap   //The image to zoom on
Rectangle src   //A rectangle defining the portion of the image to zoom in on
Rectangle dest  //A rectangle defining where in the View to draw the zoomed portion of your image. 
                //If the size of the rectangles is mismatched, it will zoom.
Paint paint     //The paint object necessary for drawing.

Leave a comment if you have any questions. Happy coding!

Android ImageView Zooming Effect

3 Answers3