Simple moving object with touch events in Android

Hi readers,
Touch to drag objects (image, button,...) is very popular in games developer. For example, it's Jigsaw Puzzles. Now, in this post, I present how to touch at device screen and move an image to other place.
Today, through this simple tip, I would like to present a simple way to touch and drag an image in device screen, after user finish this action, the image will have a new location in device screen.
Solution:

Create an activity layout with a RelativeLayout (or FrameLayout) and include an ImageView inside it.
Set OnTouchListener for ImageView on programmatically code.
In onTouch() method, detecting user action by properties of MotionEvent (with static constants: ACTION_MOVE, ACTION_DOWN, ACTION_UP,...).
Set RelativeLayout.LayoutParams based on x and y coordinates (when moving image) and place image with it.

DEMO VIDEO:

1. Start eclipse and start a new Android project.
2. Create activity_touch.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/icon" />

</RelativeLayout>

3. TouchActivity.java source code:

package info.devexchanges.dragobject;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Toast;

public class TouchActivity extends Activity {

 private ViewGroup mainLayout;
 private ImageView image;
 
 private int xDelta;
 private int yDelta;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_touch);
  mainLayout = (RelativeLayout) findViewById(R.id.main);
  image = (ImageView) findViewById(R.id.image);

  image.setOnTouchListener(onTouchListener());
 }

 private OnTouchListener onTouchListener() {
  return new OnTouchListener() {

   @SuppressLint("ClickableViewAccessibility")
   @Override
   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:
     Toast.makeText(TouchActivity.this,
       "thanks for new location!", Toast.LENGTH_SHORT)
       .show();
     break;
     
    case MotionEvent.ACTION_MOVE:
     RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view
       .getLayoutParams();
     layoutParams.leftMargin = x - xDelta;
     layoutParams.topMargin = y - yDelta;
     layoutParams.rightMargin = 0;
     layoutParams.bottomMargin = 0;
     view.setLayoutParams(layoutParams);
     break;
    }
    mainLayout.invalidate();
    return true;
   }
  };
 }
}

4. Build and run it:

Learn Programming Together

Simple moving object with touch events in Android

Author : Hong Thai

Share