Search code examples
javaandroidtextviewzoomingpinchzoom

How to perform Zoom IN and OUT Smoothly and Zooming in specific Zoom location on a TEXTVIEW?


I am about to perform Zoom IN and OUT operations on a TextView which contains text. I am able to Zoom IN and OUT, but I need to make Zoom functions much Smoother(like Zooming a page in Chrome Browser). While performing Zoom-In and Zoom-Out operations (Using Pinch Zoom method), I am Zooming the Text content in a center aligned manner, I want to Zoom the content where I am Zooming in. I am attaching the code done by me, kindly suggest a solution for me.

Here is my activity file:

 public class ZoomTextView extends TextView {
     private static final String TAG = "ZoomTextView";
     private ScaleGestureDetector mScaleDetector;

     private float mScaleFactor = 1.f;
     private float defaultSize;

     private float zoomLimit = 3.0f;


     public ZoomTextView(Context context) {
         super(context);
         initialize();
     }

     public ZoomTextView(Context context, AttributeSet attrs) {
         super(context, attrs);
         initialize();
     }

     public ZoomTextView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
         initialize();
     }

     private void initialize() {
         defaultSize = getTextSize();
         mScaleDetector = new ScaleGestureDetector(getContext(), new ScaleListener());

     }

     /***
      * @param zoomLimit
      * Default value is 3, 3 means text can zoom 3 times the default size
      */

     public void setZoomLimit(float zoomLimit) {
         this.zoomLimit = zoomLimit;
     }

     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
     }

     @Override
     public boolean onTouchEvent(@NonNull MotionEvent ev) {
         super.onTouchEvent(ev);
         mScaleDetector.onTouchEvent(ev);
         return true;
     }

     /*Scale Gesture listener class,
     mScaleFactor is getting the scaling value
     and mScaleFactor is mapped between 1.0 and and zoomLimit
     that is 3.0 by default. You can also change it. 3.0 means text
     can zoom to 3 times the default value.*/

     private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
         @Override
         public boolean onScale(ScaleGestureDetector detector) {
             mScaleFactor *= detector.getScaleFactor();
             mScaleFactor = Math.max(1.0f, Math.min(mScaleFactor, zoomLimit));
             setTextSize(TypedValue.COMPLEX_UNIT_PX, defaultSize * mScaleFactor);
             Log.e(TAG, String.valueOf(mScaleFactor));
             return true;
         }
     } }

Here is my .xml file:

 <noman.zoomtextview.ZoomTextView
     android:layout_width="match_parent"
     android:layout_height="match_parent"

     android:layout_alignParentTop="true"
     android:layout_alignParentLeft="true"
     android:text="@string/sample_string"/> </RelativeLayout>

Thanks in advance.


Solution

  • I have worked on Zoom In/Out for a View which can have multiple child(any kind of view and textview is included).

    My Project

    I use ScaleX and ScaleY api to zoom the parent view.

    private fun applyScaleAndTranslationToChild() {
            child().scaleX = scaleFactor
            child().scaleY = scaleFactor
            child().pivotX = 0f  // default is to pivot at view center
            child().pivotY = 0f  // default is to pivot at view center
            child().translationX = translateX
            child().translationY = translateY
        }
    

    above method is used to apply zoom in and out, and focus of zooming is also fixed.

    I use ScaleGestureListener to get the scale (pinch gesture is captured by this)

    inner class ScaleListner : ScaleGestureDetector.SimpleOnScaleGestureListener() {
    
            override fun onScale(scaleDetector: ScaleGestureDetector?): Boolean {
                val scaleFactor = scaleDetector!!.scaleFactor
                setScaleAndTranslation(scaleFactor, scaleDetector.focusX, scaleDetector.focusY)
                return true
            }
    
            override fun onScaleEnd(detector: ScaleGestureDetector?) {
                super.onScaleEnd(detector)
                setLayoutParamOfChild()
            }
    
            private fun setScaleAndTranslation(scaleFactor: Float, focusX: Float, focusY: Float) {
                if (lastScaleFactor == 0f || Math.signum(scaleFactor) == Math.signum(lastScaleFactor)) {
                    val prevScale = this@ZoomView.scaleFactor
                    this@ZoomView.scaleFactor *= scaleFactor
                    this@ZoomView.scaleFactor = Math.max(MIN_ZOOM, Math.min(this@ZoomView.scaleFactor, MAX_ZOOM))
                    lastScaleFactor = scaleFactor
                    val adjustedScaleFactor = this@ZoomView.scaleFactor / prevScale
                    // added logic to adjust translateX and translateY for pinch/zoom pivot point
                    translateX += (translateX - focusX) * (adjustedScaleFactor - 1)
                    translateY += (translateY - focusY) * (adjustedScaleFactor - 1)
                } else {
                    lastScaleFactor = 0f
                }
                isSingleTapConfirmed = false
            }
        }
    

    Refer to my Question all details are here.

    Android: Zooming EditText Android Issue in translation And Getting Touch event of childView when Placed outside parentView