Search code examples
androidandroid-imageviewzooming

zoom scale in android imageview


The below code is tried so far...i have two image view ,one is zooming and another one is static image view

image.setOnTouchImageViewListener(new OnTouchImageViewListener() {

            @Override
            public void onMove() {


                PointF point = image.getScrollPosition();
                RectF rect = image.getZoomedRect();
                float currentZoom = image.getCurrentZoom();
                boolean isZoomed = image.isZoomed();
                scrollPositionTextView.setText("x: " + df.format(point.x)
                        + " y: " + df.format(point.y));
                zoomedRectTextView.setText("left: " + df.format(rect.left)
                        + " top: " + df.format(rect.top) + "\nright: "
                        + df.format(rect.right) + " bottom: "
                        + df.format(rect.bottom));
                currentZoomTextView.setText("getCurrentZoom(): " + currentZoom
                        + " isZoomed(): " + isZoomed);
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                params.setMargins(Math.round(left-currentZoom*rect.left*250), Math.round(top-currentZoom*rect.left*30),
                        Math.round(rect.right), Math.round(rect.bottom));
                img.setLayoutParams(params);
                if(point.x>0.5)
                {
                    params.setMargins(Math.round(left-currentZoom*rect.left*250), Math.round(top-currentZoom*rect.left*30),
                            Math.round(rect.right), Math.round(rect.bottom));
                    img.setLayoutParams(params);
                }
            }
        });

Solution

  • I had same issue and I resolved it by implementing custom ImageView.

    Custom ImageView:

    public class ZoomableImageView extends ImageView
    {
        Matrix matrix = new Matrix();
    
        static final int NONE = 0;
        static final int DRAG = 1;
        static final int ZOOM = 2;
        static final int CLICK = 3;
        int mode = NONE;
    
        PointF last = new PointF();
        PointF start = new PointF();
        float minScale = 1f;
        float maxScale = 4f;
        float[] m;
    
        float redundantXSpace, redundantYSpace;
        float width, height;
        float saveScale = 1f;
        float right, bottom, origWidth, origHeight, bmWidth, bmHeight;
    
        ScaleGestureDetector mScaleDetector;
        Context context;
    
        public ZoomableImageView(Context context, AttributeSet attr)
        {
            super(context, attr);
            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)
                {
                    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_POINTER_DOWN:
                            last.set(event.getX(), event.getY());
                            start.set(last);
                            mode = ZOOM;
                            break;
                        case MotionEvent.ACTION_MOVE:
                            if (mode == ZOOM || (mode == DRAG && saveScale > minScale))
                            {
                                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 < width)
                                {
                                    deltaX = 0;
                                    if (y + deltaY > 0)
                                        deltaY = -y;
                                    else if (y + deltaY < -bottom)
                                        deltaY = -(y + bottom);
                                }
                                else if (scaleHeight < height)
                                {
                                    deltaY = 0;
                                    if (x + deltaX > 0)
                                        deltaX = -x;
                                    else if (x + deltaX < -right)
                                        deltaX = -(x + right);
                                }
                                else
                                {
                                    if (x + deltaX > 0)
                                        deltaX = -x;
                                    else if (x + deltaX < -right)
                                        deltaX = -(x + right);
    
                                    if (y + deltaY > 0)
                                        deltaY = -y;
                                    else if (y + deltaY < -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 < CLICK && yDiff < CLICK)
                                performClick();
                            break;
    
                        case MotionEvent.ACTION_POINTER_UP:
                            mode = NONE;
                            break;
                    }
                    setImageMatrix(matrix);
                    invalidate();
                    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 = detector.getScaleFactor();
                float origScale = saveScale;
                saveScale *= mScaleFactor;
                if (saveScale > maxScale)
                {
                    saveScale = maxScale;
                    mScaleFactor = maxScale / origScale;
                }
                else if (saveScale < minScale)
                {
                    saveScale = minScale;
                    mScaleFactor = minScale / origScale;
                }
                right = width * saveScale - width - (2 * redundantXSpace * saveScale);
                bottom = height * saveScale - height - (2 * redundantYSpace * saveScale);
                if (origWidth * saveScale <= width || origHeight * saveScale <= height)
                {
                    matrix.postScale(mScaleFactor, mScaleFactor, width / 2, height / 2);
                    if (mScaleFactor < 1)
                    {
                        matrix.getValues(m);
                        float x = m[Matrix.MTRANS_X];
                        float y = m[Matrix.MTRANS_Y];
                        if (mScaleFactor < 1)
                        {
                            if (Math.round(origWidth * saveScale) < width)
                            {
                                if (y < -bottom)
                                    matrix.postTranslate(0, -(y + bottom));
                                else if (y > 0)
                                    matrix.postTranslate(0, -y);
                            }
                            else
                            {
                                if (x < -right)
                                    matrix.postTranslate(-(x + right), 0);
                                else if (x > 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 < 1) {
                        if (x < -right)
                            matrix.postTranslate(-(x + right), 0);
                        else if (x > 0)
                            matrix.postTranslate(-x, 0);
                        if (y < -bottom)
                            matrix.postTranslate(0, -(y + bottom));
                        else if (y > 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 =  width / bmWidth;
            float scaleY = height / bmHeight;
            scale = Math.min(scaleX, scaleY);
            matrix.setScale(scale, scale);
            setImageMatrix(matrix);
            saveScale = 1f;
    
            // Center the image
            redundantYSpace = height - (scale * bmHeight) ;
            redundantXSpace = width - (scale * bmWidth);
            redundantYSpace /= 2;
            redundantXSpace /= 2;
    
            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);
            setImageMatrix(matrix);
        }
    }
    

    And Use it in class like this

    ZoomableImageView touch = (ZoomableImageView)findViewById(R.id.IMAGEID);
    touch.setImageBitmap(bitmap);
    

    Add the view like this in XML:

    <PACKAGE.ZoomableImageView
    android:id="@+id/IMAGEID"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
    

    And I got solution from below link please refer it if you have any issue.

    Android imageView Zoom-in and Zoom-Out