Android Image View Pinch Zooming

Question

I am using code sample from Making Sense of Multitouch for zooming image view  On ScaleListener I added ScaleGestureDetector getFocusX   and getFocusY  for content to zoom about the focal point of the gesture  It is working fine    The problem is  on first multitouch the entire Image drawing position is changing to the current touch point and zooming it from there  Could you help me to resolve this issue   Here is My Code Sample For TouchImageView   public class TouchImageViewSample extends ImageView    private Paint borderPaint   null  private Paint backgroundPaint   null   private float mPosX   0f  private float mPosY   0f   private float mLastTouchX  private float mLastTouchY  private static final int INVALID POINTER ID   -1  private static final String LOG TAG    TouchImageView       The    active pointer    is the one currently moving our object  private int mActivePointerId   INVALID POINTER ID   public TouchImageViewSample Context context        this context  null  0      public TouchImageViewSample Context context  AttributeSet attrs        this context  attrs  0      private ScaleGestureDetector mScaleDetector  private float mScaleFactor   1 f      Existing code     public TouchImageViewSample Context context  AttributeSet attrs  int defStyle        super context  attrs  defStyle          Create our ScaleGestureDetector     mScaleDetector   new ScaleGestureDetector context  new ScaleListener          borderPaint   new Paint        borderPaint setARGB 255  255  128  0       borderPaint setStyle Paint Style STROKE       borderPaint setStrokeWidth 4        backgroundPaint   new Paint        backgroundPaint setARGB 32  255  255  255       backgroundPaint setStyle Paint Style FILL        Override public boolean onTouchEvent MotionEvent ev           Let the ScaleGestureDetector inspect all events      mScaleDetector onTouchEvent ev        final int action   ev getAction        switch  action  amp  MotionEvent ACTION MASK        case MotionEvent ACTION DOWN            final float x   ev getX            final float y   ev getY             mLastTouchX   x          mLastTouchY   y           mActivePointerId   ev getPointerId 0           break             case MotionEvent ACTION MOVE            final int pointerIndex   ev findPointerIndex mActivePointerId           final float x   ev getX pointerIndex           final float y   ev getY pointerIndex               Only move if the ScaleGestureDetector isn t processing a gesture          if   mScaleDetector isInProgress                  final float dx   x - mLastTouchX              final float dy   y - mLastTouchY               mPosX    dx              mPosY    dy               invalidate                       mLastTouchX   x          mLastTouchY   y          break             case MotionEvent ACTION UP            mActivePointerId   INVALID POINTER ID          break             case MotionEvent ACTION CANCEL            mActivePointerId   INVALID POINTER ID          break             case MotionEvent ACTION POINTER UP            final int pointerIndex    ev getAction    amp  MotionEvent ACTION POINTER INDEX MASK   gt  gt  MotionEvent ACTION POINTER INDEX SHIFT          final int pointerId   ev getPointerId pointerIndex           if  pointerId    mActivePointerId                   This was our active pointer going up  Choose a new                active pointer and adjust accordingly              final int newPointerIndex   pointerIndex    0   1   0              mLastTouchX   ev getX newPointerIndex               mLastTouchY   ev getY newPointerIndex               mActivePointerId   ev getPointerId newPointerIndex                     break                   return true            non-Javadoc          see android view View draw android graphics Canvas       Override public void draw Canvas canvas        super draw canvas       canvas drawRect 0  0  getWidth   - 1  getHeight   - 1  borderPaint       Override public void onDraw Canvas canvas        canvas drawRect 0  0  getWidth   - 1  getHeight   - 1  backgroundPaint       if  this getDrawable      null            canvas save            canvas translate mPosX  mPosY            Matrix matrix   new Matrix            matrix postScale mScaleFactor  mScaleFactor  pivotPointX                  pivotPointY              canvas setMatrix matrix            canvas drawBitmap                    BitmapDrawable  this getDrawable    getBitmap    matrix                  null               this getDrawable   draw canvas           canvas restore                    non-Javadoc          see    android widget ImageView setImageDrawable android graphics drawable Drawable           Override public void setImageDrawable Drawable drawable           Constrain to given size but keep aspect ratio     int width   drawable getIntrinsicWidth        int height   drawable getIntrinsicHeight        mLastTouchX   mPosX   0      mLastTouchY   mPosY   0       int borderWidth    int  borderPaint getStrokeWidth        mScaleFactor   Math min   float  getLayoutParams   width - borderWidth                width    float  getLayoutParams   height - borderWidth                height       pivotPointX      float  getLayoutParams   width - borderWidth  -  int   width   mScaleFactor     2      pivotPointY      float  getLayoutParams   height - borderWidth  -  int   height   mScaleFactor     2      super setImageDrawable drawable      float pivotPointX   0f  float pivotPointY   0f   private class ScaleListener extends         ScaleGestureDetector SimpleOnScaleGestureListener         Override     public boolean onScale ScaleGestureDetector detector            mScaleFactor    detector getScaleFactor             pivotPointX   detector getFocusX            pivotPointY   detector getFocusY             Log d LOG TAG   mScaleFactor     mScaleFactor           Log d LOG TAG   pivotPointY     pivotPointY      pivotPointX                      pivotPointX           mScaleFactor   Math max 0 05f  mScaleFactor            invalidate            return true            And here how I used it within my activity   ImageView imageView    ImageView  findViewById R id imgView    int hMargin    int   displayMetrics widthPixels    10   int vMargin    int   displayMetrics heightPixels    10    RelativeLayout LayoutParams params   new RelativeLayout LayoutParams displayMetrics widthPixels -  hMargin   2    int  displayMetrics heightPixels - btnCamera getHeight    -  vMargin   2    params leftMargin   hMargin  params topMargin    vMargin  imageView setLayoutParams params   imageView setImageDrawable drawable

