How can I get zoom functionality for images

Question

Is there a common way to show a big image and enable the user to zoom in and out and pan the image   Until now I found two ways     overwriting ImageView  that seems a little bit too much for such a common problem   using a webview but with less control over the overall layout etc

User · Answer

I adapted some code to create a TouchImageView that supports multitouch (>2.1). It is inspired by the book Hello, Android! (3rd edition)

It is contained within the following 3 files TouchImageView.java WrapMotionEvent.java EclairMotionEvent.java

TouchImageView.java

import se.robertfoss.ChanImageBrowser.Viewer;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.util.FloatMath;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

public class TouchImageView extends ImageView {

    private static final String TAG = "Touch";
    // These matrices will be used to move and zoom image
    Matrix matrix = new Matrix();
    Matrix savedMatrix = new Matrix();

    // We can be in one of these 3 states
    static final int NONE = 0;
    static final int DRAG = 1;
    static final int ZOOM = 2;
    int mode = NONE;

    // Remember some things for zooming
    PointF start = new PointF();
    PointF mid = new PointF();
    float oldDist = 1f;

    Context context;


    public TouchImageView(Context context) {
        super(context);
        super.setClickable(true);
        this.context = context;

        matrix.setTranslate(1f, 1f);
        setImageMatrix(matrix);
        setScaleType(ScaleType.MATRIX);

        setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent rawEvent) {
                WrapMotionEvent event = WrapMotionEvent.wrap(rawEvent);

                // Dump touch event to log
                if (Viewer.isDebug == true){
                    dumpEvent(event);
                }

                // Handle touch events here...
                switch (event.getAction() & MotionEvent.ACTION_MASK) {
                case MotionEvent.ACTION_DOWN:
                    savedMatrix.set(matrix);
                    start.set(event.getX(), event.getY());
                    Log.d(TAG, "mode=DRAG");
                    mode = DRAG;
                    break;
                case MotionEvent.ACTION_POINTER_DOWN:
                    oldDist = spacing(event);
                    Log.d(TAG, "oldDist=" + oldDist);
                    if (oldDist > 10f) {
                        savedMatrix.set(matrix);
                        midPoint(mid, event);
                        mode = ZOOM;
                        Log.d(TAG, "mode=ZOOM");
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    int xDiff = (int) Math.abs(event.getX() - start.x);
                    int yDiff = (int) Math.abs(event.getY() - start.y);
                    if (xDiff < 8 && yDiff < 8){
                        performClick();
                    }
                case MotionEvent.ACTION_POINTER_UP:
                    mode = NONE;
                    Log.d(TAG, "mode=NONE");
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (mode == DRAG) {
                        // ...
                        matrix.set(savedMatrix);
                        matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
                    } else if (mode == ZOOM) {
                        float newDist = spacing(event);
                        Log.d(TAG, "newDist=" + newDist);
                        if (newDist > 10f) {
                            matrix.set(savedMatrix);
                            float scale = newDist / oldDist;
                            matrix.postScale(scale, scale, mid.x, mid.y);
                        }
                    }
                    break;
                }

                setImageMatrix(matrix);
                return true; // indicate event was handled
            }

        });
    }


    public void setImage(Bitmap bm, int displayWidth, int displayHeight) { 
        super.setImageBitmap(bm);

        //Fit to screen.
        float scale;
        if ((displayHeight / bm.getHeight()) >= (displayWidth / bm.getWidth())){
            scale =  (float)displayWidth / (float)bm.getWidth();
        } else {
            scale = (float)displayHeight / (float)bm.getHeight();
        }

        savedMatrix.set(matrix);
        matrix.set(savedMatrix);
        matrix.postScale(scale, scale, mid.x, mid.y);
        setImageMatrix(matrix);


        // Center the image
        float redundantYSpace = (float)displayHeight - (scale * (float)bm.getHeight()) ;
        float redundantXSpace = (float)displayWidth - (scale * (float)bm.getWidth());

        redundantYSpace /= (float)2;
        redundantXSpace /= (float)2;


        savedMatrix.set(matrix);
        matrix.set(savedMatrix);
        matrix.postTranslate(redundantXSpace, redundantYSpace);
        setImageMatrix(matrix);
    }


    /** Show an event in the LogCat view, for debugging */
    private void dumpEvent(WrapMotionEvent event) {
        // ...
        String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE",
            "POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
        StringBuilder sb = new StringBuilder();
        int action = event.getAction();
        int actionCode = action & MotionEvent.ACTION_MASK;
        sb.append("event ACTION_").append(names[actionCode]);
        if (actionCode == MotionEvent.ACTION_POINTER_DOWN
                || actionCode == MotionEvent.ACTION_POINTER_UP) {
            sb.append("(pid ").append(
                    action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
            sb.append(")");
        }
        sb.append("[");
        for (int i = 0; i < event.getPointerCount(); i++) {
            sb.append("#").append(i);
            sb.append("(pid ").append(event.getPointerId(i));
            sb.append(")=").append((int) event.getX(i));
            sb.append(",").append((int) event.getY(i));
            if (i + 1 < event.getPointerCount())
            sb.append(";");
        }
        sb.append("]");
        Log.d(TAG, sb.toString());
    }

    /** Determine the space between the first two fingers */
    private float spacing(WrapMotionEvent event) {
        // ...
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return FloatMath.sqrt(x * x + y * y);
    }

    /** Calculate the mid point of the first two fingers */
    private void midPoint(PointF point, WrapMotionEvent event) {
        // ...
        float x = event.getX(0) + event.getX(1);
        float y = event.getY(0) + event.getY(1);
        point.set(x / 2, y / 2);
    }
}

