Hello friends!
Today I am going to share zoom image code in Android using TouchListner, MotionEvent, Matrix.
Please copy paste below code and enjoy!
Thanks!
Today I am going to share zoom image code in Android using TouchListner, MotionEvent, Matrix.
Please copy paste below code and enjoy!
1-Print Screen
2-MainActivity
package com.manish.zoomimage;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
public class MainActivity extends Activity {
ImageView imageDetail;
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();
PointF startPoint = new PointF();
PointF midPoint = new PointF();
float oldDist = 1f;
static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageDetail = (ImageView) findViewById(R.id.imageView1);
/**
* set on touch listner on image
*/
imageDetail.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
ImageView view = (ImageView) v;
System.out.println("matrix=" + savedMatrix.toString());
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
savedMatrix.set(matrix);
startPoint.set(event.getX(), event.getY());
mode = DRAG;
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
if (oldDist > 10f) {
savedMatrix.set(matrix);
midPoint(midPoint, event);
mode = ZOOM;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - startPoint.x,
event.getY() - startPoint.y);
} else if (mode == ZOOM) {
float newDist = spacing(event);
if (newDist > 10f) {
matrix.set(savedMatrix);
float scale = newDist / oldDist;
matrix.postScale(scale, scale, midPoint.x, midPoint.y);
}
}
break;
}
view.setImageMatrix(matrix);
return true;
}
@SuppressLint("FloatMath")
private float spacing(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return FloatMath.sqrt(x * x + y * y);
}
private void midPoint(PointF point, MotionEvent event) {
float x = event.getX(0) + event.getX(1);
float y = event.getY(0) + event.getY(1);
point.set(x / 2, y / 2);
}
});
}
}
package com.manish.zoomimage; import android.annotation.SuppressLint; import android.app.Activity; import android.graphics.Matrix; import android.graphics.PointF; import android.os.Bundle; import android.util.FloatMath; import android.view.MotionEvent; import android.view.View; import android.widget.ImageView; public class MainActivity extends Activity { ImageView imageDetail; Matrix matrix = new Matrix(); Matrix savedMatrix = new Matrix(); PointF startPoint = new PointF(); PointF midPoint = new PointF(); float oldDist = 1f; static final int NONE = 0; static final int DRAG = 1; static final int ZOOM = 2; int mode = NONE; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageDetail = (ImageView) findViewById(R.id.imageView1); /** * set on touch listner on image */ imageDetail.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { ImageView view = (ImageView) v; System.out.println("matrix=" + savedMatrix.toString()); switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: savedMatrix.set(matrix); startPoint.set(event.getX(), event.getY()); mode = DRAG; break; case MotionEvent.ACTION_POINTER_DOWN: oldDist = spacing(event); if (oldDist > 10f) { savedMatrix.set(matrix); midPoint(midPoint, event); mode = ZOOM; } break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_POINTER_UP: mode = NONE; break; case MotionEvent.ACTION_MOVE: if (mode == DRAG) { matrix.set(savedMatrix); matrix.postTranslate(event.getX() - startPoint.x, event.getY() - startPoint.y); } else if (mode == ZOOM) { float newDist = spacing(event); if (newDist > 10f) { matrix.set(savedMatrix); float scale = newDist / oldDist; matrix.postScale(scale, scale, midPoint.x, midPoint.y); } } break; } view.setImageMatrix(matrix); return true; } @SuppressLint("FloatMath") private float spacing(MotionEvent event) { float x = event.getX(0) - event.getX(1); float y = event.getY(0) - event.getY(1); return FloatMath.sqrt(x * x + y * y); } private void midPoint(PointF point, MotionEvent event) { float x = event.getX(0) + event.getX(1); float y = event.getY(0) + event.getY(1); point.set(x / 2, y / 2); } }); } }
3-activity_main
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="matrix"
android:src="@drawable/images" />
</RelativeLayout>
Thanks!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/imageView1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="matrix" android:src="@drawable/images" /> </RelativeLayout>
Thanks Dear!
ReplyDeleteThanks Ashish!
ReplyDeleteI'm working on an app, in which I have to select a part of an image(rectangular selection) and then apply zoom. I've looked at various zooming solutions. However, the ones I found are either single-touch zoom, or pinch-zoom.
ReplyDeleteIn my App, only the part selected by the user, (i.e. the part of image inside the rectangle) has to be zoomed. Any help would be really useful.
Thanks.
I think it is very tuff task because we can zoom only whole object not a part of object. For that we need different-different object inside rectangle..Sorry no idea!
DeleteNice work Manish ....good one....:-)
ReplyDeleteThanks varun!
DeleteNice post. I implemented your code to my app. But im getting pinch,drag whole view (parent View). I need to implement pinch,drag only for imageView. How to modify?
ReplyDeleteThank you very much for sharing! It will be a great help! Great job :)
ReplyDeleteThsnks & most welcome!
DeleteA very big thanks man ! But I've a question: when I zoom on an image, there is a border that cut the image, how can I delete this ?
ReplyDeleteBorder? in this demo? I can't see any border..
ReplyDeleteThanxs a lot.. GOD BLESS U
ReplyDeleteThanks & your most welcome..
DeleteGreat work
ReplyDeletehow to save the visible portion of the image maintaing aspect ratio.
any help would be appreciated.
E-mail:-showketahmad257@gmail.com
Sorry man what you mean by visible portion of the image?
Deleteeven i am not getting any error but also it is not working..plz help me...if u can my mail id is kapil_rathee27@yahoo.com
ReplyDeleteI think it should work..
Deletewhich device you are using for testing?
how we can pinch zoom image with both scroll
Deletehow to drag the image with in screen boundaries.when i use your code the images crossing the screen boundaries also.i dont want do this this.how can i do it please tell me.its urgent.
ReplyDeleteSo hold image in center and zoom till it's did not go out :).. Sorry dear I don't have code for this well check on google sure you got.
Deletehello sir,
ReplyDeletei refer your code its very useful...i m a beginner i wanted to use a zoom function with view pager please suggest me a code
thanks and regards
try to create dynamic imageview and set android:scaleType="matrix" programmatic. and call viewpager imageview in that code..
DeleteHey, any idea how to implement the same for linear or relative layout? I want to add the same functionality to the layout.
ReplyDeletelinear or relative layout mean you don't want use imageview?
DeleteActually this is imageview functionality only "matrix type".
No, I'm not using ImageView. I have set a background for layout and I want to add zooming functionality to it. Do you have any idea? I have googled it but the zooming is not smooth..
ReplyDeletesorry dear no idea..
Deletesir i need to print image on ipmarvel printer usin android.....please help the source code
ReplyDeletePlease check my post for google cloud printing. It will print pdf and image..
Deletei tried printing in pdf and image but its not working
Deletesir i need a code to print image on handler printer(thermal printer)..actually our image is stored in thae format of jpg in dcim...i need to print that image by converting to other printing formats...i tried bitmsp,base64,bytearray its not working...when we going to print image we are gettin unknown characters..i need the conversion of the image to be print plz help me out...im waiting for ur reply......thankin you by neha
DeleteImage is only dragging not zooming what to do ?
ReplyDeletetell me
Please use two finger to zoom and one finger for drag.
DeleteNice example very very help fully.........
ReplyDeleteThanks for giving good example...but in my app when i am clicking image in list page to full page it should image should display in center and should swipe.for swiping i am using the view pager adapter..please help me as soon as possible
ReplyDeletei have followed same tutorial but on launch my app crashed .can some one plese help me its very urgent
ReplyDeleteCan you please post log-cat?
Deleteperfect .......... exactly what i need ....... thanks a lot
ReplyDeletesir can u please tell how to save image after get it zoom as you have done in this tutorial
ReplyDeleteThis post help me a lot, that was what i looking for... very simple...
ReplyDeleteOne Question... I need to rotate the ImageView, any ideas
put android:rotaion=90 or what angle you want in your imageview.
DeleteExcellent work!! awesome solution. exactly what i was finding from couple of hours.
ReplyDeleteThanks dear for your valuable comment..
Deletehow to use zoom and fill color bitmab plz give me example?
ReplyDeleteAwesome, simple but powerful exactly what I was looking for!
ReplyDeleteIts not working in my app. Can yo suggest me the possible reason...!!!
ReplyDeleteit work for me... please do not change the code
Deletehi please teach me how to zoom linearlayout
ReplyDeleteHello Manish, nice application, I used it but with another link, the problem is, it doesn't go to the image from the button link, can you help?
ReplyDeleteI am not getting please explain..
DeleteThis comment has been removed by the author.
ReplyDeleteIn your imageview did you have set scale type matrix? If yes can you paste your page 2 button code which link to image?
DeleteThis comment has been removed by the author.
DeleteThis comment has been removed by the author.
DeleteOhh so just on map button click open a new activity . Detailview activity and display your image there on whole page.
DeleteThis comment has been removed by the author.
DeleteThis comment has been removed by the author.
DeletePLS SUGGEST ME THE RIGHT WAY..THANKS
ReplyDeleteRight way for what?
Deleteits not working properly...
ReplyDeletein which working only drag and drop section ,.....
not any zoom image function
Use two finger for zoom and 1 finger for drag and drop.
Deletei want to fix minimum height and weight of imageviewof gesture
ReplyDeleteOn Fix height width it is not working?
DeleteThank you for sharing your knowledge!
ReplyDeleteKnowledge increases on sharing!
It is an excellent code!
hello , thanks ...
ReplyDeletehow to add button for default state ... ?
when pressing button , go to default image state ... ?
Please help me
ReplyDeleteHow to zoom relative layout which is having multiple imageviews
I am not sure but try to use view instead of relative layout and try to cast into imageview. May be it will help you.
DeleteGreat tutorial, thank you :)
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis is really awesome and nice one demo. I like to implement zoom in and out for images in my android app. Anyway thanks for this.
ReplyDeletethis we use in view pager but it not work proper
ReplyDeletebecause if i want to scroll the view pager then it automatic zoom page on touch
how to resolve it please help me soon....
other code proper work
Yes, because view pager have their own swipe touch. And android does not provide multi touch like list-view inside scroll-view etc..
DeleteHello Sir U use in xml file scaletype is matrix and I have very large size image thats y that image is gone out of screen but I need this image by default fit to screen bcz when I open that activity then that page show me the top left corner of that image, so please tell me how I can correct it, how can I use this image by default fit to screen just like out mobile gallery look images.
ReplyDeletePlease.......
matrix=fit_xy
Deleteand padding 10dp
Hi Manish,
ReplyDeleteActually my requirement is that I have to develop an application in which UI will have 3 rows with dynamic number of ImageViews. Once I will click on any of Image view in any row it will grow/zoom and accordingly rest of the rows and imageviews in it will shrink and on 2nd click on that Image it should move it to other activity.
What should be the best approach for it ? Do you have any Idea ?
Regards,
Ratnesh
I think create a new activity with transparent background and pass your image to that activity and show your image in full screen.
Deleteinstaed of this return FloatMath.sqrt(x * x + y * y);
ReplyDeleteuse return (float)Math.sqrt(x * x + y * y);
what is property to zooming image in android
ReplyDeletescale type= matrix
DeleteHow to get the height and weight of the image in the imageView after and before it is zoomed?
ReplyDeletethe zoom works. But, my image is not rendered as is. It appears zoomed in when opened initially. How do I ensure the image is rendered as is (fits image view)??
ReplyDeleteNo idea bro.
Deletenice work :)
ReplyDeleteI am using NetworkImageView of volley library as i have to take image from server then perform zooming operations. I have used your code for zooming operations, but it is not working, nothing happens in app and in logcat it is showing like this matrix=Matrix{[1.0, 0.0, 0.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0]}.
ReplyDelete