In this example we will see how to drag and ImageView in android on touch drag event.
Creating View layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/activity_vertical_margin" >
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="124dp"
android:src="@drawable/ic_launcher" />
</RelativeLayout>
Activity Java code
package com.javatechig;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class MainActivity extends Activity implements View.OnTouchListener {
private ImageView mImageView;
private ViewGroup mRrootLayout;
private int _xDelta;
private int _yDelta;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRrootLayout = (ViewGroup) findViewById(R.id.root);
mImageView = (ImageView) mRrootLayout.findViewById(R.id.imageView);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(150, 150);
mImageView.setLayoutParams(layoutParams);
mImageView.setOnTouchListener(this);
}
public boolean onTouch(View view, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view
.getLayoutParams();
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
view.setLayoutParams(layoutParams);
break;
}
mRrootLayout.invalidate();
return true;
}
}
Output
The motion can be done without knowledge of the layout parameters by just setting the View’s X, Y parameters.
view.setX(X – xDelta);
view.setY(Y – yDelta);
Great thanks
Hi Sir,
Nice Script.
I want to put image at the bottom line.
I have used this code
But still its not working. It displays at top left of screen.
Plz help
Thanks
how can i apply smooth scrolling effect (parallax effect after dragging)
What does “mRrootLayout.invalidate();” do?
Thanks a lot! I have been searching all day and now I found it! AWESOME
You have to make yourself when the view is dragged. Handle ACTION_MOVE event and find if your view reached the position (x, y). Where x, y represents your screen bound.
How to can I check if my view is dragged?
The MotionEvent.ACTION_MOVE: event represents that the view is dragged.
thankm you
very nice tutorial….thank you
Change your layout to the following. The image will appear in center
Nice code, Worked for me. Thanks a lot :)
Hey,
how to move image fixed location on every time???
plz helpppp….
you want to must be set or change to id of parent-layout or main-layout…
you should write instead of ViewGroup, Button/ImageView… depending on the type of View you want to drag