Pinch Zoom tutorial in Android

What we will do?
-> We will make an app with an image which when pinched, gets zoomed.

What we will need?

Changes in activity_main.xml

An image (here we will use the default image in the project i.e. ic_launcher)

Adding code in MainActivity.java

Step 1 : Create a New Android Project by clicking on File->New->Android Application Project.

Step 2 : Give a name(PinchZoom) and package name(mia) to your application. Click Next...till Finish and Click Finish.

Step 3 : Drag an ImageView in layout of activity_main.xml from the Palette. Then choose the image as ic_launcher.png. If you like to use another image, copy the image in the res/drawable_hdpi folder.

OR copy the code below in activity_main.xml.

activity_main.xml

<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/ic_launcher" />

</RelativeLayout>

Step 4 : Code for MainActivity.java in src->com.mia.pinchzoom is shown below.

MainActivity.java

package com.mia.pinchzoom;

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;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  imageDetail = (ImageView) findViewById(R.id.imageView1);
  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);
   }
  });
 }
}

Step 5 : Run the Project. Run it directly in your android phone ,since you can zoom with your hand only in your mobile phone.