Home > Android, Mobile > How to implement Swipe action in Android

How to implement Swipe action in Android

April 16th, 2009

To implement swipe action in Android, such as the one used in iPhone homescreen unlock, actually Android SDK provides native support for gestures. Swipe is actually called Fling ^_^

You will need to extend SimpleOnGestureListener to implement your own handling on swipe/fling action:

class MyGestureDetector extends SimpleOnGestureListener {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
}

To determine if it’s a valid swipe, you will need to make sure the fling falls into an almost straight path, with at least certain length of touch duration, so it’s a continuous touch, and with certain velocity of course.

So let’s define some constants:

private static final int SWIPE_MIN_DISTANCE = 120;
private static final int SWIPE_MAX_OFF_PATH = 250;
private static final int SWIPE_THRESHOLD_VELOCITY = 200;

The max off path is to make sure the fling still falls within a somewhat straight path.

If onFling() method, you can do this:

if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
viewFlipper.setInAnimation(slideLeftIn);
viewFlipper.setOutAnimation(slideLeftOut);
viewFlipper.showNext();
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
viewFlipper.setInAnimation(slideRightIn);
viewFlipper.setOutAnimation(slideRightOut);
viewFlipper.showPrevious();
}

The viewFlipper is used to show how fling/swipe make the view animation/transition from one to the other.

At last, you need to make sure in your activity, you catch the gesture event by overriding onTouch() method:

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

Here’s a screenshot of the view in transition:

Android Swipe View Flipper in Action

Android Swipe View Flipper in Action

The sample source is attached here.

Android Shogun Android, Mobile , , , ,

  1. Jan
    July 12th, 2009 at 13:31 | #1

    Hello,

    thanks this works perfectly. But is there a way to extend the usual onTouchListener instead of overriding it? I want to extend a webview by longPress and doubleTap but keep the usual behavior of flinging and handling links. Thanks in advance.

    Jan

  2. Android Shogun
    August 8th, 2009 at 18:25 | #2

    Conceivably you can override any method by extending the class.
    But webview is a bit special and involves lots of methods, good luck!

  3. Maarten
    August 17th, 2009 at 06:48 | #3

    This example is very nice and informative, but still it acts diffrent then e.g. the Android homescreen. With the android homescreen the view “sticks” to the fingertouch following small left/right movements instead of just detecting a fling-event and starting the animation. Is it possible to implement such behaviour similar to the homescreen?

  4. August 17th, 2009 at 07:00 | #4

    For swipe action like the home screen, the best place you can look into is the android source code. The basically idea is that when your finger moves, the generated MotionEvent will have respective x and y coordinates, you just need to move your view accordingly. It sounds easy but kind of complicated to implement.

  5. November 14th, 2009 at 15:11 | #5

    Does someone has a working example like the “home screen”? So the view follows your touch gestures? Really want to have something like this in my app but doesnt find how to do. I looked in the android source code (app Launcher, but indeed it’s really complicated..)

  6. Android Shogun
    December 19th, 2009 at 13:36 | #6

    The launcher.java is indeed complicated. sorry developing android UI is still a pain…

  1. No trackbacks yet.