Swipe Gesture

This code snippet is for navigating between screens using horizontal swipes.

This is how Google docs describe 'swipe':

http://developer.android.com/design/patterns/swipe-views.html

"Swipe views allow the user to efficiently move from item to item using a simple gesture and thereby make browsing and consuming data a more fluent experience."

As far as I can tell, the actual code calls them 'flings'. Which sounds better 'a user swipes through screens' or 'a user flings through screens'? There is also a convenience class for paging through views.

The code requires a GestureDetector object. Note that unlike view paging using horizontal swipes, a GestureDetector can detect several other types of user input such as vertical swipes and pinches.

http://developer.android.com/reference/android/view/GestureDetector.html

The code also requires a gesture listener and the Android reference provides a SimpleOnGestureListener.

http://developer.android.com/reference/android/view/GestureDetector.SimpleOnGestureListener.html

One of the listener's callback methods is for a fling motion.

boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY);

When a user swipes a screen, that motion is consumed by the Activity's onTouchEvent(MotionEvent) method which must call the GestureDetector's onTouchEvent(MotionEvent) method.

Typically a user swipes horizontally to invoke an intent to change activities. That is what my code snippet shows. However, a swipe can perform any business logic you want. For example, Samsung uses a swipe as an option for taking smartphone screen captures.

The code example below enables a user to swipe back and forth between two screens.

The image shows the main screen after a user swipes right to left which will cause the second activity to appear. The toast that I added for debugging purposes runs before the change activity intent. Even with the toasts, which can be removed in a production app, the code tested on my Samsung S3 runs almost instantly.

Activity one code example

package com.example.swipegesture;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.GestureDetector;

import android.view.MotionEvent;

import android.widget.Toast;

public class MainActivityScreenOne extends Activity {

private static final int SWIPE_MIN_DISTANCE = 100;

private static final int SWIPE_THRESHOLD_VELOCITY = 150;

private GestureDetector gestureDetector;

Intent IntentSwipeRightLeft;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main_activity_screen_one);

gestureDetector = new GestureDetector(this,

new OnSwipeGestureListener());

IntentSwipeRightLeft = new Intent(getApplicationContext(),

SecondActivity.class);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

gestureDetector.onTouchEvent(event);

return true;

}

private class OnSwipeGestureListener extends

GestureDetector.SimpleOnGestureListener {

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

float deltaX = e2.getX() - e1.getX();

if ((Math.abs(deltaX) < SWIPE_MIN_DISTANCE)

|| (Math.abs(velocityX) < SWIPE_THRESHOLD_VELOCITY)) {

// Insufficient distance and velocity returns false

return false;

} else {

// Swipe right to left

if (deltaX < 0) {

SwipeRightToLeft();

} else { // Swipe left to right

SwipeLeftToRight();

}

}

return true;

}

}

private void SwipeLeftToRight() {

Toast.makeText(this, "SwipeLeftToRight", Toast.LENGTH_SHORT).show();

}

private void SwipeRightToLeft() {

Toast.makeText(this, "SwipeRightToLeft", Toast.LENGTH_SHORT).show();

startActivity(IntentSwipeRightLeft);

}

}

Activity one XML layout example

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.example.swipegesture.MainActivityScreenOne" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Screen One" />

</LinearLayout>

Activity two code example

package com.example.swipegesture;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.GestureDetector;

import android.view.MotionEvent;

import android.widget.Toast;

public class SecondActivity extends Activity {

private static final int SWIPE_MIN_DISTANCE = 100;

private static final int SWIPE_THRESHOLD_VELOCITY = 150;

private GestureDetector gestureDetector;

Intent IntentSwipeLeftRight;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_second);

gestureDetector = new GestureDetector(this,

new OnSwipeGestureListener());

IntentSwipeLeftRight = new Intent(getApplicationContext(), MainActivityScreenOne.class);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

gestureDetector.onTouchEvent(event);

return true;

}

private class OnSwipeGestureListener extends

GestureDetector.SimpleOnGestureListener {

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

float deltaX = e2.getX() - e1.getX();

if ((Math.abs(deltaX) < SWIPE_MIN_DISTANCE)

|| (Math.abs(velocityX) < SWIPE_THRESHOLD_VELOCITY)) {

// Insufficient distance and velocity returns false

return false;

} else {

// Swipe right to left

if (deltaX < 0) {

SwipeRightToLeft();

} else { // Swipe left to right

SwipeLeftToRight();

}

}

return true;

}

}

private void SwipeLeftToRight() {

Toast.makeText(this, "SwipeLeftToRight", Toast.LENGTH_LONG).show();

startActivity(IntentSwipeLeftRight);

}

private void SwipeRightToLeft() {

Toast.makeText(this, "SwipeRightToLeft", Toast.LENGTH_LONG).show();

}

}

Activity two XML layout example

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.example.swipegesture.SecondActivity" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Screen Two" />

</LinearLayout>