How to implement zoom effect for image view in android?

Question

I have to implement image zooming, I have tried with so many codes.But i didnt get full idea of gesture events. I want to implement when we apply double tap, image will be zooming according to the touch place(event x and y).I have to implement only zooming at this time no pan.Can any body suggest me ?

Edit: Actually i have implemented that viewflipper with images, if i try to apply pan and zoom effect, sometimes images will be changed.I want to implement zoom effect for where the user is clicked.

Give me some idea of that....

The code available here might help http://stackoverflow.com/questions/5778532/how-to-zoom-in-out-an-imageviewnot-using-canvas-in-android/5935382#5935382 — Omar Rehman, Jul 25 '12 at 03:22
Take an advantage of https://github.com/rahulkapoor1/ZommableLoadingImageView — Rahul, Jul 22 '17 at 08:33
This answer is very useful . i test it and very pwoerful. https://stackoverflow.com/a/6650484/395093 — DanialAbdi, Nov 24 '17 at 11:17

score 68 · Accepted Answer · edited May 18 '16 at 16:30

68

Lazy man can use this lib, Just import inside your project and

ImageView mImageView;
PhotoViewAttacher mAttacher;

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

    // Any implementation of ImageView can be used!
    mImageView = (ImageView) findViewById(R.id.iv_photo);

    // Set the Drawable displayed
    Drawable bitmap = getResources().getDrawable(R.drawable.wallpaper);
    mImageView.setImageDrawable(bitmap);

    // Attach a PhotoViewAttacher, which takes care of all of the zooming functionality.
    mAttacher = new PhotoViewAttacher(mImageView);
}


// If you later call mImageView.setImageDrawable/setImageBitmap/setImageResource/etc then you just need to call
mAttacher.update();

edited May 18 '16 at 16:30

Jakub S.

5,580
2
42
37

answered Aug 14 '13 at 00:05

DPP

12,716
3
49
46

How to import this library in eclipse because after importing in i am getting error in it... – Pravesh Jul 15 '14 at 13:25
4

@pks you can download library from here http://grepcode.com/snapshot/repo1.maven.org/maven2/com.github.chrisbanes.photoview/library/1.2.1 Direct Link: http://repo1.maven.org/maven2/com/github/chrisbanes/photoview/library/1.2.1/library-1.2.1.jar just drop jar file into your lib folder and enjoy :) – Zeeshan Jul 17 '14 at 11:18
@Umar How do you know, it's deprecated? – OneWorld Jan 05 '16 at 14:03
@OneWorld My comment is old and Library is now updated. – Umer Jan 05 '16 at 14:20
1

This one crashes on android 6.0 – Sachchidanand Apr 26 '16 at 09:06
This is to buggy on my galaxy s5 running android 6.0 – Tiago Oliveira Sep 05 '16 at 20:46
looks like this lib does not have recent activity – Bryan Acuña Núñez Aug 08 '19 at 02:44

score 61 · Answer 2 · edited Jan 26 '20 at 16:36

61

Here is one of the most efficient way, it works smoothly:

https://github.com/MikeOrtiz/TouchImageView

Place TouchImageView.java in your project. It can then be used the same as ImageView.

Example:

TouchImageView img = (TouchImageView) findViewById(R.id.img);

If you are using TouchImageView in xml, then you must provide the full package name, because it is a custom view.

Example:

    <com.example.touch.TouchImageView
            android:id="@+id/img”
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

edited Jan 26 '20 at 16:36

majurageerthan

2,169
3
17
30

answered Mar 20 '14 at 09:03

Vikas Mane

789
1
6
14

It gives me an error `android.widget.ImageView cannot be cast to pl.company.project.TouchImageView` – PolGraphic Jan 29 '15 at 18:36
1

@PolGraphic can you please tell me how you are using TouchImageView? – Vikas Mane Jan 31 '15 at 06:13
does it have gradle usage? – Choletski Jun 27 '17 at 13:31
@Choletski - I didn't get you. Do you mean can it be used using gradle? You just need to add a java class.Thats it. For the same gradle will be unnecessary. – Vikas Mane Jun 28 '17 at 05:22
this library still active – Bryan Acuña Núñez Aug 08 '19 at 02:45
@BryanAcuñaNúñez - the last pull request was 25 days ago, so it seems its active – Vikas Mane Aug 21 '19 at 02:33

score 16 · Answer 3 · answered Jul 28 '16 at 06:52

