Move zoom and rotate ImageView in android

There are lot of applications available in market which will do image processing like giving custom brightness, color or backgrounds of images. Here we will discuss how to drag ,zoom and rotate imageview in android. We can achieve this by applying onTouch listener to the imageview.

Please note that this is  an example of imageview drag and zoom. In addition to that if you want the same thing to be achieved with relative layout or even with a textview all you have to do is to replace the imageview layout with the required layout.

Download source code

Steps

  1. Create new project in android studio
  2. Place the imageview widget to the layout file
  3. Add images to drawable folder
  4. Implement the onTouch listener to imageview

If you find the tutorial usefull please subscribe to our youtube channel

Create New project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Place the imageview widget to the layout file

<ImageView
    android:id="@+id/im_move_zoom_rotate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/background"/>

Add images to the drawable file

This step is to make sure that you have the image in your drawable folder which is set in the above layout file. If not you need to paste image in res/drawable folder .Note that image name should be same as the one you are referring in the above layout file.

Implement the onTouch listener for the imageview

Finally we need to implement the onTouch listener for the imageview you placed in your layout file. Following is the complete code for the java file . It contains onTouch Listener for the imageview .In addition to that there are certain methods which is required for calculating the rotating angle,distance moved etc.

public class MainActivity extends AppCompatActivity {

ImageView im_move_zoom_rotate;
Toolbar toolbar;
float scalediff;
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int ZOOM = 2;
private int mode = NONE;
private float oldDist = 1f;
private float d = 0f;
private float newRot = 0f;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

init();


RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(250, 250);
layoutParams.leftMargin = 50;
layoutParams.topMargin = 50;
layoutParams.bottomMargin = -250;
layoutParams.rightMargin = -250;
im_move_zoom_rotate.setLayoutParams(layoutParams);

im_move_zoom_rotate.setOnTouchListener(new View.OnTouchListener() {

RelativeLayout.LayoutParams parms;
int startwidth;
int startheight;
float dx = 0, dy = 0, x = 0, y = 0;
float angle = 0;

@Override
public boolean onTouch(View v, MotionEvent event) {
final ImageView view = (ImageView) v;

((BitmapDrawable) view.getDrawable()).setAntiAlias(true);
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:

parms = (RelativeLayout.LayoutParams) view.getLayoutParams();
startwidth = parms.width;
startheight = parms.height;
dx = event.getRawX() - parms.leftMargin;
dy = event.getRawY() - parms.topMargin;
mode = DRAG;
break;

case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
if (oldDist > 10f) {
mode = ZOOM;
}

d = rotation(event);

break;
case MotionEvent.ACTION_UP:

break;

case MotionEvent.ACTION_POINTER_UP:
mode = NONE;

break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {

x = event.getRawX();
y = event.getRawY();

parms.leftMargin = (int) (x - dx);
parms.topMargin = (int) (y - dy);

parms.rightMargin = 0;
parms.bottomMargin = 0;
parms.rightMargin = parms.leftMargin + (5 * parms.width);
parms.bottomMargin = parms.topMargin + (10 * parms.height);

view.setLayoutParams(parms);

} else if (mode == ZOOM) {

if (event.getPointerCount() == 2) {

newRot = rotation(event);
float r = newRot - d;
angle = r;

x = event.getRawX();
y = event.getRawY();

float newDist = spacing(event);
if (newDist > 10f) {
float scale = newDist / oldDist * view.getScaleX();
if (scale > 0.6) {
scalediff = scale;
view.setScaleX(scale);
view.setScaleY(scale);

}
}

view.animate().rotationBy(angle).setDuration(0).setInterpolator(new LinearInterpolator()).start();

x = event.getRawX();
y = event.getRawY();

parms.leftMargin = (int) ((x - dx) + scalediff);
parms.topMargin = (int) ((y - dy) + scalediff);

parms.rightMargin = 0;
parms.bottomMargin = 0;
parms.rightMargin = parms.leftMargin + (5 * parms.width);
parms.bottomMargin = parms.topMargin + (10 * parms.height);

view.setLayoutParams(parms);


}
}
break;
}

return true;

}
});
}

private void init() {

im_move_zoom_rotate = (ImageView) findViewById(R.id.im_move_zoom_rotate);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

}

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

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

Download source code

Now simply run the application , you will get the following output

android_imageview_move_zoom_rotate
android_imageview_move_zoom_rotate

Download source code

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

161 Comments

  1. Parwaiz Alam April 7, 2020 Reply
  2. madhu July 22, 2019 Reply
  3. Qa November 30, 2018 Reply
    • Jeetu June 21, 2019 Reply
  4. Ibraheen September 14, 2018 Reply

Add a Comment

Your email address will not be published. Required fields are marked *