WrapMotionEvent.java

import android.view.MotionEvent;

public class WrapMotionEvent {
protected MotionEvent event;




    protected WrapMotionEvent(MotionEvent event) {
        this.event = event;
    }

    static public WrapMotionEvent wrap(MotionEvent event) {
            try {
                return new EclairMotionEvent(event);
            } catch (VerifyError e) {
                return new WrapMotionEvent(event);
            }
    }



    public int getAction() {
            return event.getAction();
    }

    public float getX() {
            return event.getX();
    }

    public float getX(int pointerIndex) {
            verifyPointerIndex(pointerIndex);
            return getX();
    }

    public float getY() {
            return event.getY();
    }

    public float getY(int pointerIndex) {
            verifyPointerIndex(pointerIndex);
            return getY();
    }

    public int getPointerCount() {
            return 1;
    }

    public int getPointerId(int pointerIndex) {
            verifyPointerIndex(pointerIndex);
            return 0;
    }

    private void verifyPointerIndex(int pointerIndex) {
            if (pointerIndex > 0) {
                throw new IllegalArgumentException(
                    "Invalid pointer index for Donut/Cupcake");
            }
    }

}

EclairMotionEvent.java

import android.view.MotionEvent;

public class EclairMotionEvent extends WrapMotionEvent {

    protected EclairMotionEvent(MotionEvent event) {
            super(event);
    }

    public float getX(int pointerIndex) {
            return event.getX(pointerIndex);
    }

    public float getY(int pointerIndex) {
            return event.getY(pointerIndex);
    }

    public int getPointerCount() {
            return event.getPointerCount();
    }

    public int getPointerId(int pointerIndex) {
            return event.getPointerId(pointerIndex);
    }
}

User · Answer

I just integrated Robert Foss s TouchImageView  it worked perfectly out of the box  Thanks   I just modified a bit the code so I could be able to instantiate it from my layout xml   Just add two constructors  public TouchImageView Context context  AttributeSet attrs        super context  attrs       init context      public TouchImageView Context context        super context       init context       and transform the old constructor into an init method   private void init Context context            old code ofconstructor of Robert Moss s code

User · Answer

I used a WebView and loaded the image from the memory via  webview loadUrl  file           The WebView handles all the panning zooming and scrolling  If you use wrap content the webview won t be bigger then the image and no white areas are shown   The WebView is the better ImageView

User · Answer