I hope you are doing well.it often happens with all when they want to add new functionality in your app then normally they all search for libraries which are not good tactic because you don`t know what kind of code is in that libabry. so I always prefer to fork the libraries and add the useful classes and methods in my application code.

so when I stuck with the same issue, I make lots of much R&D then I find a class which gives the ability to zoomIn ,zoomOut and pinIn and out. so you can see that class here..

so as I told before, it is a single class. so you can put this class anywhere in your projects like utils folder.and put below lines into your XML files like:

<your_packege_name.TouchImageView
        android:id="@+id/frag_imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/default_flag"
        android:transitionName="@string/transition_name_phone" />

and you can find that image view in your respected activity, as you did for all views like -:

TouchImageView tv=(TouchImageView)findViewById(R.id.frag_imageview); 
tv.setImageResource(R.drawable.ic_play);

that's it for TouchImageView. enjoy our code :)

This is the best solution for me. Thanks! – F0r3v3r-A-N00b Dec 13 '19 at 00:43 — F0r3v3r-A-N00b, Dec 13 '19 at 00:43

score 12 · Answer 4 · answered Dec 28 '16 at 15:52

12

Very simple way (Tested) :-

PhotoViewAttacher pAttacher;
pAttacher = new PhotoViewAttacher(Your_Image_View);
pAttacher.update();

Add bellow line in build.gradle :-

compile 'com.commit451:PhotoView:1.2.4'

answered Dec 28 '16 at 15:52

Premkumar Manipillai

2,121
23
24

coder_For_Life22 · Answer 5 · 2011-12-06T11:50:17.673

10

Here is a great example on how to implement zoom affect on touch with a imageview

Zoom effect on imageview

EDIT:

Also here is another great one.

Pinch to zoom tutorial

edited Dec 06 '11 at 11:50

answered Dec 06 '11 at 11:42

coder_For_Life22

26,645
20
86
118

You can follow this link to get the Image Zoom-In and Zoom-out using zoomageView:- https://stackoverflow.com/a/58074642/11613683 – Pramesh Bhalala Sep 24 '19 at 09:54

score 5 · Answer 6 · answered Dec 06 '11 at 11:49

5

This is in fact the best example ever for Image Zoom and Pan in android,

http://blog.sephiroth.it/2011/04/04/imageview-zoom-and-scroll/

answered Dec 06 '11 at 11:49

Sujit

10,512
9
40
45

Actually i am also using same code,but problem is i have to detect the double tap 2 times,first thing is to zoom the image where you are clicked,second restore the image.I dont know how to acheive the first thing.could you plese help me ? – Android Developer World Dec 06 '11 at 11:57

score 4 · Answer 7 · edited Oct 11 '18 at 04:47

Below is the code for ImageFullViewActivity Class

 public class ImageFullViewActivity extends AppCompatActivity {

        private ScaleGestureDetector mScaleGestureDetector;
        private float mScaleFactor = 1.0f;
        private ImageView mImageView;

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

            mImageView = (ImageView) findViewById(R.id.imageView);
            mScaleGestureDetector = new ScaleGestureDetector(this, new ScaleListener());

        }

        @Override
        public boolean onTouchEvent(MotionEvent motionEvent) {
            mScaleGestureDetector.onTouchEvent(motionEvent);
            return true;
        }

        private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
            @Override
            public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
                mScaleFactor *= scaleGestureDetector.getScaleFactor();
                mScaleFactor = Math.max(0.1f,
                        Math.min(mScaleFactor, 10.0f));
                mImageView.setScaleX(mScaleFactor);
                mImageView.setScaleY(mScaleFactor);
                return true;
            }
        }
    }

how to apply this on Image View ? i mean i am adding Image view programmatically. — Muhammad Hassaan, Sep 18 '18 at 12:45
I would prefer to use a simple implementation of android apis instead of an external library like anyone else apparently. However, your answer would be complete with a logic of dragging around a zoomed image. — DoruChidean, Jun 30 '20 at 10:14
Scaling properly is not that trivial as the scale should be done around the point between the pointers (fingers) and adding gentle animations is also not that easy and i think it is very nice to have. If it is not the core logic of your app leveraging external solutions might be a good idea. — Efi G, Jul 01 '20 at 07:26

score 3 · Answer 8 · edited May 23 '17 at 12:10

I prefered the library davemorrissey/subsampling-scale-image-view over chrisbanes/PhotoView (answer of star18bit)

Both are active projects (both have some commits in 2015)
Both have a Demo on the PlayStore
subsampling-scale-image-view supports large images (above 1080p) without memory exception due to sub sampling, which PhotoView doesn't support
subsampling-scale-image-view seems to have larger API and better documentation

See How to convert AAR to JAR, if you like to use subsampling-scale-image-view with Eclipse/ADT

score 2 · Answer 9 · edited May 23 '17 at 12:34

You could check the answer in a related question. https://stackoverflow.com/a/16894324/1465756

Just import library https://github.com/jasonpolites/gesture-imageview.

into your project and add the following in your layout file:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:gesture-image="http://schemas.polites.com/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">

<com.polites.android.GestureImageView
   android:id="@+id/image"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:src="@drawable/image"
   gesture-image:min-scale="0.1"
   gesture-image:max-scale="10.0"
   gesture-image:strict="false"/>`

Here's a post i published earlier for this problem https://stackoverflow.com/questions/6578320/how-to-apply-zoom-drag-and-rotation-to-an-image-in-android/47861501#47861501 — user2288580, Dec 18 '17 at 03:17

How to implement zoom effect for image view in android?

9 Answers9

Linked