Mobile Programming Gestures in Android

Gestures

Common Gestures

Handling Common Gestures Create a GestureDetector.OnGestureListener (Several Gestures) or a GestureDetector.SimpleOnGestureListener (More Gestures) Use the GestureDetecture class Add a GestureDetector object to the View Override View.onTouchEvent method to pass MotionEvent on to the GestureDetector.onTouchEvent method Override the callback methods for onScroll, onLongPress, onFling, onSingleTapConfirmed, etc.

Motion Event Motion events describe movements in terms of an action code and a set of axis values. The action code specifies the state change that occurred such as a pointer going down or up. The axis values describe the position and other movement properties. For example, when the user first touches the screen, the system delivers a touch event to the appropriate View with the action code ACTION_DOWN and a set of axis values that include the X and Y coordinates of the touch and information about the pressure, size and orientation of the contact area. Some devices can report multiple movement traces at the same time. Multi- touch screens emit one movement trace for each finger. The individual fingers or other objects that generate movement traces are referred to as pointers. Motion events contain information about all of the pointers that are currently active even if some of them have not moved since the last event was delivered.

Simple Gesture Demo App that listens for simple gestures Updates lower TextView in call back methods

Gesture Demo public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener, GestureDetector.OnDoubleTapListener { GestureDetectorCompat gestureDetectorCompat; TextView gesture; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gesture=findViewById(R.id.textView); gestureDetectorCompat=new GestureDetectorCompat(this,this); gestureDetectorCompat.setIsLongpressEnabled(true); }

Gesture Demo Here, simply pass event on to the GestureDetectorCompat object. It will call back methods @Override public boolean onTouchEvent(MotionEvent event) { gestureDetectorCompat.onTouchEvent(event); return super.onTouchEvent(event); }

Callback methods for OnGestureLitener @Override public boolean onDown(MotionEvent e) { gesture.setText("Down"); return true; } @Override public void onShowPress(MotionEvent e) { gesture.setText("Show Press"); } @Override public boolean onSingleTapUp(MotionEvent e) { gesture.setText("Single Tap Up"); return true; }

Callback methods for OnGestureLitener @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { gesture.setText("Scroll"); return true; } @Override public void onLongPress(MotionEvent e) { gesture.setText("Long Press"); } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { gesture.setText("Fling"); return true; }

Callback methods for OnDoubleTapLitener @Override public boolean onSingleTapConfirmed(MotionEvent e) { gesture.setText("Single Tap Confirmed"); return true; } @Override public boolean onDoubleTap(MotionEvent e) { gesture.setText("Double Tap"); return true; } @Override public boolean onDoubleTapEvent(MotionEvent e) { gesture.setText("Double Tap Confirmed"); return true; }

Multi-Touch Gestures

Multi Touch Gestures Multiple fingers (pointers) touch screen at the same time Handled via MotionEvents Each pointer has a MotionEvent Track via index (an array of MotionEvents) or ID MotionEvent object sent to onTouch contains number of “pointers” involved

Displaying Multitouch data Using methods of MotionEventCompat class @Override public boolean onTouchEvent(MotionEvent event) { if(event.getPointerCount() > 1){ gesture.setText("Multi Touch\nEvent"); int action = event.getAction(); int index = event.getActionIndex(); gesture.append("\n"+ actionToString(action)+"\n Pointer Index: "+index); } gestureDetectorCompat.onTouchEvent(event); return super.onTouchEvent(event); }

Scale Gestures Use ScaleGestureDetector Class Pinch to zoom in or out Out – Scale Up In – Scale Down

Scale Gestures Create a class that implements OR a class that extends ScaleGestureDetector.OnScaleGestureListener OR a class that extends ScaleGestureDetector.SimpleOnScaleGestureListener Implement methods with dummy methods Override only the methods you care about Create a ScaleGestureDetector with listener Pass MotionEvents from onTouch

