CODEWITHSUNDEEP
androidimagezooming
Android Developer World
Android Developer World

Reputation: 1070

How to implement zoom effect for image view in android?

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

Upvotes: 65

Views: 154640

Answers (9)

Vikas Mane
Vikas Mane

Reputation: 789

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

Upvotes: 61

Efi G
Efi G

Reputation: 997

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

Upvotes: 4

Premkumar Manipillai
Premkumar Manipillai

Reputation: 2151

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'

Upvotes: 12

John smith
John smith

Reputation: 1785

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

Upvotes: 16

Dixit
Dixit

Reputation: 13046

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

Upvotes: 68

OneWorld
OneWorld

Reputation: 17671

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

Upvotes: 3

arniotaki
arniotaki

Reputation: 2265

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

Upvotes: 2

coder_For_Life22
coder_For_Life22

Reputation: 26971

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

Upvotes: 10

Sujit
Sujit

Reputation: 10622

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/

Upvotes: 5

Related Questions