10 February 2015

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.

Github download
Stay Tuned with Made In Android

Previous Page Next Page Home
Top