How to implement zoom effect for image view in android?

Asked 6/12, 2011 at 11:38 Answered 15/8, 2018 at 13:14

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....

Reidreidar answered 6/12, 2011 at 11:38 Comment(3)

The code available here might help #5779032 – Wentz 25/7, 2012 at 3:22

Take an advantage of github.com/rahulkapoor1/ZommableLoadingImageView – Slily 22/7, 2017 at 8:33

This answer is very useful . i test it and very pwoerful. https://mcmap.net/q/122371/-android-imageview-zoom-in-and-zoom-out – Scandium 24/11, 2017 at 11:17

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();

Mesosphere answered 14/8, 2013 at 0:5 Comment(7)

How to import this library in eclipse because after importing in i am getting error in it... – Kenyettakenyon 15/7, 2014 at 13:25

@pks you can download library from here grepcode.com/snapshot/repo1.maven.org/maven2/… Direct Link: repo1.maven.org/maven2/com/github/chrisbanes/photoview/library/… just drop jar file into your lib folder and enjoy :) – Lauzon 17/7, 2014 at 11:18

@Umar How do you know, it's deprecated? – Schock 5/1, 2016 at 14:3

@Schock My comment is old and Library is now updated. – Coldiron 5/1, 2016 at 14:20

This one crashes on android 6.0 – Understate 26/4, 2016 at 9:6

This is to buggy on my galaxy s5 running android 6.0 – Replenish 5/9, 2016 at 20:46

looks like this lib does not have recent activity – Neddra 8/8, 2019 at 2:44

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

Sturges answered 20/3, 2014 at 9:3 Comment(6)

It gives me an error android.widget.ImageView cannot be cast to pl.company.project.TouchImageView – Recapitulate 29/1, 2015 at 18:36

@Recapitulate can you please tell me how you are using TouchImageView? – Sturges 31/1, 2015 at 6:13

does it have gradle usage? – Finespun 27/6, 2017 at 13:31

@Finespun - 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. – Sturges 28/6, 2017 at 5:22

this library still active – Neddra 8/8, 2019 at 2:45

@BryanAcuñaNúñez - the last pull request was 25 days ago, so it seems its active – Sturges 21/8, 2019 at 2:33

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 :)

Tarton answered 28/7, 2016 at 6:52 Comment(1)

This is the best solution for me. Thanks! – Ceraceous 13/12, 2019 at 0:43

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'

Gustatory answered 28/12, 2016 at 15:52 Comment(0)

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

Errata answered 6/12, 2011 at 11:42 Comment(1)

You can follow this link to get the Image Zoom-In and Zoom-out using zoomageView:- https://mcmap.net/q/122371/-android-imageview-zoom-in-and-zoom-out – Consumedly 24/9, 2019 at 9:54

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/

Kozlowski answered 6/12, 2011 at 11:49 Comment(1)

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 ? – Reidreidar 6/12, 2011 at 11:57

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;
            }
        }
    }

Nichols answered 15/8, 2018 at 13:14 Comment(3)

how to apply this on Image View ? i mean i am adding Image view programmatically. – Periodontics 18/9, 2018 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. – Hillell 30/6, 2020 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. – Nichols 1/7, 2020 at 7:26

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

Schock answered 7/1, 2016 at 10:27 Comment(0)

You could check the answer in a related question. https://mcmap.net/q/122568/-how-pinch-zoom-image-in-image-zoom-android-closed

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

Patmos answered 5/6, 2014 at 10:10 Comment(1)

Here's a post i published earlier for this problem #6578820 – Dachia 18/12, 2017 at 3:17

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags