Tuesday, May 21, 2013

Zoom Image Demo In Android | Zoom Image Example with code in Android | MotionEvent, Matrix example in Android

Hello friends!
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);
   }
  });

 }

}

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!

83 comments:

  1. I'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.

    In 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.

    ReplyDelete
    Replies
    1. 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!

      Delete
  2. Nice work Manish ....good one....:-)

    ReplyDelete
  3. Nice 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?

    ReplyDelete
  4. Thank you very much for sharing! It will be a great help! Great job :)

    ReplyDelete
  5. A 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 ?

    ReplyDelete
  6. Border? in this demo? I can't see any border..

    ReplyDelete
  7. Great work

    how to save the visible portion of the image maintaing aspect ratio.

    any help would be appreciated.
    E-mail:-showketahmad257@gmail.com

    ReplyDelete
    Replies
    1. Sorry man what you mean by visible portion of the image?

      Delete
  8. even 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

    ReplyDelete
    Replies
    1. I think it should work..
      which device you are using for testing?

      Delete
    2. how we can pinch zoom image with both scroll

      Delete
  9. how 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.

    ReplyDelete
    Replies
    1. So 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.

      Delete
  10. hello sir,

    i 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

    ReplyDelete
    Replies
    1. try to create dynamic imageview and set android:scaleType="matrix" programmatic. and call viewpager imageview in that code..

      Delete
  11. Hey, any idea how to implement the same for linear or relative layout? I want to add the same functionality to the layout.

    ReplyDelete
    Replies
    1. linear or relative layout mean you don't want use imageview?
      Actually this is imageview functionality only "matrix type".

      Delete
  12. 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..

    ReplyDelete
  13. sir i need to print image on ipmarvel printer usin android.....please help the source code

    ReplyDelete
    Replies
    1. Please check my post for google cloud printing. It will print pdf and image..

      Delete
    2. i tried printing in pdf and image but its not working

      Delete
    3. sir 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

      Delete
  14. Image is only dragging not zooming what to do ?
    tell me

    ReplyDelete
    Replies
    1. Please use two finger to zoom and one finger for drag.

      Delete
  15. Nice example very very help fully.........

    ReplyDelete
  16. Thanks 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

    ReplyDelete
  17. i have followed same tutorial but on launch my app crashed .can some one plese help me its very urgent

    ReplyDelete
  18. perfect .......... exactly what i need ....... thanks a lot

    ReplyDelete
  19. sir can u please tell how to save image after get it zoom as you have done in this tutorial

    ReplyDelete
  20. This post help me a lot, that was what i looking for... very simple...

    One Question... I need to rotate the ImageView, any ideas

    ReplyDelete
    Replies
    1. put android:rotaion=90 or what angle you want in your imageview.

      Delete
  21. Excellent work!! awesome solution. exactly what i was finding from couple of hours.

    ReplyDelete
  22. how to use zoom and fill color bitmab plz give me example?

    ReplyDelete
  23. Awesome, simple but powerful exactly what I was looking for!

    ReplyDelete
  24. Its not working in my app. Can yo suggest me the possible reason...!!!

    ReplyDelete
    Replies
    1. it work for me... please do not change the code

      Delete
  25. hi please teach me how to zoom linearlayout

    ReplyDelete
  26. Hello 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?

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. In your imageview did you have set scale type matrix? If yes can you paste your page 2 button code which link to image?

      Delete
    2. This comment has been removed by the author.

      Delete
    3. This comment has been removed by the author.

      Delete
    4. Ohh so just on map button click open a new activity . Detailview activity and display your image there on whole page.

      Delete
    5. This comment has been removed by the author.

      Delete
    6. This comment has been removed by the author.

      Delete
  28. PLS SUGGEST ME THE RIGHT WAY..THANKS

    ReplyDelete
  29. its not working properly...
    in which working only drag and drop section ,.....
    not any zoom image function

    ReplyDelete
    Replies
    1. Use two finger for zoom and 1 finger for drag and drop.

      Delete
  30. i want to fix minimum height and weight of imageviewof gesture

    ReplyDelete
  31. Thank you for sharing your knowledge!
    Knowledge increases on sharing!
    It is an excellent code!

    ReplyDelete
  32. hello , thanks ...
    how to add button for default state ... ?
    when pressing button , go to default image state ... ?

    ReplyDelete
  33. Please help me
    How to zoom relative layout which is having multiple imageviews

    ReplyDelete
    Replies
    1. 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.

      Delete
  34. This comment has been removed by the author.

    ReplyDelete
  35. This 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.

    ReplyDelete
  36. this we use in view pager but it not work proper
    because 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

    ReplyDelete
    Replies
    1. Yes, because view pager have their own swipe touch. And android does not provide multi touch like list-view inside scroll-view etc..

      Delete
  37. Hello 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.


    Please.......

    ReplyDelete
  38. Hi Manish,

    Actually 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

    ReplyDelete
    Replies
    1. I think create a new activity with transparent background and pass your image to that activity and show your image in full screen.

      Delete
  39. instaed of this return FloatMath.sqrt(x * x + y * y);
    use return (float)Math.sqrt(x * x + y * y);

    ReplyDelete
  40. what is property to zooming image in android

    ReplyDelete
  41. How to get the height and weight of the image in the imageView after and before it is zoomed?

    ReplyDelete
  42. the 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)??

    ReplyDelete
  43. I 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