User · Answer

Add bellow line in build gradle   compile  com commit451 PhotoView 1 2 4    or  compile  com github chrisbanes PhotoView 1 3 0    In Java file   PhotoViewAttacher photoAttacher  photoAttacher  new PhotoViewAttacher Your Image View   photoAttacher update

User · Answer

Override public boolean onTouch View v  MotionEvent event           TODO Auto-generated method stub      ImageView view    ImageView  v      dumpEvent event           Handle touch events here        switch  event getAction    amp  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  gt  10f                savedMatrix set matrix               midPoint mid  event               mode   ZOOM              Log d TAG   mode ZOOM                      break      case MotionEvent ACTION UP      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  gt  10f                    matrix set savedMatrix                   float scale   newDist   oldDist                  matrix postScale scale  scale  mid x  mid y                                   break             view setImageMatrix matrix       return true     private void dumpEvent MotionEvent 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  amp  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  gt  gt  MotionEvent ACTION POINTER ID SHIFT           sb append                 sb append           for  int i   0  i  lt  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  lt  event getPointerCount                sb append                 sb append           Log d TAG  sb toString            Determine the space between the first two fingers    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          Calculate the mid point of the first two fingers    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 dont forget to set scaleType property to matrix of ImageView tag like    lt ImageView     android id    id imageEnhance      android layout width  fill parent      android layout height  wrap content      android layout gravity  center horizontal      android layout marginBottom  15dp      android layout marginLeft  15dp      android layout marginRight  15dp      android layout marginTop  15dp      android background   drawable enhanceimageframe      android scaleType  matrix   gt   lt  ImageView gt    and the variables used are      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  String savedItemClicked

User · Answer

I made code for imageview with pinch to zoom using zoomageview  so user can drag the image off the screen and zoom-In   zoom-out the image    You can follow this link to get the Step By Step Code and also given Output Screenshot   https   stackoverflow com a 58074642 11613683

User · Answer