In Response to Janusz original question  there are several ways to achieve this all of which vary in their difficulty level and have been stated below  Using a web view is good  but it is very limited in terms of look and feel and controllability  If you are drawing a bitmap from a canvas  the most versatile solutions that have been proposed seems to be MikeOrtiz s  Robert Foss s and or what Jacob Nordfalk suggested  There is a great example for incorporating the android-multitouch-controller by PaulBourke  and is great for having the multi-touch support and alltypes of custom views    Personally  if you are simply drawing a canvas to a bitmap and then displaying it inside and ImageView and want to be able to zoom into and move around using multi touch  I find MikeOrtiz s solution as the easiest  However  for my purposes the code from the Git that he has provided seems to only work when his TouchImageView custom ImageView class is the only child or provide the layout params as   android layout height  match parent  android layout height  match parent    Unfortunately due to my layout design  I needed  wrap content  for  layout height   When I changed it to this the image was cropped at the bottom and I couldn t scroll or zoom to the cropped region  So I took a look at the Source for ImageView just to see how Android implemented  onMeasure  and changed MikeOrtiz s to suit        Override protected void onMeasure  int widthMeasureSpec  int heightMeasureSpec        super onMeasure widthMeasureSpec  heightMeasureSpec             ADDED THIS                     int  w    int  bmWidth        int  h    int  bmHeight       width   resolveSize w  widthMeasureSpec          height   resolveSize h  heightMeasureSpec            END                       width   MeasureSpec getSize widthMeasureSpec        REMOVED       height   MeasureSpec getSize heightMeasureSpec      REMOVED        Fit to screen      float scale      float scaleX     float width    float bmWidth      float scaleY    float height    float bmHeight       scale   Math min scaleX  scaleY       matrix setScale scale  scale       setImageMatrix matrix       saveScale   1f          Center the image     redundantYSpace    float height -  scale    float bmHeight        redundantXSpace    float width -  scale    float bmWidth       redundantYSpace     float 2      redundantXSpace     float 2       matrix postTranslate redundantXSpace  redundantYSpace        origWidth   width - 2   redundantXSpace      origHeight   height - 2   redundantYSpace        origHeight   bmHeight      right   width   saveScale - width -  2   redundantXSpace   saveScale       bottom   height   saveScale - height -  2   redundantYSpace   saveScale        setImageMatrix matrix       Here resolveSize int int  is a  Utility to reconcile a desired size with constraints imposed by a MeasureSpec  where    Parameters    - size How big the view wants to be  - MeasureSpec Constraints imposed by the parent   Returns    - The size this view should be     So essentially providing a behaviour a little more similar to the original ImageView class when the image is loaded  Some more changes could be made to support a greater variety of screens which modify the aspect ratio  But for now I Hope this helps  Thanks to MikeOrtiz for his original code  great work

User · Answer

Robert Foss   Mike Ortiz  thank you very much for your work  I merged your work  and completed Robert classes for android   2 0 with Mike additional work   As result of my work I present Android Touch Gallery  based on ViewPager and used modificated TouchImageView  Images loading by URL and you can zoom and drag them  You can find it here https   github com Dreddik AndroidTouchGallery

User · Answer

Override public void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity main       imageDetail    ImageView  findViewById R id imageView1       imageDetail setOnTouchListener new View OnTouchListener               Override         public boolean onTouch View v  MotionEvent event                ImageView view    ImageView  v              System out println  matrix     savedMatrix toString                 switch  event getAction    amp  MotionEvent ACTION MASK                    case MotionEvent ACTION DOWN                      savedMatrix set matrix                       startPoint set event getX    event getY                         mode   DRAG                      break                  case MotionEvent ACTION POINTER DOWN                      oldDist   spacing event                       if  oldDist  gt  10f                            savedMatrix set matrix                           midPoint midPoint  event                           mode   ZOOM                                            break                  case MotionEvent ACTION UP                  case MotionEvent ACTION POINTER UP                      mode   NONE                      break                  case MotionEvent ACTION MOVE                      if  mode    DRAG                            matrix set savedMatrix                           matrix postTranslate event getX   - startPoint x  event getY   - startPoint y                         else if  mode    ZOOM                            float newDist   spacing event                           if  newDist  gt  10f                                matrix set savedMatrix                               float scale   newDist   oldDist                              matrix postScale scale  scale  midPoint x  midPoint y                                                                       break                            view setImageMatrix matrix               return true                       SuppressLint  FloatMath           private float spacing MotionEvent event                float x   event getX 0  - event getX 1               float y   event getY 0  - event getY 1               return FloatMath sqrt x   x   y   y                      private void midPoint PointF point  MotionEvent event                float x   event getX 0    event getX 1               float y   event getY 0    event getY 1               point set x   2  y   2                         and drawable folder should have bticn image file  perfectly works

