TUTORIAL ON MULTITOUCH AND SWIPE GESTURES UNIVERSITY OF TEXAS AT EL PASO PRESENTED BY: Kehinde Akinola

Objectives Know some Gestures in Android How to detect Common Gestures (using Android as examples) Creating multitouch gestures Know what a swipe Gesture is Handling Multi-Touch Gestures (In Android)/Tracking Multiple Pointers Get a MotionEvent's Action

Introduction Definition Gestures ? Gesture recognition is the mathematical interpretation of a human motion by a computing device. Computing Device: Examples >> Smartphone devices, iPhones, 3-D virtual reality, reality, etc. Gestures examples: >>>>>>pinch , double tap, scrolls , long presses, on a touch screen device… Multitouch gestures on Touchscreens …… Android devices **************Android provides GestureDetector class********** Libraries:

Basics of Working with Gestures (In Android) Capture touch Events Process the touch Events At the heart of all gestures is the onTouchListener and the onTouch() method which has access to MotionEvent data. Every view has an onTouchListener which can be specified Important Classes (libraries) to import: (In Android) import android.view.MotionEvent; import android.gesture.Gesture; import static android.view.gestureDetector.*;

ACTION_MOVE—A change has happened during a press gesture. Many mobile devices have touch screens and with touch screen you can have gestures. Definition: Multitouch gesture is when multiple pointers (fingers) touch the screen at the same time. Examples: Use 2 fingers to rotate an object. Use 2 fingers to magnify an image Touch events generated for multiple pointers in Android: Track Multiple Pointers (in Android) ACTION_DOWN—For the first pointer that touches the screen. This starts the gesture. The pointer data for this pointer is always at index 0 in the MotionEvent. ACTION_POINTER_DOWN—For extra pointers that enter the screen beyond the first. The pointer data for this pointer is at the index returned by getActionIndex(). ACTION_MOVE—A change has happened during a press gesture. ACTION_POINTER_UP—Sent when a non-primary pointer goes up. ACTION_UP—Sent when the last pointer leaves the screen

ddfd override onTouchEvent() method and check these events manually. Its syntax is given below ************ public boolean onTouchEvent(MotionEvent ev){ final int variableAction = ev.getAction(); switch(variableAction){ case MotionEvent.ACTION_DOWN:{ // performs the activities you want it to perform break; } case MotionEvent.ACTION_MOVE:{ return true;

Need to implement: Gesturedetector.OnGestureListener GestureDetector.OnDoubleTapListener >> include the onDoubleTap() method // assuming you want something done when the screen is double-tapped. Example: Public class MainActivity extends Activity implements( GestureDetector.OnGestureListener, GestureDetector.OnDoubleTapListener{ .

@Override Public boolean onDoubleTap(MotionEvent event){ Log.d(DEBUG_TAG, “OnDoubleTap”, +event.toString()); return true; } Creation of an instance of the Android GestureDetectorCompact … Rule: ***********Called when the activity is first created // called when the activity is first created protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // // instantiate with an application context and implementation of GestureDetector.OnGestureListener, GestureDetector.OnDoubleTapListener kennyDetector = new GestureDetectorCompact(this, this); kennyDetector.setOnDoubleTapListener(this);

Detecting Gestures Source Wikipedia Android provides the GestureDetector class for detecting common gestures. onDown(), onLongPress(), onFling(), etc. Combine GestureDetector class with onTouchEvent() method described above. Android provides the GestureDetector class for detecting common gestures. onDown(), onLongPress(), onFling(), etc. Combine GestureDetector class with onTouchEvent() method described above. Source Wikipedia

Implementation of the onTouchEvent() callback method User places his fingers on a screen. It triggers the callback onTouchEvent() Once a touch is identified as a gesture, the onTouchEvent() method will be triggered. Android GestureDetector class is used for detecting common gestures. Examples of those supported: >>> onDown(), onLongPress(), onFling() GestureDetector can be used with onTouchEvent()

To detect any of the those mention events: Override onTouchEvents() method To get the co-ordinates of the X and Y axis, you can call getX() and getY() method. Its syntax is given below // to get x or y values final float x = ev.getX(); final float y = ev.getY();

Some other methods provided by MotionEvent class and description getAction() returns the kind of action being performed getPressure() returns the current pressure of this event for the first index getRawX() method returns the original raw X coordinate of this event getRawY() returns the original raw Y coordinate of this event getSize() returns the size for the first pointer index getSource() gets the source of the event getXPrecision() method return the precision of the X coordinates being reported getYPrecision() method return the precision of the Y coordinates being reported

private int mActivePointerId; public boolean onTouchEvent(MotionEvent event) { .... // Get the pointer ID mActivePointerId = event.getPointerId(0); // ... Many touch events later... // Use the pointer ID to find the index of the active pointer // and fetch its position int pointerIndex = event.findPointerIndex(mActivePointerId); // Get the pointer's current position float x = event.getX(pointerIndex); float y = event.getY(pointerIndex); }

protected void onCreate(Bundle savedInstanceState) { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); edit1 = (EditText) findViewById(R.id.editText); edit2 = (EditText) findViewById(R.id.editText2); edit3 = (EditText) findViewById(R.id.editText3); edit4 = (EditText) findViewById(R.id.editText4); tv1=(TextView)findViewById(R.id.textView2); tv1.setOnTouchListener(new View.OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { final int variableAction = event.getAction(); switch(variableAction){ case MotionEvent.ACTION_DOWN:{ final float x = event.getX(); final float y = event.getY(); lastXAxis = x; lastYAxis = y; // Continue here edit1.setText(Float.toString(lastXAxis)); edit2.setText(Float.toString(lastYAxis)); break; } case MotionEvent.ACTION_MOVE:{ final float x = event.getX(); final float y = event.getY(); final float dx = x - lastXAxis; final float dy = y - lastYAxis; xAxis += dx; yAxis += dy; edit3.setText(Float.toString(xAxis)); edit4.setText(Float.toString(yAxis)); return true; });

Source Material Design Swipe Features Swipe gesture activities vary based on context. The speed at which a gesture is performed is the primary distinction between Drag, Swipe, and Fling. Drag: Fine gesture, slower, more controlled, typically has an on-screen target Swipe: Gross gesture, faster, typically has no on-screen target Fling: Gross gesture, with no on-screen target Gesture velocity impacts whether the action is immediately reversible. A swipe becomes a fling based on ending velocity and whether the affected element has crossed a threshold (or point past which an action can be undone). Source Material Design https://material.io/guidelines/patterns/gestures.html#gestures-touch-activities

So many resources can be gotten from the url below: >> Pattern Design for mobile Devices …. A drag maintains contact with an element, so reversing the direction of the gesture will drag the element back across the threshold. A fling moves at a faster speed and removes contact with the element while it crosses the threshold, preventing the action from being undone. CONCLUSION So many resources can be gotten from the url below: https://developer.android.com/training/gestures/multi.html

References https://developer.android.com/training/gestures/multi.html https://developer.android.com/training/gestures/multi.html#action https://material.io/guidelines/patterns/gestures.html#gestures-touch-activities