Android Swipe Gesture
The Android SDK supports a variety of gestures you can detect, allowing you to tailor the ways in which users interact with your applications. In this tutorial, we will look at the framework that allows developers to add gesture detection to a simple application, working through the process of supporting the fling gesture and outlining how to support other gestures. Once you’ve completed the development for a basic fling function, you’ll be able to add additional gestures to the application yourself.
Example
In this tutorial, we are going to learn how to implement various swipe gestures in an app.
Video Demo
1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is ShareActivity.java.
2. First create an xml layout file naming activity_main.xml that contains several imageview indicating type of gestures that a user can do.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/background" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerInParent="true" android:layout_margin="5dp" android:src="@drawable/swipe_left" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerInParent="true" android:layout_margin="5dp" android:src="@drawable/swipe_right" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:layout_margin="5dp" android:src="@drawable/swipe_up" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerInParent="true" android:layout_margin="5dp" android:src="@drawable/swipe_down" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="5dp" android:src="@drawable/double_tap" /> </RelativeLayout> |
3. Now create a java class naming SimpleGestureFilter.java that conatins various Gesture detector methods that we can use in our activity to recognize user gesture. You can modify this class according to your need.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
package com.example.swipe_screen_demo; import android.app.Activity; import android.view.GestureDetector; import android.view.GestureDetector.SimpleOnGestureListener; import android.view.MotionEvent; public class SimpleGestureFilter extends SimpleOnGestureListener { // Swipe gestures type public final static int SWIPE_UP = 1; public final static int SWIPE_DOWN = 2; public final static int SWIPE_LEFT = 3; public final static int SWIPE_RIGHT = 4; public final static int MODE_TRANSPARENT = 0; public final static int MODE_SOLID = 1; public final static int MODE_DYNAMIC = 2; private final static int ACTION_FAKE = -13; // just an unlikely number // Swipe distances private int swipe_Min_Distance = 100; private int swipe_Max_Distance = 350; private int swipe_Min_Velocity = 100; private int mode = MODE_DYNAMIC; private boolean running = true; private boolean tapIndicator = false; private Activity context; private GestureDetector detector; private SimpleGestureListener listener; public SimpleGestureFilter(Activity context, SimpleGestureListener simpleGestureListener) { this.context = context; this.detector = new GestureDetector(context, this); this.listener = simpleGestureListener; } public void onTouchEvent(MotionEvent event) { if (!this.running) return; boolean result = this.detector.onTouchEvent(event); // Get the gesture if (this.mode == MODE_SOLID) event.setAction(MotionEvent.ACTION_CANCEL); else if (this.mode == MODE_DYNAMIC) { if (event.getAction() == ACTION_FAKE) event.setAction(MotionEvent.ACTION_UP); else if (result) event.setAction(MotionEvent.ACTION_CANCEL); else if (this.tapIndicator) { event.setAction(MotionEvent.ACTION_DOWN); this.tapIndicator = false; } } // else just do nothing, it's Transparent } public void setMode(int m) { this.mode = m; } public int getMode() { return this.mode; } public void setEnabled(boolean status) { this.running = status; } public void setSwipeMaxDistance(int distance) { this.swipe_Max_Distance = distance; } public void setSwipeMinDistance(int distance) { this.swipe_Min_Distance = distance; } public void setSwipeMinVelocity(int distance) { this.swipe_Min_Velocity = distance; } public int getSwipeMaxDistance() { return this.swipe_Max_Distance; } public int getSwipeMinDistance() { return this.swipe_Min_Distance; } public int getSwipeMinVelocity() { return this.swipe_Min_Velocity; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { final float xDistance = Math.abs(e1.getX() - e2.getX()); final float yDistance = Math.abs(e1.getY() - e2.getY()); if (xDistance > this.swipe_Max_Distance || yDistance > this.swipe_Max_Distance) return false; velocityX = Math.abs(velocityX); velocityY = Math.abs(velocityY); boolean result = false; if (velocityX > this.swipe_Min_Velocity && xDistance > this.swipe_Min_Distance) { if (e1.getX() > e2.getX()) // right to left this.listener.onSwipe(SWIPE_LEFT); else this.listener.onSwipe(SWIPE_RIGHT); result = true; } else if (velocityY > this.swipe_Min_Velocity && yDistance > this.swipe_Min_Distance) { if (e1.getY() > e2.getY()) // bottom to up this.listener.onSwipe(SWIPE_UP); else this.listener.onSwipe(SWIPE_DOWN); result = true; } return result; } @Override public boolean onSingleTapUp(MotionEvent e) { this.tapIndicator = true; return false; } @Override public boolean onDoubleTap(MotionEvent arg) { this.listener.onDoubleTap(); ; return true; } @Override public boolean onDoubleTapEvent(MotionEvent arg) { return true; } @Override public boolean onSingleTapConfirmed(MotionEvent arg) { if (this.mode == MODE_DYNAMIC) { // we owe an ACTION_UP, so we fake an arg.setAction(ACTION_FAKE); // action which will be converted to an // ACTION_UP later. this.context.dispatchTouchEvent(arg); } return false; } static interface SimpleGestureListener { void onSwipe(int direction); void onDoubleTap(); } } |
4. Finally come to your MainActivity.java and add the following code. In this class we do several things listed below:
- Implement SimpleGestureListener interface to listen user gesture.
- Make an instance of SimpleGestureFilter class that we had created above.
- Finally use onSwipe(int direction) and onDoubleTap method to do your stuff.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
package com.example.swipe_screen_demo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.MotionEvent; import android.widget.Toast; import com.example.swipe_screen_demo.SimpleGestureFilter.SimpleGestureListener; public class MainActivity extends AppCompatActivity implements SimpleGestureListener { private SimpleGestureFilter detector; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Detect touched area detector = new SimpleGestureFilter(MainActivity.this, this); } @Override public boolean dispatchTouchEvent(MotionEvent me) { // Call onTouchEvent of SimpleGestureFilter class this.detector.onTouchEvent(me); return super.dispatchTouchEvent(me); } @Override public void onSwipe(int direction) { //Detect the swipe gestures and display toast String showToastMessage = ""; switch (direction) { case SimpleGestureFilter.SWIPE_RIGHT: showToastMessage = "You have Swiped Right."; break; case SimpleGestureFilter.SWIPE_LEFT: showToastMessage = "You have Swiped Left."; break; case SimpleGestureFilter.SWIPE_DOWN: showToastMessage = "You have Swiped Down."; break; case SimpleGestureFilter.SWIPE_UP: showToastMessage = "You have Swiped Up."; break; } Toast.makeText(this, showToastMessage, Toast.LENGTH_SHORT).show(); } //Toast shown when double tapped on screen @Override public void onDoubleTap() { Toast.makeText(this, "You have Double Tapped.", Toast.LENGTH_SHORT) .show(); } } |
5. Now, you are all done, run your app and you will get the output as shown in video.
Thanks. 
4 Comments
Eswar
Thursday, January 3rd, 2019How can we use this for Fragment?
Dr. Droid
Thursday, January 3rd, 2019Hi Eswar,
In fragment wherever you want to use Activity as Context you can use getActivity().
Thanks
Azriidros
Tuesday, February 5th, 2019Hello. How can we save this gestures in database?
Dr. Droid
Wednesday, February 6th, 2019Hi Azriidros
In post we are displaying a toast whenever a gesture is detected. So there you have to save the gesture details in database.
If you don’t have any knowledge about Sqlite database then check this link.
Thanks