User · Answer

Try using ZoomView for zooming any other view   http   code google com p android-zoom-view  it s easy  free and fun to use

User · Answer

Adding to  Mike s answer  I also needed double tap to restore the image to the original dimensions when first viewed  So I added a whole heap of  orig     instance variables and added the SimpleOnGestureListener which did the trick   import android content Context  import android graphics Bitmap  import android graphics Matrix  import android graphics PointF  import android view GestureDetector  import android view MotionEvent  import android view ScaleGestureDetector  import android view View  import android widget ImageView   public class TouchImageView extends ImageView        Matrix matrix   new Matrix            We can be in one of these 3 states     static final int NONE   0      static final int DRAG   1      static final int ZOOM   2      int mode   NONE          Remember some things for zooming     PointF last   new PointF        PointF start   new PointF        float minScale   1f      float maxScale   3f      float   m       float redundantXSpace  redundantYSpace  origRedundantXSpace  origRedundantYSpace        float width  height      static final int CLICK   3      static final float SAVE SCALE   1f      float saveScale   SAVE SCALE       float right  bottom  origWidth  origHeight  bmWidth  bmHeight  origScale  origBottom origRight       ScaleGestureDetector mScaleDetector      GestureDetector mGestureDetector       Context context       public TouchImageView Context context            super context           super setClickable true           this context   context          mScaleDetector   new ScaleGestureDetector context  new ScaleListener              matrix setTranslate 1f  1f           m   new float 9           setImageMatrix matrix           setScaleType ScaleType MATRIX            setOnTouchListener new OnTouchListener                   Override             public boolean onTouch View v  MotionEvent event                     boolean onDoubleTapEvent   mGestureDetector onTouchEvent event                   if  onDoubleTapEvent                           Reset Image to original scale values                     mode   NONE                      bottom   origBottom                      right   origRight                      last   new PointF                        start   new PointF                        m   new float 9                       saveScale   SAVE SCALE                      matrix   new Matrix                        matrix setScale origScale  origScale                       matrix postTranslate origRedundantXSpace  origRedundantYSpace                       setImageMatrix matrix                       invalidate                        return true                                       mScaleDetector onTouchEvent event                    matrix getValues m                   float x   m Matrix MTRANS X                   float y   m Matrix MTRANS Y                   PointF curr   new PointF event getX    event getY                      switch  event getAction                      case MotionEvent ACTION DOWN                      last set event getX    event getY                         start set last                       mode   DRAG                      break                  case MotionEvent ACTION MOVE                      if  mode    DRAG                            float deltaX   curr x - last x                          float deltaY   curr y - last y                          float scaleWidth   Math round origWidth   saveScale                           float scaleHeight   Math round origHeight   saveScale                           if  scaleWidth  lt  width                                deltaX   0                              if  y   deltaY  gt  0                                  deltaY   -y                              else if  y   deltaY  lt  -bottom                                  deltaY   - y   bottom                             else if  scaleHeight  lt  height                                deltaY   0                              if  x   deltaX  gt  0                                  deltaX   -x                              else if  x   deltaX  lt  -right                                  deltaX   - x   right                             else                               if  x   deltaX  gt  0                                  deltaX   -x                              else if  x   deltaX  lt  -right                                  deltaX   - x   right                                if  y   deltaY  gt  0                                  deltaY   -y                              else if  y   deltaY  lt  -bottom                                  deltaY   - y   bottom                                                     matrix postTranslate deltaX  deltaY                           last set curr x  curr y                                             break                   case MotionEvent ACTION UP                      mode   NONE                      int xDiff    int  Math abs curr x - start x                       int yDiff    int  Math abs curr y - start y                       if  xDiff  lt  CLICK  amp  amp  yDiff  lt  CLICK                          performClick                        break                   case MotionEvent ACTION POINTER UP                      mode   NONE                      break                                     setImageMatrix matrix                   invalidate                     return true     indicate event was handled                                     mGestureDetector   new GestureDetector context  new GestureDetector SimpleOnGestureListener                  Override             public boolean onDoubleTapEvent MotionEvent e                    return true                                        Override     public void setImageBitmap Bitmap bm            super setImageBitmap bm           bmWidth   bm getWidth            bmHeight   bm getHeight               public void setMaxZoom float x            maxScale   x             private class ScaleListener extends             ScaleGestureDetector SimpleOnScaleGestureListener            Override         public boolean onScaleBegin ScaleGestureDetector detector                mode   ZOOM              return true                      Override         public boolean onScale ScaleGestureDetector detector                float mScaleFactor    float  Math min                      Math max  95f  detector getScaleFactor     1 05               float origScale   saveScale              saveScale    mScaleFactor              if  saveScale  gt  maxScale                    saveScale   maxScale                  mScaleFactor   maxScale   origScale                else if  saveScale  lt  minScale                    saveScale   minScale                  mScaleFactor   minScale   origScale                            right   width   saveScale - width                     -  2   redundantXSpace   saveScale               bottom   height   saveScale - height                     -  2   redundantYSpace   saveScale               if  origWidth   saveScale  lt   width                        origHeight   saveScale  lt   height                    matrix postScale mScaleFactor  mScaleFactor  width   2                          height   2                   if  mScaleFactor  lt  1                        matrix getValues m                       float x   m Matrix MTRANS X                       float y   m Matrix MTRANS Y                       if  mScaleFactor  lt  1                            if  Math round origWidth   saveScale   lt  width                                if  y  lt  -bottom                                  matrix postTranslate 0  - y   bottom                                else if  y  gt  0                                  matrix postTranslate 0  -y                             else                               if  x  lt  -right                                  matrix postTranslate - x   right   0                               else if  x  gt  0                                  matrix postTranslate -x  0                                                                                   else                   matrix postScale mScaleFactor  mScaleFactor                          detector getFocusX    detector getFocusY                     matrix getValues m                   float x   m Matrix MTRANS X                   float y   m Matrix MTRANS Y                   if  mScaleFactor  lt  1                        if  x  lt  -right                          matrix postTranslate - x   right   0                       else if  x  gt  0                          matrix postTranslate -x  0                       if  y  lt  -bottom                          matrix postTranslate 0  - y   bottom                        else if  y  gt  0                          matrix postTranslate 0  -y                                               return true                         Override     protected void onMeasure int widthMeasureSpec  int heightMeasureSpec            super onMeasure widthMeasureSpec  heightMeasureSpec           width   MeasureSpec getSize widthMeasureSpec           height   MeasureSpec getSize heightMeasureSpec              Fit to screen          float scale          float scaleX    float  width    float  bmWidth          float scaleY    float  height    float  bmHeight          scale   Math min scaleX  scaleY           matrix setScale scale  scale           setImageMatrix matrix           saveScale   SAVE SCALE          origScale   scale              Center the image         redundantYSpace    float  height -  scale    float  bmHeight           redundantXSpace    float  width -  scale    float  bmWidth           redundantYSpace     float  2          redundantXSpace     float  2           origRedundantXSpace   redundantXSpace          origRedundantYSpace   redundantYSpace           matrix postTranslate redundantXSpace  redundantYSpace            origWidth   width - 2   redundantXSpace          origHeight   height - 2   redundantYSpace          right   width   saveScale - width -  2   redundantXSpace   saveScale           bottom   height   saveScale - height                 -  2   redundantYSpace   saveScale           origRight   right          origBottom   bottom          setImageMatrix matrix

