sephiroth74/imageviewzoom

Android ImageView widget with zoom and pan capabilities

ImageViewTouch for Android

ImageViewTouch is an android ImageView widget with zoom and pan capabilities. This is an implementation of the ImageView widget used in the Gallery app of the Android opensource project.

Checkout the repository and run the ImageViewTouchTest project to see how it works. Beside the superclass setImageBitmap method it offers the following methods:

• setImageBitmap( final Bitmap bitmap, Matrix matrix );
• setImageBitmap( final Bitmap bitmap, Matrix matrix, float minZoom, float maxZoom );

If you want to load a new Bitmap with a particular zoom/pan state (let's say the same from another ImageView ), you can call:

Matrix matrix = mImageView1.getDisplayMatrix();
mImageView2.setImageBitmap( bitmap, matrix );

Tweaks

The initial display state can be set, using public void setDisplayType( DisplayType type ), as:

• DisplayType.FIT_TO_SCREEN: The image loaded will always fit the current view's bounds.
• DisplayType.NONE: The image will be presented with its current dimensions if smaller than the image bounds, otherwise it will be scaled to fit its contents inside the screen.
• DisplayType.FIT_HEIGHT: The image loaded will always fit the height of the current view.
• DisplayType.FIT_WIDTH: The image loaded will always fit the width of the current view.

The default display state is `DisplayState.NONE'.

##Usage (Maven) it.sephiroth.android.library.imagezoom imagezoom 2.3.0

##Usage (Gradle)

dependencies {
	compile 'it.sephiroth.android.library.imagezoom:imagezoom:+'
}

##LICENSE

This software is provided under the MIT license:
http://opensource.org/licenses/mit-license.php

##Author

Alessandro Crugnola

imageviewzoom's Issues

setMinScale/setMaxScale method is protected, why?

setMinScale/setMaxScale method is protected, why?

How can I set max/min scale?

Image disappears

Image disappears, When ImageViewZoom is Used with Universal Image loader. Please suggest me

XML:

<it.sephiroth.android.library.imagezoom.ImageViewTouch
        android:id="@+id/userImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="matrix"
        android:adjustViewBounds="true"
       />

Code:
ImageLoader imageLoader = ImageLoader.getInstance(); //Universal image loader

ImageViewTouch imageView =(ImageViewTouch)imageLayout.findViewById(R.id.userImage);
imageView.setDisplayType(ImageViewTouch.DisplayType.FIT_IF_BIGGER);
imageView.setScaleType(ImageView.ScaleType.MATRIX);

imageLoader.displayImage(PhotoUrl.get(position).PHOTOURL,imageView,options,new SimpleImageLoadingListener(){
.......
});

Repository not found in maven

I'm unable to add this project as a maven dependency, because it is not included in the official maven repo. Has this project been removed?

Zooming lines created by Canvas

I've created lines over the ImageViewTouch using Canvas. However whenever I zoom in/out the Image, the line created keeps with the same size. Is it possible to also zoom the drawn line? Or is it at least possible to have the X and Y destination of a point?

Import statement error in library

I just import library and demo projects in eclipse but it shows me two import statements error. These two statements are ...

import it.sephiroth.android.library.easing.Cubic;
import it.sephiroth.android.library.easing.Easing;

Now what to do to solve this errors
Thanks...

Get the image scroll offset?

Is there any way to get the offset x/y for the image after scroll? Or may I request this feature?
As imageViewTouch.getScrollX() always return 0.
Thanks!

Image Panning speed

Speed of the panning is too low. and doesnt' seem to make any difference if i panning really quickly or slowly. The image seem to move on same speed.

Zoomed image plus ViewPage

Assume there are 2 images in a ViewPager and when zooming the first one and try to pan(drag), the parent viewpager scrolls to second image instead of image panning. Using this.getParent().requestDisallowInterceptTouchEvent(true); inside onTouchEvent of does the trick but where should I allow it. If you can update the code, it would be awesome. I'm new to android.

Image pan and zoom conflicting with view scroll

Hi,

Sorry to use the issue tracker to ask for help but I can't seem to find any other place nor any useful info.

I'm trying to use ImageViewZoom to show images that are of various sizes (can be smaller or bigger than the screen), but I'm having a problem where the zoom and pan stop working if the view doesn't fit the screen, e.g. if I have one image in portrait mode and then switch to landscape, given that the height of the image is bigger than the width of the device, the zoom stops working and panning conflicts with the default view scroll.

I had issues trying to get the view to show the image, it is an image loaded from an API and the layout has the view hidden, this is how I load the image:

final Bitmap loadedImage = new FileUtils().getBitmapFromFile(binaryDocumentFilePath);
final ImageViewTouch mImageView = (ImageViewTouch) findViewById(R.id.flowchart);
           mImageView.setDisplayType(ImageViewTouchBase.DisplayType.FIT_IF_BIGGER);
mImageView.setVisibility(View.VISIBLE);

mImageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    public void onGlobalLayout() {
        mImageView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        mImageView.setImageBitmap(loadedImage, null, ImageViewTouchBase.ZOOM_INVALID, ImageViewTouchBase.ZOOM_INVALID);
    }
});

And these are my XML layout options:

android:id="@+id/flowchart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"
android:scaleType="matrix"
android:visibility="gone"
android:contentDescription="@string/empty"

Any suggestion?

member variable in ImageViewTouchBase.java

what the mBaseMatrix、mSuppMatrix、mNextMatrix、mDisplayMatrix represent? Thank you!

Disable PagerAdapter swipe when ImageViewTouch is zoomed

Hi,

I wonder how I can make the ImageViewTouch to scroll in x-axis when in zoom mode only, otherwise the PagerAdapter should be called so pages are changed instead.

I've also asked on Stack Overflow:
http://stackoverflow.com/questions/19562312/disable-swipe-in-pageradapter-if-imageviewtouch-is-in-zoom-mode

Thanks in advance. :)

Best regards,
Henric

Animated GIFs

This is a feature request to support animated gif images. (Maybe also APNGs?)

May look into forking and adding myself. Not even sure if the project is still maintained.

ImageViewTouch doesn't work with older phones (GestureDetector)

I have a problem with ImageViewTouch (ImageViewZoom).

Especially with this line in ImageViewTouch class:

mGestureDetector = new GestureDetector( getContext(), mGestureListener, null, true );

Everything works fine when there is a GestureListener available on the phone. When there is not there are some errors.

I've tried to repair it by changing this line into:

try {
    mGestureDetector = new GestureDetector( getContext(), mGestureListener, null, true );
}
catch(Exception e1) {
    try {
        mGestureDetector = new GestureDetector( getContext(), mGestureListener )
    }
    catch(Exception e2) {
        System.out.println("No gesture detector.");
    }
}

I've also changed this line:

if ( !mScaleDetector.isInProgress() ) mGestureDetector.onTouchEvent( event );

into this:

if ( ( !mScaleDetector.isInProgress() ) && ( mGestureDetector != null ) ) mGestureDetector.onTouchEvent( event );

From my point of view this change shouldn't have any effect on phones, which everything worked well before on. But now on my own phone (on previous version everything worked fine) I am not able to use double tap zoom.

Do you have any idea why it works that way? How can I make it works even on older phones? :)

How to know if ImageView is zoomed or not?

Hi,

I want to return a boolean value to know weather the ImageView is zoomed or not. How to implement it in ImageViewZoom?

Currently there is no method on the basis of which I can calculate this.
Please let me know if you have. Thanks.

Draws using Canvas dissapears when image is zoomed

I'm drawing lines over the ImageViewTouch image using canvas. For this I overrided the method onDrawn in ImageViewTouch class and there I make some lines drawing.

The lines are drawn normally in the image, however when I zoom it the lines simply dissapears.

How can I 'save' the draw in the image so that the lines are zoom along the image?

Touched position

How can I find touched position relative to main bitmap?

Setting a bitmap after downloading it using an AsyncTask

Sephiroth:

I am running to an issue you might know how to fix it.

A sample code that reproduces the issue is hosted here:
https://github.com/Macarse/ImageViewZoom/tree/ImageViewTouchDownloadBug

I am downloading a Bitmap using an AsyncTask, but when I set it, the ImageView isn't resized according to the scaleType. If I run the sample I created in a Nexus 10 tablet, it looks like this:

where I would like it to look like this:

Any idea of how to solve this issue?

Licensing

What is the license of this great component? Apache, GPL...?

Could you include licensing information in a LICENCE file or in the README?

How to detect image invalidated

I want to add an overlay to a FrameLayout covering ImageViewTouch.
How can I listen to pan & scale events in ImageViewTouch so I can update my overlay?

Thank you

min_zoom does not take effect

Hi, I'm trying to make image fit screen in the min_zoom like this:

        image.setDisplayType(ImageViewTouchBase.DisplayType.FIT_TO_SCREEN);

        Glide.with(this)
                .load(imageUrl)
                .dontAnimate()
                .into(new SimpleTarget<GlideDrawable>() {
                    @Override
                    public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                        float screen_w = getApplicationContext().getResources().getDisplayMetrics().widthPixels;
                        float drawable_w = resource.getIntrinsicWidth();
                        float min_scale = screen_w / drawable_w;
                        image.setImageDrawable(resource, null, min_scale, 3 * min_scale);
                    }
                });

for instance screen_widh = 1080 and drawable_width=640 so min_scale = 1.6875
but in any case it scales down to 640.

Usage with viewpager

I use your lib and a viewpager and async loading of bitmaps from Web like in this article (http://developer.android.com/training/displaying-bitmaps/display-bitmap.html) from Google dev Page. The problem is that images are not displayed. Are there any ideas? Thanks

Supported api levels

The constructor on GestureDetector is available from api level 8
I think is nice to have a note in the README file mentioning the incompatibility or if is the only issue change the call to this constructor

GestureDetector(android.content.Context, android.view.GestureDetector.OnGestureListener, android.os.Handler, boolean)

has problem in viewpage

hi in my app i use fragmentActivity manager fragment,in fragment return image view .I use this ImageViewTouch in fragment , when I zoom Image ，then i slip screen， Image not slipping but ViewPage changed. the other image display.
thanks

ImageView resizes on image change

Hello, I am attempting to use this library for an animation of images pulled from a site. I am running into an issue where the imageview keeps snapping to the screen size before applying the scaling matrix when I set a new image.
Is there a way to maintain a steady scale across image changes?

Overlays

Any suggestion how to modify this library so it works with overlay clickable and zoomable icons?
I can answer myself. I have made R.id.rlContainer to which I attach elements.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <it.sephiroth.android.library.imagezoom.ImageViewTouch
        android:id="@+id/ivImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="matrix" />

    <RelativeLayout
        android:id="@+id/rlContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left|top" >
    </RelativeLayout>
</FrameLayout>

another option would be to extend the library itself and write on bitmap assigned to ImageViewTouch

Zoom Values

I am trying to figure out zoom values. What should I pass ? whats is the range ? 0 - 100 ? or 0 - 1 ?

is it possible to set some kind of onScale/ZoomListener ?

Hi,
I would like to hide some controls when user starts zooming/scaling and show them back when image fits screen. So I'm wondering if there is a possibility to set some kind of listener.
So far as I can see there is something like this but it is private...
Any suggestions ?
Thanks.

Incorrect zooming.

Library incorrectly zooms an image. The point of zooming - either where it's being double clicked or multi-touched between two fingers is proper only in x axis. Ideally when double clicking, the place of click shouldn't move and image should be resized. But it's not moving in x axis, but it does move in y axis. Less closer to the middle and more closer to upper and bottom edge. Could you please fix it?

It's maybe something here:

protected void zoomTo( float scale, float centerX, float centerY, final float durationMs ) {
    if ( scale > getMaxScale() ) scale = getMaxScale();

    final long startTime = System.currentTimeMillis();
    final float oldScale = getScale();

    final float deltaScale = scale - oldScale;

    Matrix m = new Matrix( mSuppMatrix );
    m.postScale( scale, scale, centerX, centerY );
    RectF rect = getCenter( m, true, true );

    final float destX = centerX + rect.left * scale;
    final float destY = centerY + rect.top * scale;

    mHandler.post( new Runnable() {

        @Override
        public void run() {
            long now = System.currentTimeMillis();
            float currentMs = Math.min( durationMs, now - startTime );
            float newScale = (float) mEasing.easeInOut( currentMs, 0, deltaScale, durationMs );
            zoomTo( oldScale + newScale, destX, destY );
            if ( currentMs < durationMs ) {
                mHandler.post( this );
            } else {
                onZoomAnimationCompleted( getScale() );
                center( true, true );
            }
        }
    } );
}

perhaps m.postScale( scale, scale, centerX, centerY ); is calculated incorrectly;

With hardware acceleration enabled GL10.GL_MAX_TEXTURE_SIZE gets sometimes exceeded.

When the device supports hardware acceleration and it's on, then maximum size of image supported by the library is restricted to value of GL10.GL_MAX_TEXTURE_SIZE.
It's only 2048x2048 both in Galaxy Nexus and Galaxy S2.

That's the real problem, which makes the library useless in most of applications.
http://stackoverflow.com/questions/15313807/android-maximum-allowed-width-height-of-bitmap
http://stackoverflow.com/questions/10271020/bitmap-too-large-to-be-uploaded-into-a-texture

I have read that the way to go around it is to cut image into tails, but I think it's not easy to add such functionality to this library. Do you have any other suggestion how to go around it or maybe do you know similar library without this problem?

Nexus 10 error: Bitmap too large to be uploaded into a texture (6667x667, max=4096x4096)

My current solution is checking weather Android is newer then 3.0 and image is bigger than GL10.GL_MAX_TEXTURE_SIZE, then turning off hw acceleration for the plugin:
ivImage.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

will support touch roation?

can support mutil touch roate image ?

Implement setImageResource

This is just a quick and dirty setImageResource.. If you just call the base class the control doesn't initialise properly and you get wierd effects if you try to zoom etc.

diff --git a/ImageViewTouch/src/it/sephiroth/android/library/imagezoom/ImageView
index a46a936..ffbc2d8 100644
--- a/ImageViewTouch/src/it/sephiroth/android/library/imagezoom/ImageViewTouchBa
+++ b/ImageViewTouch/src/it/sephiroth/android/library/imagezoom/ImageViewTouchBa
@@ -99,6 +99,11 @@ public class ImageViewTouchBase extends ImageView implements 
        public void setImageBitmap( Bitmap bm ) {
                setImageBitmap( bm, true );
        }
+       
+       @Override
+       public void setImageResource(int resId) {
+               setImageDrawable(getContext().getResources().getDrawable(resId))
+       }

        /**
         * Set the new image to display and reset the internal matrix.
@@ -157,7 +162,7 @@ public class ImageViewTouchBase extends ImageView implements
        public void setImageDrawable( Drawable drawable ) {
                setImageDrawable( drawable, true, null, -1 );
        }
-
+       
        public void setImageDrawable( final Drawable drawable, final boolean res

                final int viewWidth = getWidth();

scaleType attribute doesn't work properly

When you setting up this attribute via xml

<it.sephiroth.android.library.imagezoom.ImageViewTouch
        android:scaleType="fitXY"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

it just ignored and nothing changed

If it setup from java code

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

it will show scaled to maximum size image and scaling in component doesn't work

Best fit Image ?

How can I compute a zoom value that represents scaleType:centerCrop ??

or can I achieve this by any DisplayType?

Any way to scroll to the top of a scaled image?

jeancaffou's suggestion for force fill works great but the image starts in the center rather than the top, I tried calling scrollBy after I set the bitmap but no luck.

Add Fling ability?

Great library! Thank you for your work. I'm trying to add the ability to fling the image when the zoom scale is 1f, or equal to min zoom and single finger swipe motion is detected. I have not yet been successful in doing this. Are there any plans to add such a feature in the future?

Can't figure out fling

I'm using the library (very nice) but I'm having a problem trying to figure out fling. I've read the other answers but they don't show the actual code used to get fling events.

I've hooked fling events like this:
mImage.setOnTouchListener(new OnTouchListener()
{
@OverRide
public boolean onTouch(View v, MotionEvent event) {
return gestureDetector.onTouchEvent(event);
}
});
gestureDetector = new GestureDetector(this, new MyGestureDetector(getApplicationContext(), this));

MyGestureDetector extends SimpleOnGestureListener. I then override the onFling method.

The problem with this approach is that it disables the 1 touch and hence the pan functionality. I'm sure there is a better way to hook into fling events (so I can change images) but I'm not sure how -newb :(

How to fit image in full screen in ImageViewTouch

I am using ImageViewTouch library to zoom a image instead of imageview.

<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="@+id/imageweb"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:background="@drawable/bg_loading"
android:scaleType="fitCenter" />

I want to load the image on ImageViewTouch control and the width of image will auto fits my screen. How to fit only width and height both to my mobile screen?

Here when i do 3 times double tap means in 1st time its get zoomed in 2nd time also but in 3rd times its fits to height and width of the the device screen.(I want this 3rd time result at the time of first load of normal image)

But its not loaded fit to height and width (X and Y) at first time.? Please help me to sort out this issue.

I already tried with android:scaleType="fitXY" but its not working

I used this library classes May be i have to change here some thing.

first second

Thank you for support

Zoom image by multitouch .

Thank you for your great and prefect project. I am using it and i am trying to zoom in and zoom out by two finger scroll but i am unable. could you help me that how can solve it .

and may i use it with my project . and if it will create any effect . or do i need to purchase it . or do this project have license .

Thank you

README.md slight change

This is a really minor issue, but in your README.md, under the TWEAKS section, you speak of The default display state is `DisplayState.NONE'.

It should be DisplayType.NONE instead.

ImageViewTouch not working on DialogFragment

Tried this on FragmentActivity and Normal Activity and works just fine. It really rocks, but when I added the Custom View on my DialogFragment layout and done the code on the DialogFragment the image doesn't show at all.

two lacking classes / imports

Hi, i've downloaded the library .zip (2013/11/27) and there are two lacking classes:

import it.sephiroth.android.library.easing.Cubic;
import it.sephiroth.android.library.easing.Easing;

It was no problem because they were quite simple and i could find them quickly via google search. The library works very well, so i wanna thank you guys. Just wanted you to know this minor build issue

How to draw up to ImageViewTouch ?

I used your custom view, it was great.
Now, I want modified your View to allow users to draw on and zoom View
I want to set a flag variable, then my turn on flag, I draw on View,and when flag off, I zoom View, Can you help me ?
Thanks & regards,

Double tap twice to zoom out (to normal level)

Here is the current zoom behaviour with respect to a double tap

• Double tap once to zoom in
• Double tap again to zoom in further
• Double tap the third time to zoom out

Is it possible to add a method that allows us to, optionally, remove the second step to allow zoom in with one double tap and zoom out with the second double tap,

• Double tap once to zoom in
• Double tap again to zoom out

A lot of users are used to this behaviour on the default android gallery, apps like whatsapp etc and it would be really helpful to developers. Please let me know if this is already available.

Use getScaledTouchSlop() instead of getTouchSlop()

getTouchSlop() is deprecated, but is not posible to use getScaledTouchSlop, returns this error:

Cannot make a static reference to the non-static method getScaledTouchSlop() from the type ViewConfiguration.

Can't find Easing/Cubic class in library for ImageViewTouchBase class

I wan to use this library in my application for scrollable imageview. I have downloaded and imported library code but It is showing errors in class ImageViewTouchBase.

It can not able to find class Easing/Cubic.

Do I have to use another library ?

Other scaletype than matrix

Hi,

I know that the code is written to a matrix scaletype but how can I fix it to support the fitxy scaletype because the matrix is just ugly...
or how can I fix my images so that they show up in a good way with the matrix scaletype.
plus does this zoom work with the android version 2.2?

thank you very much.

View full screen width?

Hello,

is it possible to use this control to show a picture which is bigger than the screen by zooming it to the screens width and let the user pan to the not visible parts of the picture?

Thank you,
Udo.

Clear ImageView Zoom

How do I clear programmatically the zoom on an already zoomed imageView ? that is how do i set the zoom to 1 and set it programatically?

Not working with Wrap_Content

Hi,

I need to add view dynamically from activity.and also I have to use it with WRAP_CONTENT height and width.

I have added below code but ImageView is not appearing at all in view.

final ImageViewTouch imgSurface = new ImageViewTouch(this);

    imgSurface.setImageBitmap(bitmap);
    final RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
            android.widget.RelativeLayout.LayoutParams.WRAP_CONTENT,
            android.widget.RelativeLayout.LayoutParams.WRAP_CONTENT);

    params.leftMargin =x;

    params.topMargin =y;
    imgSurface.setDisplayType(DisplayType.FIT_TO_SCREEN);
    relLayers.addView(imgSurface, params);
    relLayers.invalidate();

When I have changed WRAP_CONTENT to MATCH_PARENT,It is displaying all view.

Errors to import project in Eclipse

When I import the project in Eclipse I am getting errors in the class library/ImageViewTouchBase

import it.sephiroth.android.library.easing.Cubic; --> cannot be resolved
import it.sephiroth.android.library.easing.Easing; --> cannot be resolved

What am I doing wrong?