Custom zoom view in Kotlin  import android content Context  import android graphics Matrix  import android graphics PointF  import android util AttributeSet  import android util Log  import android view MotionEvent  import android view ScaleGestureDetector  import android view ScaleGestureDetector SimpleOnScaleGestureListener  import androidx appcompat widget AppCompatImageView   class ZoomImageview   AppCompatImageView   var matri  Matrix    null var mode   NONE     Remember some things for zooming var last   PointF   var start   PointF   var minScale   1f var maxScale   3f lateinit var m  FloatArray var viewWidth   0 var viewHeight   0 var saveScale   1f protected var origWidth   0f protected var origHeight   0f var oldMeasuredWidth   0 var oldMeasuredHeight   0 var mScaleDetector  ScaleGestureDetector    null var contex  Context    null  constructor context  Context    super context        sharedConstructing context     constructor context  Context  attrs  AttributeSet     super context  attrs        sharedConstructing context     private fun sharedConstructing context  Context        super setClickable true      this contex  context     mScaleDetector   ScaleGestureDetector context  ScaleListener        matri   Matrix       m   FloatArray 9      imageMatrix   matri     scaleType   ScaleType MATRIX     setOnTouchListener   v  event - gt          mScaleDetector   onTouchEvent event          val curr   PointF event x  event y          when  event action                MotionEvent ACTION DOWN - gt                    last set curr                  start set last                  mode   DRAG                           MotionEvent ACTION MOVE - gt  if  mode    DRAG                    val deltaX   curr x - last x                 val deltaY   curr y - last y                 val fixTransX   getFixDragTrans deltaX  viewWidth toFloat    origWidth   saveScale                  val fixTransY   getFixDragTrans deltaY  viewHeight toFloat    origHeight   saveScale                  matri   postTranslate fixTransX  fixTransY                  fixTrans                   last curr x    curr y                           MotionEvent ACTION UP - gt                    mode   NONE                 val xDiff   Math abs curr x - start x  toInt                   val yDiff   Math abs curr y - start y  toInt                   if  xDiff  lt  CLICK  amp  amp  yDiff  lt  CLICK  performClick                             MotionEvent ACTION POINTER UP - gt  mode   NONE                   imageMatrix   matri         invalidate           true    indicate event was handled          fun setMaxZoom x  Float        maxScale   x    private inner class ScaleListener   SimpleOnScaleGestureListener         override fun onScaleBegin detector  ScaleGestureDetector   Boolean           mode   ZOOM         return true            override fun onScale detector  ScaleGestureDetector   Boolean           var mScaleFactor   detector scaleFactor         val origScale   saveScale         saveScale    mScaleFactor         if  saveScale  gt  maxScale                saveScale   maxScale             mScaleFactor   maxScale   origScale           else if  saveScale  lt  minScale                saveScale   minScale             mScaleFactor   minScale   origScale                   if  origWidth   saveScale  lt   viewWidth    origHeight   saveScale  lt   viewHeight  matri   postScale mScaleFactor  mScaleFactor  viewWidth   2 toFloat    viewHeight   2 toFloat    else matri   postScale mScaleFactor  mScaleFactor  detector focusX  detector focusY          fixTrans           return true          fun fixTrans         matri   getValues m      val transX   m Matrix MTRANS X      val transY   m Matrix MTRANS Y      val fixTransX   getFixTrans transX  viewWidth toFloat    origWidth   saveScale      val fixTransY   getFixTrans transY  viewHeight toFloat    origHeight   saveScale      if  fixTransX    0f    fixTransY    0f  matri   postTranslate fixTransX  fixTransY     fun getFixTrans trans  Float  viewSize  Float  contentSize  Float   Float       val minTrans  Float     val maxTrans  Float     if  contentSize  lt   viewSize            minTrans   0f         maxTrans   viewSize - contentSize       else           minTrans   viewSize - contentSize         maxTrans   0f           if  trans  lt  minTrans  return -trans   minTrans     if  trans  gt  maxTrans  return -trans   maxTrans     return 0f    fun getFixDragTrans delta  Float  viewSize  Float  contentSize  Float   Float       if  contentSize  lt   viewSize            return 0f       else           return delta          override fun onMeasure widthMeasureSpec  Int  heightMeasureSpec  Int        super onMeasure widthMeasureSpec  heightMeasureSpec      viewWidth   MeasureSpec getSize widthMeasureSpec      viewHeight   MeasureSpec getSize heightMeasureSpec                Rescales image on rotation            if  oldMeasuredHeight    viewWidth  amp  amp  oldMeasuredHeight    viewHeight    viewWidth    0    viewHeight    0  return     oldMeasuredHeight   viewHeight     oldMeasuredWidth   viewWidth     if  saveScale    1f              Fit to screen          val scale  Float         val drawable   drawable         if  drawable    null    drawable intrinsicWidth    0    drawable intrinsicHeight    0  return         val bmWidth   drawable intrinsicWidth         val bmHeight   drawable intrinsicHeight         Log d  quot bmSize quot    quot bmWidth   bmWidth bmHeight    bmHeight quot           val scaleX   viewWidth toFloat     bmWidth toFloat           val scaleY   viewHeight toFloat     bmHeight toFloat           scale   Math min scaleX  scaleY          matri   setScale scale  scale             Center the image         var redundantYSpace   viewHeight toFloat   - scale   bmHeight toFloat           var redundantXSpace   viewWidth toFloat   - scale   bmWidth toFloat           redundantYSpace    2 toFloat           redundantXSpace    2 toFloat           matri   postTranslate redundantXSpace  redundantYSpace          origWidth   viewWidth - 2   redundantXSpace         origHeight   viewHeight - 2   redundantYSpace         imageMatrix   matri           fixTrans      companion object          We can be in one of these 3 states     const val NONE   0     const val DRAG   1     const val ZOOM   2     const val CLICK   3

