Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pinch Zoom and 2 finger Rotation the ImageView in Android

Tags:

I've a problem from last 2 days and unable to tackle it as I'm newbie. Actually I'm working on an Android App that needs pinch-zoom and 2-finger rotation on Android ImageView. I got the multiple tutorials and solutions that work fine for Pinch Zoom and but does not work for 2 finger rotation. I'm sharing the simplest tutorial that's easy to understand and I want to extend it for 2 finger rotation. Here is the code snippet:

    public class MainActivity extends Activity {
    private ImageView mImageView;
    private Matrix mMatrix = new Matrix();
    private float mScale = 1f;
    private ScaleGestureDetector mScaleGestureDetector;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mImageView = (ImageView) findViewById(R.id.imageView);
        mScaleGestureDetector = new ScaleGestureDetector(this, new ScaleListener());
    }

    public boolean onTouchEvent(MotionEvent ev) {
        mScaleGestureDetector.onTouchEvent(ev);
        return true;
    }

    private class ScaleListener extends ScaleGestureDetector.
            SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            mScale *= detector.getScaleFactor();
            mScale = Math.max(0.1f, Math.min(mScale, 5.0f));
            mMatrix.setScale(mScale, mScale);
            mImageView.setImageMatrix(mMatrix);
            return true;
        }
    }
}

Also I want to use them for GPUImage, I mean despite of Android ImageView I want to use GPUImage. How to transform the GPUImage to ImageView? This is the 2nd thing. First I want to implement the 2 finger rotation (or MultiTouch in some sense). Thanks

like image 607
Sikandar Avatar asked Apr 22 '16 06:04

Sikandar


People also ask

How do you pinch zoom on Android?

Tap anywhere on the screen, except the keyboard or navigation bar. Drag 2 fingers to move around the screen. Pinch with 2 fingers to adjust zoom. To stop magnification, use your magnification shortcut again.

Does pinch and zoom change image?

Pinch-to-zoom on all devices may use algorithms, but only to scale the image — it doesn't change the content itself. This was an attempt to prevent the jury from getting a clearer view of the action, not a genuine challenge to the integrity of the video.

What is ImageView?

Displays image resources, for example Bitmap or Drawable resources. ImageView is also commonly used to apply tints to an image and handle image scaling.


2 Answers

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

  1. 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

like image 69
Sikandar Avatar answered Sep 28 '22 02:09

Sikandar


This is the library I created, which creates a imageview class can drag, rotate and zoom

Requirement: (Add on build.gradle)

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Add Dependency

dependencies {
            implementation 'com.github.lau1944:Zoom-Drag-Rotate-ImageView:1.0.0'
    }

first , add image on xml:

<com.easystudio.rotateimageview.RotateZoomImageView
        android:id="@+id/rotate"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/money"/>

or add programmatically:

       RotateZoomImageView iv;
       RelativeLayout playground = findViewById(R.id.playground);
       iv = new RotateZoomImageView(getApplicationContext());
       iv.setImageDrawable(getDrawable(R.drawable.money));
       RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(250, 250);
       lp.addRule(RelativeLayout.BELOW);
       iv.setLayoutParams(lp);
       playground.addView(iv);

Step 2 : set up ontouchmethod

iv.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return iv.onTouch(v,event);
            }
        });

And that is it .

like image 25
Jimmy lau Avatar answered Sep 28 '22 02:09

Jimmy lau