Android: How to perform zoom on two imageviews in android?

Question

I have two images inside my layout. I need to zoom that image which i touched. We know that Frame can display a single view at a time. So how do i perform zoom on each imageview separately ? My xml file :

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
  android:src="@drawable/image1" />

  <ImageView
    android:id="@+id/imageView2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"   android:src="@drawable/image2"

  />

</FrameLayout>

Activity file :

public class MyActivity extends Activity implements OnTouchListener
{
private static final String TAG = "Touch";

// These matrices will be used to scale points of the image
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();

// The 3 states (events) which the user is trying to perform
static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;

// these PointF objects are used to record the point(s) the user is touching
PointF start = new PointF();
PointF mid = new PointF();
float oldDist = 1f;

private ImageView iv1;
private ImageView iv2;
@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);


    iv1 = ((ImageView)findViewById(R.id.imageView1));
    iv1.setOnTouchListener(this);


    iv2 = ((ImageView)findViewById(R.id.imageView2));
    iv2.setOnTouchListener(this);



}
@Override
public boolean onTouch(View v, MotionEvent event) {
    switch (v.getId()) {
    case R.id.imageView1:
        zoomImageView(v, event);
        break;
    case R.id.imageView2:
        zoomImageView(v, event);
        break;

    default:
        break;
    }
    return true;
}
private boolean zoomImageView(View v, MotionEvent event) {


    ImageView view = (ImageView) v;
    view.setScaleType(ImageView.ScaleType.MATRIX);
    float scale;


    switch (event.getAction() & 255) 
    {
    case MotionEvent.ACTION_DOWN:   // first finger down only
        savedMatrix.set(matrix);
        start.set(event.getX(), event.getY());
        Log.d(TAG, "mode=DRAG"); // write to LogCat
        mode = DRAG;
        break;

    case MotionEvent.ACTION_UP: // first finger lifted

    case 6: // second finger lifted

        mode = NONE;
        Log.d(TAG, "mode=NONE");
        break;

    case 5: // first and second finger down

        oldDist = spacing(event);
        Log.d(TAG, "oldDist=" + oldDist);
        if (oldDist > 5f) {
            savedMatrix.set(matrix);
            midPoint(mid, event);
            mode = ZOOM;
            Log.d(TAG, "mode=ZOOM");
        }
        break;

    case MotionEvent.ACTION_MOVE:

        if (mode == DRAG) 
        { 
            matrix.set(savedMatrix);
            matrix.postTranslate(event.getX() - start.x, event.getY() - start.y); // create the transformation in the matrix  of points
        } 
        else if (mode == ZOOM) 
        { 
            // pinch zooming
            float newDist = spacing(event);
            Log.d(TAG, "newDist=" + newDist);
            if (newDist > 5f) 
            {
                matrix.set(savedMatrix);
                scale = newDist / oldDist; // setting the scaling of the
                // matrix...if scale > 1 means
                // zoom in...if scale < 1 means
                // zoom out
                matrix.postScale(scale, scale, mid.x, mid.y);
            }
        }
        break;
    }

    view.setImageMatrix(matrix); // display the transformation on screen

    return true; // indicate event was handled

}
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);
}

/*
 * --------------------------------------------------------------------------
 * Method: midPoint Parameters: PointF object, MotionEvent Returns: void
 * Description: calculates the midpoint between the 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);
}
 }

Now i'am able zoom only image1 which is on top. How do i get the zoom functionality for bottom image on touch of image2 ? I should be able to zoom the image on which i touched. Please help me.

sorry anshuman dint get any answer. still trying. If you get any plz infrm me thnks.. — Rahul Baradia, May 02 '12 at 03:55
@Tech.Rahul Are you get your solution ,and can you have idea how we can apply pinch zoom in-out for Canvas of `ImageView`.I am looking for answer to my question http://stackoverflow.com/q/10482229/596725 — Herry, May 10 '12 at 08:52
Sorry Rahul, I don't have any idea right now for your problem. — Anshuman Jaiswal, May 10 '12 at 12:58

score 0 · Answer 1 · answered Jan 21 '13 at 02:58

You can use LinearLayout and align them horizontally or vertically in this way you will have two imageviews which are independent with each other then use gestureimageview which supports panning zooming and and double tap see link below....

hope this answers your question :D

Click here!

https://github.com/jasonpolites/gesture-imageview

score 0 · Answer 2 · answered Nov 23 '18 at 04:36

Use ZoomageView instead of ImageView.

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<com.jsibbold.zoomage.ZoomageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:src="@drawable/image1" />

<com.jsibbold.zoomage.ZoomageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:src="@drawable/image2" />

</FrameLayout>

Add dependencies :

implementation 'com.jsibbold:zoomage:1.1.0'

Hope this will help you.

Android: How to perform zoom on two imageviews in android?

2 Answers2