Implement a Gesture Detector in Android

In modern applications, manage users’ gestures is an essential feature. It brings a better interactivity between your application and users.

Implement a Gesture Detector to create a view flipper in Android is very simple and we’re going to make it quickly. Follow the guide.

Android SDK provides a GestureDetector class available in package android.view.GestureDetector . GestureDetecture detects various gestures and events using the supplied MotionEvents. It accepts a GestureDetector.OnGestureListener callback that will notify developers when a particular motion event has occurred. This class must be used with MotionEvents reported via touch.

1. OnGestureListener implementation

First, we create a class implementing OnGestureListener. This class will be notified when user perform motion event and after that, it will be our responsibility to determinate the direction of the swipe.

To implement it, we define 3 constants :

  • SWIPE_MIN_DISTANCE that is the min distance for a motion event be considered as a swipe.
  • SWIPE_MAX_OFF_PATH that is used to force to consider straight line when user make a swipe.
  • SWIPE_TRESHOLD_VELOCITY that is the velocity threshold for a swipe be considered.

Then, the main job is made in the onFling method of our OnGestureListener instance. We compare coordinates of two MotionEvents in parameter and we can determinate direction of swipe.

Our implementation is like this :


public class MyGestureListener implements OnGestureListener {

  @Override
  public boolean onDown(MotionEvent e) {
    return false;
  }

  @Override
  public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
    try {
      if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH || Math.abs(e1.getX() - e2.getX()) > SWIPE_MAX_OFF_PATH)
        return false;

      if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
        // right to left swipe
        Toast.makeText(getApplicationContext(), "Swipe right to left", Toast.LENGTH_SHORT).show();
      } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
        // left to right swipe
        Toast.makeText(getApplicationContext(), "Swipe left to right", Toast.LENGTH_SHORT).show();
      } else if (e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY) {
        // bottom to top
        Toast.makeText(getApplicationContext(), "Swipe bottom to top", Toast.LENGTH_SHORT).show();
      } else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityY) > SWIPE_THRESHOLD_VELOCITY) {
        // top to bottom
        Toast.makeText(getApplicationContext(), "Swipe top to bottom", Toast.LENGTH_SHORT).show();
      }

    } catch (Exception e) {
      // nothing
    }

    return false;
  }

   @Override
   public void onLongPress(MotionEvent e) {
   }

   @Override
   public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
     return false;
   }

   @Override
   public void onShowPress(MotionEvent e) {
   }

   @Override
   public boolean onSingleTapUp(MotionEvent e) {
     return false;
   }

 }


2. Set Gesture Detector on Activity

Now, we have our OnGestureListener implementation we can set gesture detection on activity. When activity is created we create a OnGestureListener object then put it in parameter of GestureDetector constructor.

To enable our gesture detector, we must override onTouchEvent and use the onTouchEvent method of the Gesture Detector previously created.

Code is like this :


public class GestureActivity extends Activity {

/** Swipe min distance. */
private static final int SWIPE_MIN_DISTANCE = 60;
/** Swipe max off path. */
private static final int SWIPE_MAX_OFF_PATH = 250;
/** Swipe threshold velocity. */
private static final int SWIPE_THRESHOLD_VELOCITY = 100;
/** Gesture detector. */
private GestureDetector gestureDetector;
/** Gesture listener. */
private MyGestureListener gestureListener;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_gesture);
  gestureListener = new MyGestureListener();
  gestureDetector = new GestureDetector(getApplicationContext(), gestureListener);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
  if (gestureDetector.onTouchEvent(event)) {
    return false;
  } else {
    return true;
  }
 }

}

 

3. Gesture Detector in Action

Now, we can see Gesture Detector in Action :

 

Gesture Detector left to right

 

 

Comments

  1. By Johnf239

Leave a Reply