User · Answer

You can use this class   TouchImageView

User · Answer

I made my own custom imageview with pinch to zoom  There is no limits borders on Chirag Ravals code  so user can drag the image off the screen  This will fix it   Here is the CustomImageView class       public class CustomImageVIew extends ImageView implements OnTouchListener         private Matrix matrix   new Matrix        private Matrix savedMatrix   new Matrix         static final int NONE   0      static final int DRAG   1      static final int ZOOM   2       private int mode   NONE       private PointF mStartPoint   new PointF        private PointF mMiddlePoint   new PointF        private Point mBitmapMiddlePoint   new Point         private float oldDist   1f      private float matrixValues      0f  0f  0f  0f  0f  0f  0f  0f  0f       private float scale      private float oldEventX   0      private float oldEventY   0      private float oldStartPointX   0      private float oldStartPointY   0      private int mViewWidth   -1      private int mViewHeight   -1      private int mBitmapWidth   -1      private int mBitmapHeight   -1      private boolean mDraggable   false        public CustomImageVIew Context context            this context  null  0              public CustomImageVIew Context context  AttributeSet attrs            this context  attrs  0              public CustomImageVIew Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle           this setOnTouchListener this               Override     public void onSizeChanged  int w  int h  int oldw  int oldh           super onSizeChanged w  h  oldw  oldh           mViewWidth   w          mViewHeight   h             public void setBitmap Bitmap bitmap           if bitmap    null               setImageBitmap bitmap                mBitmapWidth   bitmap getWidth                mBitmapHeight   bitmap getHeight                mBitmapMiddlePoint x    mViewWidth   2  -  mBitmapWidth    2               mBitmapMiddlePoint y    mViewHeight   2  -  mBitmapHeight   2                matrix postTranslate mBitmapMiddlePoint x  mBitmapMiddlePoint y               this setImageMatrix matrix                         Override     public boolean onTouch View v  MotionEvent event           switch  event getAction    amp  MotionEvent ACTION MASK            case MotionEvent ACTION DOWN              savedMatrix set matrix               mStartPoint set event getX    event getY                 mode   DRAG              break          case MotionEvent ACTION POINTER DOWN              oldDist   spacing event               if oldDist  gt  10f                   savedMatrix set matrix                   midPoint mMiddlePoint  event                   mode   ZOOM                            break          case MotionEvent ACTION UP          case MotionEvent ACTION POINTER UP              mode   NONE              break          case MotionEvent ACTION MOVE              if mode    DRAG                   drag event                 else if mode    ZOOM                   zoom event                              break                     return true              public void drag MotionEvent event          matrix getValues matrixValues           float left   matrixValues 2          float top   matrixValues 5          float bottom    top    matrixValues 0    mBitmapHeight   - mViewHeight         float right    left    matrixValues 0    mBitmapWidth   -mViewWidth          float eventX   event getX           float eventY   event getY           float spacingX   eventX - mStartPoint x         float spacingY   eventY - mStartPoint y         float newPositionLeft    left   lt  0   spacingX   spacingX   -1    left         float newPositionRight    spacingX    right         float newPositionTop    top   lt  0   spacingY   spacingY   -1    top         float newPositionBottom    spacingY    bottom         boolean x   true         boolean y   true          if newPositionRight  lt  0 0f    newPositionLeft  gt  0 0f              if newPositionRight  lt  0 0f  amp  amp  newPositionLeft  gt  0 0f                  x   false               else                 eventX   oldEventX                 mStartPoint x   oldStartPointX                               if newPositionBottom  lt  0 0f    newPositionTop  gt  0 0f              if newPositionBottom  lt  0 0f  amp  amp  newPositionTop  gt  0 0f                  y   false               else                 eventY   oldEventY                 mStartPoint y   oldStartPointY                                if mDraggable              matrix set savedMatrix              matrix postTranslate x  eventX - mStartPoint x   0  y  eventY - mStartPoint y   0              this setImageMatrix matrix              if x oldEventX   eventX             if y oldEventY   eventY             if x oldStartPointX   mStartPoint x             if y oldStartPointY   mStartPoint y                     public void zoom MotionEvent event          matrix getValues matrixValues           float newDist   spacing event          float bitmapWidth   matrixValues 0    mBitmapWidth         float bimtapHeight   matrixValues 0    mBitmapHeight         boolean in   newDist  gt  oldDist          if  in  amp  amp  matrixValues 0   lt  1              return                  if bitmapWidth  gt  mViewWidth    bimtapHeight  gt  mViewHeight              mDraggable   true           else             mDraggable   false                   float midX    mViewWidth   2          float midY    mViewHeight   2           matrix set savedMatrix          scale   newDist   oldDist         matrix postScale scale  scale  bitmapWidth  gt  mViewWidth   mMiddlePoint x   midX  bimtapHeight  gt  mViewHeight   mMiddlePoint y   midY            this setImageMatrix matrix                       Determine the space between the first two fingers        private float spacing MotionEvent event            float x   event getX 0  - event getX 1           float y   event getY 0  - event getY 1            return  float Math sqrt x   x   y   y                  Calculate the mid point of the first two fingers        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               This is how you can use it in your activity   CustomImageVIew mImageView    CustomImageVIew findViewById R id customImageVIew1   mImage setBitmap your bitmap     And layout    lt your package name CustomImageVIew         android id    id customImageVIew1          android layout width  fill parent          android layout height  fill parent          android layout marginBottom  15dp          android layout marginLeft  15dp          android layout marginRight  15dp          android layout marginTop  15dp          android layout centerHorizontal  true          android layout centerVertical  true           android scaleType  matrix   gt     important

