Image Magnifier android

We all are familier with an android layout ImageView which can load images from sources like drawable,content providers etc. But by default Android ImageView is not having any default magnifier property. Here in this example let us see how to implement a magnifier in Imageview , which allows to zoom or magnify the portion of the imageview which the user is touching.

For implementing a ImageMagnifier you need a custom Imageview . So let us create a class which extends Imageview.

[iframe style=”height:230px;”¬† marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”http://codesfor.in/publisherszone/amazon-products.php”]

Create a java class and name it as  CodesforMagnifierImageView.java and paste the below code inside that class

CodesforMagnifierImageView.java

package com.codesfor.imagemagnifier;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

/**
* Created by Ramees on 9/11/2016.
*/
public class CodesforMagnifierImageView extends ImageView {

private PointF zoomPosition;
private boolean zooming = false;
private Matrix matrix;
private Paint paint;
private Bitmap bitmap;
private BitmapShader shader;
private int sizeOfMagnifier = 200;

public CodesforMagnifierImageView(Context context) {
super(context);
init();
}

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

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

private void init() {
zoomPosition = new PointF(0, 0);
matrix = new Matrix();
paint = new Paint();

}

@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();

zoomPosition.x = event.getX();
zoomPosition.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) {
buildDrawingCache();
} else {

bitmap = getDrawingCache();
shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

paint = new Paint();
paint.setShader(shader);
matrix.reset();
matrix.postScale(2f, 2f, zoomPosition.x, zoomPosition.y);
paint.getShader().setLocalMatrix(matrix);
canvas.drawCircle(zoomPosition.x, zoomPosition.y, sizeOfMagnifier, paint);
}
}


}

Now simply add the following code to the layout file of activity which you are using

<com.codesfor.imagemagnifier.CodesforMagnifierImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/magnifier" />

As per the above code you need to have a PNG image in your drawable folder – use the same name of that image in the above layout ,Here my image name is magnifier.

output

Android ImageMagnifier

 

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

13 Comments

  1. Shruti Vyas September 28, 2018 Reply
    • Prakash Satyani April 1, 2020 Reply
  2. Sachiththa May 17, 2017 Reply
  3. Sachiththa May 17, 2017 Reply
    • rameesAuthor May 17, 2017 Reply
      • Sachiththa May 17, 2017 Reply
        • rameesAuthor May 17, 2017 Reply
          • Sachiththa May 17, 2017
          • rameesAuthor May 17, 2017
  4. Gaurav September 17, 2016 Reply
    • rameesAuthor September 18, 2016 Reply
      • Rodrigo September 12, 2018 Reply
        • Ramees FazalAuthor September 14, 2018 Reply

Add a Comment

Your email address will not be published. Required fields are marked *