How to pinch zoom in fragment android

Question

How do I implement pinch zoom images that are in fragments?

I have the following codes for zooming in an image:

ImageView imageDetail;
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();
PointF startPoint = new PointF();
PointF midPoint = new PointF();
float oldDist = 1f;
static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;

imageDetail = (ImageView) findViewById(R.id.imageView1);
/**
 * set on touch listner on image
 */
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() & 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 > 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 > 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);
    }
});

The above codes works fine on an activity but not on fragment. Please help! Need it urgently!

Answer 1

you need to change this line

imageDetail = (ImageView) findViewById(R.id.imageView1);

for this one

imageDetail = (ImageView) rootView.findViewById(R.id.imageView1);

where rootView is the name you gave to the View in the fragment (usually is rootview)

Answer 2

I had to set the scale type of the image view to Matrix:

imgView.setScaleType(ImageView.ScaleType.MATRIX);

as per this link:

Why does ImageView.setImageMatrix() not work?