User · Answer

Using a ScaleGestureDetector  When learning a new concept I don t like using libraries or code dumps  I found a good description here and in the documentation of how to resize an image by pinching  This answer is a slightly modified summary  You will probably want to add more functionality later  but it will help you get started     Layout  The ImageView just uses the app logo since it is already available  You can replace it with any image you like  though    lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout     xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent  gt        lt ImageView         android id    id imageView          android layout width  match parent          android layout height  match parent          android src   mipmap ic launcher          android layout centerInParent  true   gt    lt  RelativeLayout gt    Activity  We use a ScaleGestureDetector on the activity to listen to touch events  When a scale  ie  pinch  gesture is detected  then the scale factor is used to resize the ImageView   public class MainActivity 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 activity main               initialize the view and the gesture detector         mImageView   findViewById R id imageView           mScaleGestureDetector   new ScaleGestureDetector this  new ScaleListener                   this redirects all touch events in the activity to the gesture detector      Override     public boolean onTouchEvent MotionEvent event            return mScaleGestureDetector onTouchEvent event              private class ScaleListener extends ScaleGestureDetector SimpleOnScaleGestureListener               when a scale gesture is detected  use it to resize the image          Override         public boolean onScale ScaleGestureDetector scaleGestureDetector               mScaleFactor    scaleGestureDetector getScaleFactor                mImageView setScaleX mScaleFactor               mImageView setScaleY mScaleFactor               return true                      Notes   Although the activity had the gesture detector in the example above  it could have also been set on the image view itself  You can limit the size of the scaling with something like   mScaleFactor   Math max 0 1f  Math min mScaleFactor  5 0f     Thanks again to Pinch-to-zoom with multi-touch gestures In Android Documentation Use Ctrl   mouse drag to simulate a pinch gesture in the emulator    Going on  You will probably want to do other things like panning and scaling to some focus point  You can develop these things yourself  but if you would like to use a pre-made custom view  copy TouchImageView java into your project and use it like a normal ImageView  It worked well for me and I only ran into one bug  I plan to further edit the code to remove the warning and the parts that I don t need  You can do the same

[android] Android Image View Pinch Zooming

Examples related to android

Examples related to android-layout

Examples related to android-intent

Examples related to android-widget