Android Gestures with Examples

In android, Gestures will allow users to interact with an app via touch gestures. Generally, the touch gesture will occur whenever a user places one or more fingers on the touch screen, then our application interprets that pattern of touches as a particular gesture.

Android provided a different types of touch event gestures those are double tap, long press, fling, pinch, etc. and we can use these gestures in our android applications based on our requirements.

In android, we have a two phases to detect gestures in android applications.

• Gathering the data about touch events.
• Interpreting the data to see if it meets the criteria for any of the gestures our app supports.

In android, by using GestureDetector class and onTouchEvent() callback method we can easily determine the gestures and perform required events in android applications.

Capturing the Touch Events

Generally, the gesture starts when the user first touches the screen, continues as the system tracks the position of the user’s finger(s) and ends by capturing the final event of the user’s fingers leaving the screen. During this interaction, the MotionEvent will send all the details to onTouchEvent() callback.

By using the MotionEvent data, we can easily determine the type of gesture and perform required events in our android applications.

To intercept the touch events in an activity or view, we need to override onTouchEvent() method like as shown below.

public class MainActivity extends Activity {
...        @Override
        public boolean onTouchEvent(MotionEvent event){
            int action = MotionEventCompat.getActionMasked(event);
            switch(action) {
                case (MotionEvent.ACTION_DOWN) :
                    Log.d(DEBUG_TAG,"Action was DOWN");
                    return true;
                case (MotionEvent.ACTION_MOVE) :
                    Log.d(DEBUG_TAG,"Action was MOVE");
                    return true;
                case (MotionEvent.ACTION_UP) :
                    Log.d(DEBUG_TAG,"Action was UP");
                    return true;
                case (MotionEvent.ACTION_CANCEL) :
                    Log.d(DEBUG_TAG,"Action was CANCEL");
                    return true;
                case (MotionEvent.ACTION_OUTSIDE) :
                    Log.d(DEBUG_TAG,"Movement occurred outside bounds");
                    return true;
                default :
                    return super.onTouchEvent(event);
            }
 }

If you observe above code snippet, we used getActionMasked() to get the action performed by the user from the event parameter.

Detecting the Gestures

As discussed, android provided a GestureDetector class for detecting common gestures. Following is the code snippet to detect the gestures in android application.

GestureDetector detector;detector = new GestureDetector(this,new Gesture());
class Gesture extends GestureDetector.SimpleOnGestureListener{public boolean onDoubleTap(MotionEvent event) {

}public void onLongPress(MotionEvent event) {

}public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {

}public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

}
}

If you observe above code snippet, we are able to detect the gestures and perform required operations based on our requirements.

Now we will see how to use ScaleGestureDetector to pinch zoom in or zoom out imagview in android application with examples.

Android Gestures Example

Following is the example of identifying the gestures and perform zoom in or zoom out imageview through pinch using android ScaleGestureDetector object.

Create a new android application using android studio and give names as GestureExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

Once we create an application, open activity_main.xml file from \res\layout folder path and write the code like as shown below.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="welcome to tutlane"
        android:textStyle="bold" />
    <ImageView android:id="@+id/imgvw"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:scaleType="matrix"
        android:src="@drawable/bankok1"/>
</LinearLayout>

Now open your main activity file MainActivity.java from \java\com.tutlane.gestureexample path and write the code like as shown below

MainActivity.java

package com.tutlane.gestureexample;import android.graphics.Matrix;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.MotionEvent;import android.view.ScaleGestureDetector;import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
    private ImageView img;
    private Matrix matrix = new Matrix();
    private float scale = 1f;
    private ScaleGestureDetector detector;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img = (ImageView)findViewById(R.id.imgvw);
        detector = new ScaleGestureDetector(MainActivity.this,new ScaleListener());
    }
    @Override
    public boolean onTouchEvent(MotionEvent event){
        detector.onTouchEvent(event);
        return true;
    }
    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener{
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            scale *= detector.getScaleFactor();
            scale = Math.max(0.1f, Math.min(scale, 5.0f));
            matrix.setScale(scale, scale);
            img.setImageMatrix(matrix);
            return true;
        }
    }
}

If you observe above code, we used ScaleGestureDetector class to handle pinch gesture to implement zoom in or zoom out effects for imageview element.

Output of Android Gestures Example

When we run above program in android studio we will get the result like as shown below.

To see the gesture details, launch the application in real device and pinch zoom in or zoom out the image and it will expand or shrink based on the gesture like as shown below.

This is how we can implement the gestures in android applications to perform required actions based on our requirements.