public class MainActivity extends Activity implements ScaleGestureDetector.OnScaleGestureListener{ private TextView textView; private float scale = 1f; private float onScaleBegin = 0; private float onScaleEnd = 0; private ScaleGestureDetector detector; String TAG = "DBG"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); textView = findViewById(R.id.textView); detector = new ScaleGestureDetector(this, this); } public boolean onTouchEvent(MotionEvent event) { detector.onTouchEvent(event); return super.onTouchEvent(event); } @Override public boolean onScale(ScaleGestureDetector detector) { scale *= detector.getScaleFactor(); // Don't let the object get too small or too large. scale = Math.max(0.1f, Math.min(scale, 5.0f)); textView.setText(“Scale Factor:”+scale); return true; } @Override public boolean onScaleBegin(ScaleGestureDetector detector) { Log.d(TAG, "onScaleBegin"); onScaleBegin = scale; return true; } @Override public void onScaleEnd(ScaleGestureDetector detector) { Log.d(TAG, "onScaleEnd"); onScaleEnd = scale; if (onScaleEnd > onScaleBegin) { Toast.makeText(getApplicationContext(), "Scaled Up by a factor of " + String.valueOf(onScaleEnd / onScaleBegin), Toast.LENGTH_SHORT).show(); } if (onScaleEnd < onScaleBegin) { Toast.makeText(getApplicationContext(), "Scaled Down by a factor of " + String.valueOf(onScaleBegin / onScaleEnd), Toast.LENGTH_SHORT).show(); } } } Scaling Example

Complex Gestures

Complex Gestures Gesture Builder App on your device(Real or Emulator) To define custom gestures you want your app to recognize Open the Gesture Builder App and create your custom gestures as shown in the gif image Each gesture is associated with a name Limited to single pointer Multiple gestures can have same name Variations on same gesture, better chance of recognizing Note: To see the image start slide show

Custom Gestures After create above custom gestures, the app will create a file which name is gesture.txt in the emulator to store the two gesture info. The file is saved in directory /storage/emulated/0/Android/data/pack.GestureApp. Although it has a txt suffix, but the file is a binary file in fact. To get above gesture.txt file, open Device File Explorer as shown below.

Contd. Navigate to the directory /storage/emulated/0/Android/data/pack.GestureApp, right click on gesture.txt and save it as gesture.txt in the raw folder within your app’s res folder. Now you can use your defined custom gestures in your application

Recognize Custom Gesture In Android Source Code Recognize gestures via GestureOverlayView This widget is kind of a simple drawing board that shows and captures user gestures. When gesture is completed GestureLibrary is queried to see if gesture is recognized Predictions are made between entered gesture and those in the library

Steps Add a widget of GestureOverlayView class in layout xml file. Create a class that implements GestureOverlayView.OnGesturePerformedListener interface override it’s onGesturePerformed method Create an instance of the class just created and invoke GestureOverlayView‘s addOnGesturePerformedListener method to set it. Then when you start the app, gesture overlay view widget will capture any gesture you performed and use the custom listener to response to it.

Sample Code (Layout File) <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.gesture.GestureOverlayView android:id="@+id/gesture_overlay_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:gestureColor="@color/colorPrimary" android:uncertainGestureColor="@color/colorPrimary" android:gestureStrokeType="multiple"/> </FrameLayout>

Sample Code (MainActivity.java) public class MainActivity extends AppCompatActivity { private GestureOverlayView gestureOverlayView = null; private GestureLibrary gestureLibrary = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gestureOverlayView = (GestureOverlayView)findViewById(R.id.gesture_overlay_view); if(gestureLibrary == null) { // Load custom gestures from gesture.txt file. gestureLibrary = GestureLibraries.fromRawResource(this, R.raw.gesture); if(!gestureLibrary.load()) { Toast.makeText(this, "Custom gesture file load failed.",Toast.LENGTH_LONG).show(); } } GesturePerformListener gesturePerformListener = new GesturePerformListener(this,gestureLibrary); gestureOverlayView.addOnGesturePerformedListener(gesturePerformListener); } }

Sample Code (GesturePerformListener.java) public class GesturePerformListener implements GestureOverlayView.OnGesturePerformedListener { private GestureLibrary gestureLibrary = null; private Context c; public GesturePerformListener(Context c, GestureLibrary gestureLibrary) { this.gestureLibrary = gestureLibrary; this.c = c; } @Override public void onGesturePerformed(GestureOverlayView gestureOverlayView, Gesture gesture) { // Recognize the gesture and return prediction list. ArrayList<Prediction> predictionList = gestureLibrary.recognize(gesture); int size = predictionList.size(); if(size > 0) { // Get the first prediction. Prediction firstPrediction = predictionList.get(0); /* Higher score higher gesture match. */ if(firstPrediction.score > 5) { String action = firstPrediction.name; Toast.makeText(c, "Your gesture match "+action, Toast.LENGTH_LONG).show(); }else { Toast.makeText(c, "Your gesture do not match any predefined gestures.", Toast.LENGTH_LONG).show(); } } } }

Thank You!