How to implement zoom effect for image view in android?
AndroidImageZoomingAndroid Problem Overview
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....
Android Solutions
Solution 1 - Android
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();
Solution 2 - Android
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" />
Solution 3 - Android
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 :)
Solution 4 - Android
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'
Solution 5 - Android
Here is a great example on how to implement zoom affect on touch with a imageview
EDIT:
Also here is another great one.
Solution 6 - Android
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/
Solution 7 - Android
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;
}
}
}
Solution 8 - Android
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 https://stackoverflow.com/questions/21417419/how-to-convert-aar-to-jar/34636815#34636815, if you like to use subsampling-scale-image-view with Eclipse/ADT
Solution 9 - Android
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"/>`