User · Answer

Something like below will do it    Override public boolean onTouch View v MotionEvent e         tap tap2 drag pinch none      int mask e getActionMasked        posx e getX   posy e getY         float midx  img getWidth   2f      float midy img getHeight   2f      int fingers e getPointerCount         switch mask                case MotionEvent ACTION POINTER UP              tap2 1 break           case MotionEvent ACTION UP              tap 1 break           case MotionEvent ACTION MOVE              drag 1            if fingers  2  nowsp Math abs e getX 0 -e getX 1         if  fingers  2  amp  amp  drag  0    tap2 1 tap 0 drag 0       if  fingers  2  amp  amp  drag  1    tap2 0 tap 0 drag 0 pinch 1        if pinch  1                 if nowsp gt oldsp scale  0 1          if nowsp lt oldsp scale- 0 1          tap2 tap drag 0                if tap2  1                        scale- 0 1              tap 0 drag 0                if tap  1                        tap2 0 drag 0              scale  0 1                if drag  1                        movx posx-oldx              movy posy-oldy              x  movx              y  movy              tap 0 tap2 0                m setTranslate x y       m postScale scale scale midx midy       img setImageMatrix m  img invalidate        tap tap2 drag none      oldx posx oldy posy      oldsp nowsp      return true      public void onCreate Bundle b            super onCreate b        img new ImageView this       img setScaleType ImageView ScaleType MATRIX       img setOnTouchListener this        path Environment getExternalStorageDirectory   getPath           path path   DCIM    behala jpg       byte   bytes      bytes null      try          FileInputStream fis          fis new FileInputStream path           BufferedInputStream bis          bis new BufferedInputStream fis           bytes new byte bis available             bis read bytes           if bis  null bis close            if fis  null fis close                catch Exception e                    ret  Nothing                 Bitmap bmp BitmapFactory decodeByteArray bytes 0 bytes length        img setImageBitmap bmp        setContentView img       For viewing complete program see here  Program to zoom image in android

