Android Pinch Zoom

This Android tutorial will walk you through creating an application with pinch zoom feature. We will not use any external API support to implement the pinch zoom. We will use the ScalGestureDetector class to implement the zoom. It detects scaling transformation gestures using MotionEvent.

We will get control in the application when the user pinches to zoom using the ScaleGestureDetector.OnScaleGestureListener interface. We should implement the onScale method in this GestureListener interface. A Matrix is constructed and scaled based on the user’s pinch gesture scale factor and then the ImageView set based on this scaled Matrix.

Pinch Zoom In

Pinch Zoom Out

PinchZoomActivity.java

package com.javapapers.android.pinchzoom.app;
import android.app.Activity;
import android.graphics.Matrix;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.widget.ImageView;
public class PinchZoomActivity extends Activity {
    private ImageView imageView;
    private ScaleGestureDetector scaleGestureDetector;
    private Matrix matrix = new Matrix();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView)findViewById(R.id.imageView);
        scaleGestureDetector = new ScaleGestureDetector(this,new ScaleListener());
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        scaleGestureDetector.onTouchEvent(ev);
        return true;
    }

    private class ScaleListener extends ScaleGestureDetector.
            SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            float scaleFactor = detector.getScaleFactor();
            scaleFactor = Math.max(0.1f, Math.min(scaleFactor, 5.0f));
            matrix.setScale(scaleFactor, scaleFactor);
            imageView.setImageMatrix(matrix);
            return true;
        }
    }
}

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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/pinchTitleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/pinch_title" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_below="@+id/pinchTitleText"
        android:scaleType="matrix"
        android:src="@drawable/zoom"
        android:maxHeight="100dp"
        android:maxWidth="50dp" />

</RelativeLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.javapapers.android.pinchzoom.app" >

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.javapapers.android.pinchzoom.app.PinchZoomActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Download Android Pinch Zoom App Source

This Android tutorial was added on 29/07/2014.

Comments on "Android Pinch Zoom" Tutorial:

  1. Vishakha Thatte says:

    I tried this code exactly as it is. But its not working properly. :( Its showing the image on the screen, but when i pinched, it slightly moves but does not zoom in or out. Can anyone please tell what should be the problem? Thank you in advance.

  2. Rajakrishna Reddy says:

    Its working perfectly with small modifications .. !!

    Nice article Joe.


    Rajakrishna Reddy

  3. Joe says:

    Vishakha, it works perfectly. It is tested code. The output images posted are from zoom in an zoom out.

    Check the code carefully.

  4. Joe says:

    Rajakrishna, thanks. Can you please post the small modifications you made.

  5. Vishakha Thatte says:

    Please post the small modifications. That would be helpful to me.

  6. Vishakha Thatte says:

    I am getting following error in activity_main.xml :
    error: Error: No resource found that matches the given name (at ‘paddingLeft’ with value ‘@dimen/
    activity_horizontal_margin’) for all the 4 types of padding. Please help.

  7. Vishakha Thatte says:

    It worked perfectly. Actually problem was, I did not included dimen.xml. Now its working fine. Thank you Joe. :)

  8. Joe says:

    Excellent, welcome.

  9. Jitu Varghese says:

    float scaleFactor = detector.getScaleFactor();
    scaleFactor = Math.max(0.1f, Math.min(scaleFactor, 5.0f));

    what it means?

  10. Mehdi says:

    it is a restriction for zoom scale, in other words, it controls min and max for zoom

  11. abbie says:

    Sir, i dont have an error but it is just a plain picture of a lion. When i clicked it to zoom,it is not working :(

  12. ali says:

    hi
    what is this problem about?
    error: Error: No resource found that matches the given name (at ‘paddingLeft’ with value ‘@dimen/
    activity_horizontal_margin’).
    thank you so much for helping me!!!

  13. hardik says:

    Hi joe
    Thank you for this tutorial,i used it for a textview and it is working fine :) .
    however apps like ‘Over’ allows to scale text in any direction(on pinch event),can you suggest how to do or some work around for it?

  14. Kalla Dalayya says:

    This seems to not working properly.my screen problem or i dont know is anyone faced this problem.

  15. krishna says:

    Hi, Thanks for the tutorial. I see the code working but the image is restricted to a very small portion of the screen. Can you please help me overcome this

Comments are closed for this "Android Pinch Zoom" tutorial.