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!

43 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
  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