Add Pinch Zoom MultiTouch Effect on ImageView in Android

How to implement zoom in-zoom out effect with double tap on image in android application with multiple finger zooming.

Enabling zooming effect on Image inside android application gives the ability to its users so they can easily zoom the whole image with double tab or multiple finger pinch technique. The PhotoView GitHub library is one of the best library available on GitHub and thanks to this library we can easily give Add Pinch Zoom MultiTouch Effect on ImageView in Android.

android-project-download-code-button

Live Preview :

Please follow the below steps in order to add PhotoView library inside your project :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.github.chrisbanes:PhotoView:1.3.0'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

photoview_library

4. Now open build.gradle(Project) .

build_gradle_project

5. Add below code inside it :

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

6. Screenshot after adding above code :

maven

Here you go now next step is start coding.

How to Add Pinch Zoom MultiTouch Effect on ImageView in Android.

Code for MainActivity.java file.

package com.android_examples.androidpinchzoom_android_examplescom;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.Drawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import uk.co.senab.photoview.PhotoViewAttacher;


public class MainActivity extends AppCompatActivity {

    ImageView imageView ;

    PhotoViewAttacher photoViewAttacher ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (ImageView)findViewById(R.id.imageView);

        Drawable drawable = getResources().getDrawable(R.drawable.sample_zoom_image);

        imageView.setImageDrawable(drawable);

        photoViewAttacher = new PhotoViewAttacher(imageView);

        photoViewAttacher.update();
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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="com.android_examples.androidpinchzoom_android_examplescom.MainActivity"
    android:background="#FFF9C4">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/sample_zoom_image"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/imageView" />

</RelativeLayout>

Screenshots:

Add Pinch Zoom MultiTouch Effect on ImageView in Android

screenshot_1477491079

Click here to download Add Pinch Zoom MultiTouch Effect on ImageView in Android project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *