Rotate Zoom Drag Image in Android Imageview

Pinch Zoom and 2 finger Rotation the ImageView in Android

Here is the solution that worked good for me. https://stackoverflow.com/a/18276033 Only one line I should add here and that should be

5. add imageView.setRotation(imageView.getRotation() + (-angle)); in OnRotation(RotationGestureDetector rotationDetector) method inside the activity to set the new rotation value to the ImageView

This is for basic help. Remaining of the implementation is just fine

Rotate zoom drag image in android imageview

call this method from inside from:

setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {

..........................................................

fixing();
setImageMatrix(savedMatrix2);

before the end of return

public void fixing()
{

float[] value = new float[9];
        matrix.getValues(value);

float[] savedValue = new float[9];
        savedMatrix2.getValues(savedValue);

int width = getWidth();
        int height = getHeight();

        Drawable d = getDrawable();
        if (d == null)  return;
        int imageWidth = d.getIntrinsicWidth();
        int imageHeight = d.getIntrinsicHeight();
        int scaleWidth = (int) (imageWidth * value[0]);
        int scaleHeight = (int) (imageHeight * value[4]);

// don't let the image go outside
        if (value[2] > width-1)   
            value[2] = width-10;
        else if (value[5] > height - 1)   
            value[5] = height - 10;
        else if (value[2] < -(scaleWidth-1))  
            value[2] = -(scaleWidth-10);
        else if (value[5] < -(scaleHeight-1))   
            value[5] = -(scaleHeight-10);

        // maximum zoom ratio: MAx
        if (value[0] > MAX_ZOOM || value[4] > MAX_ZOOM){
            value[0] = MAX_ZOOM;
            value[4] = MAX_ZOOM;
            //value[2] = savedValue[2];
            //value[5] = savedValue[5];
        }

        matrix.setValues(value); 
        savedMatrix2.set(matrix);
}

Zoom Rotate and Drag Bitmap with onTouchEvent

Below is the solution to Drag, Rotate and Zoom

---

public class MainActivity extends BaseActivity implements OnTouchListener {

    // these matrices will be used to move and zoom image
    private Matrix matrix = new Matrix();
    private Matrix savedMatrix = new Matrix();
    // we can be in one of these 3 states
    private static final int NONE = 0;
    private static final int DRAG = 1;
    private static final int ZOOM = 2;
    private int mode = NONE;
    private PointF start = new PointF();
    private PointF mid = new PointF();
    private float oldDist = 1f;
    private float d = 0f;
    private float newRot = 0f;
    private float[] lastEvent = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView view = (ImageView) findViewById(R.id.imageView);
        view.setOnTouchListener(this);

    }

    public boolean onTouch(View v, MotionEvent event) {
        // handle touch events here
        ImageView view = (ImageView) v;
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                savedMatrix.set(matrix);
                start.set(event.getX(), event.getY());
                mode = DRAG;
                lastEvent = null;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = spacing(event);
                if (oldDist > 10f) {
                    savedMatrix.set(matrix);
                    midPoint(mid, event);
                    mode = ZOOM;
                }
                lastEvent = new float[4];
                lastEvent[0] = event.getX(0);
                lastEvent[1] = event.getX(1);
                lastEvent[2] = event.getY(0);
                lastEvent[3] = event.getY(1);
                d = rotation(event);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                lastEvent = null;
                break;
            case MotionEvent.ACTION_MOVE:
                if (mode == DRAG) {
                    matrix.set(savedMatrix);
                    float dx = event.getX() - start.x;
                    float dy = event.getY() - start.y;
                    matrix.postTranslate(dx, dy);
                } else if (mode == ZOOM) {
                    float newDist = spacing(event);
                    if (newDist > 10f) {
                        matrix.set(savedMatrix);
                        float scale = (newDist / oldDist);
                        matrix.postScale(scale, scale, mid.x, mid.y);
                    }
                    if (lastEvent != null && event.getPointerCount() == 2) {
                        newRot = rotation(event);
                        float r = newRot - d;
                        float[] values = new float[9];
                        matrix.getValues(values);
                        float tx = values[0];
                        float ty = values[4];
                        float sx = values[8];
                        float xc = (view.getWidth() / 2) * sx;
                        float yc = (view.getHeight() / 2) * sx;
                        matrix.postRotate(r, tx + xc, ty + yc);
                    }
                }
                break;
        }

        view.setImageMatrix(matrix);
        return true;
    }

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

    /**
     * Calculate the degree to be rotated by.
     *
     * @param event
     * @return Degrees
     */
    private float rotation(MotionEvent event) {
        double delta_x = (event.getX(0) - event.getX(1));
        double delta_y = (event.getY(0) - event.getY(1));
        double radians = Math.atan2(delta_y, delta_x);
        return (float) Math.toDegrees(radians);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
//        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK && requestCode == UCrop.REQUEST_CROP) {
            final Uri resultUri = UCrop.getOutput(data);
        } else if (resultCode == UCrop.RESULT_ERROR) {
            final Throwable cropError = UCrop.getError(data);
        }
    }

    public void clickedListener(View view) {
        startActivity(new Intent(MainActivity.this, CropActivity.class));
    }
}

---

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@android:color/transparent"
android:layout_height="match_parent" >
<ImageView android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:src="@android:drawable/btn_radio"
    android:scaleType="matrix" />

<ImageView android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:src="@android:drawable/gallery_thumb"
    android:onClick="clickedListener"
    android:layout_gravity="bottom"
    android:scaleType="centerInside" >
</ImageView>

Drag,Zoom or Rotate an ImageView

You can call View.setRotation(), View.setPivotX(), View.setPivotY(), View.setScaleX(), View.setScaleY(), View.setTranslationX() and View.setTranslationY() ond any View including an ImageView.

Reference: http://developer.android.com/reference/android/view/View.html

How to zoom in,zoom out ,drag & drop and rotate an image view in android?

You can find here an article that discusses multi-touch gestures on Android from a beginners perspective. It demonstrates an approach that allows for "standard" gestures such as slide-to-move and pinch-to-zoom but also endevours to go beyond those and attempt turn-to-rotate. The source is attached too, and here a demo showing some features that was developed in this article

Also here a custom ImageView that uses some gesture features you can use it in your code

move, rotation and zoom in\out on View

After long of searching about how to implement something like that, I finally found a repository on GitHub solving my issue
you can find classes for doing that here

and way to use the classes is:

        yourView.setOnTouchListener(new MultiTouchListener());

in this way you can scale, zoom in/out (by pinch) and rotate the view by pinch too.

---

Related Topics