User · Answer

You could also try out http   code google com p android-multitouch-controller   The library is really great  although initially a little hard to grasp

User · Answer

You can try using the LayoutParams for this  public void zoom boolean flag       if flag           int width 40          int height 40            else          int width 20          int height 20            RelativeLayout LayoutParams param new RelativeLayout LayoutParams width height     use the parent layout of the ImageView      imageView setLayoutParams param     imageView is the view which needs zooming      ZoomIn   zoom true   ZoomOut   zoom false

User · Answer

UPDATE  I ve just given TouchImageView a new update  It now includes Double Tap Zoom and Fling in addition to Panning and Pinch Zoom  The code below is very dated  You can check out the github project to get the latest code   USAGE  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    lt com example touch TouchImageView     android id    id img        android layout width  match parent      android layout height  match parent    gt    Note  I ve removed my prior answer  which included some very old code and now link straight to the most updated code on github   ViewPager  If you are interested in putting TouchImageView in a ViewPager  refer to this answer

User · Answer

This is a very late addition to this thread but I ve been working on an image view that supports zoom and pan and has a couple of features I haven t found elsewhere  This started out as a way of displaying very large images without causing OutOfMemoryErrors  by subsampling the image when zoomed out and loading higher resolution tiles when zoomed in  It now supports use in a ViewPager  rotation manually or using EXIF information  90   stops   override of selected touch events using OnClickListener or your own GestureDetector or OnTouchListener  subclassing to add overlays  pan while zooming  and fling momentum   It s not intended as a general use replacement for ImageView so doesn t extend it  and doesn t support display of images from resources  only assets and external files  It requires SDK 10   Source is on GitHub  and there s a sample that illustrates use in a ViewPager   https   github com davemorrissey subsampling-scale-image-view

[android] How can I get zoom functionality for images?

Examples related to android

Examples related to imageview

Examples related to zooming