Android Gesture Tutorial – Touch, Scroll and Press on Android Device Screen

In this post we will learn how to make Android Gesture Tutorial and give different functionality whenever a user Touch or Scroll android screen. This App is named as Android Gesture Tutorial. Let’s learn different type of Gesture Control in Android. It allows you to make a decent App with fine User Interface. This is the basic building block in most of the Apps. A gesture could be of following types:

1. Touch or Double Touch
2. Double Tap
3. Drag, Swipe or Fling.
4. Long press

In this post we will make a simple App that will display if you are dragging, tapping or scrolling on screen.

Pre-requisites:

1) Android Studio installed on your PC (Unix or Windows). You can learn how to install it here .
2) A real time android device (Smartphone or Tablet) configured with Android Studio. .
3) A basic knowledge of Android lifecycle and different classes & functions used in Android Studio.

Let’s start with creating a new project.

Creating new project

Please follow following steps:

1. Open Android Studio and make a new project with name “My Application” and company domain application.example.com (I used my company domain i.e androidtutorialpoint.com. Similarly you can yours).
2. Click Next and choose android version Lollipop. Again Click Next and Choose Blank Activity.
3. Leave all things remaining same and Click Finish.

Now you can see MainActivity.java, content_main.xml and strings.xml. If you are not able to see them then click on the left window where these files can easily be located as shown in following figure:

MainActivity.java of Android Gesture Tutorial:

package com.androidtutorialpoint.myapplication; 
 
import android.os.Bundle; 
import android.support.design.widget.FloatingActionButton; 
import android.support.design.widget.Snackbar; 
import android.support.v4.view.GestureDetectorCompat; 
import android.support.v7.app.AppCompatActivity; 
import android.support.v7.widget.Toolbar; 
import android.view.GestureDetector; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.widget.TextView; 
import android.widget.Toast; 

public class MainActivity extends AppCompatActivity implements
                                  GestureDetector.OnGestureListener, 
                                  GestureDetector.OnDoubleTapListener { 

    private TextView output_text;                 // This is added for Text output 
    private GestureDetectorCompat DetectMe;       

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        output_text = (TextView) findViewById(R.id.outputText);  // Taking reference of text to be displayed on screen
        DetectMe = new GestureDetectorCompat(this,this); 
        DetectMe.setOnDoubleTapListener(this); 

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
        setSupportActionBar(toolbar); 

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 
        fab.setOnClickListener(new View.OnClickListener() { 
            @Override 
            public void onClick(View view) { 
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) 
                        .setAction("Action", null).show(); 
            } 
        }); 
    } 

// Following functions are overrided to show text when a particular method called.
 
    @Override 
    public boolean onSingleTapConfirmed(MotionEvent e) { 
        output_text.setText("onSingleTapConfirmed"); 
        return true; 
    } 

    @Override 
    public boolean onDoubleTap(MotionEvent e) { 
        output_text.setText("onDoubleTap"); 
        return true; 
    } 

    @Override 
    public boolean onDoubleTapEvent(MotionEvent e) { 
        output_text.setText("onDoubleTapEvent"); 
        return true; 
    } 

    @Override 
    public boolean onDown(MotionEvent e) { 
        output_text.setText("onDown"); 
        return true; 
    } 

    @Override 
    public void onShowPress(MotionEvent e) { 
        output_text.setText("onShowPress"); 

    } 

    @Override 
    public boolean onSingleTapUp(MotionEvent e) { 
        output_text.setText("onSingleTapUp"); 
        return true; 
    } 

    @Override 
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { 
        output_text.setText("onScroll"); 
        return true; 
    } 

    @Override 
    public void onLongPress(MotionEvent e) { 
        output_text.setText("onLongPress"); 
    } 

    @Override 
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { 
        output_text.setText("onFling"); 
        return true; 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent event){ 
        this.DetectMe.onTouchEvent(event); 
        return super.onTouchEvent(event); 
    } 

    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
        // Inflate the menu; this adds items to the action bar if it is present. 
        getMenuInflater().inflate(R.menu.menu_main, menu); 
        return true; 
    } 

    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 
        // Handle action bar item clicks here. The action bar will 
        // automatically handle clicks on the Home/Up button, so long 
        // as you specify a parent activity in AndroidManifest.xml. 
        int id = item.getItemId(); 
        //noinspection SimplifiableIfStatement 
        if (id == R.id.action_settings) { 
            return true; 
        } 

        return super.onOptionsItemSelected(item); 
    } 
} 

Let’s go through this code. First we make handle of TextView which is used to display output text on screen. GestureDetectorCompat detects all gestures and events using event supplied by MotionEvent. Moreover, GestureDetector.OnGestureListener will notify user about a particular event and GestureDetector.OnDoubleTapListener will notify a Double tap on screen.
We pass GestureDetector.OnGestureListener and GestureDetector.OnDoubleTapListener as interface which are a collection of methods that we can override to include some more functionality. Interfaces in java are same as abstract classes in C++.

We are supplying reference id to the output_text and creating object DetectMe. This outputText will be defined as an id in content_main.xml. DetectMe.setOnDoubleTapListener(this) allow us to detect double taps.

Now we are overriding predefined functions onSingleTapConfirmed, onDoubleTap etc. to show text on screen whenever they are called. Return value is true so that it can be assured that event is handled properly.

Finally we need to override onTouchEvent that will glue together our whole code. This is the default method that will be called whenever a user touches screen. Right now it is checking only touch part. To include gesture in Android Gesture Tutorial App we have to call DetectMe.onTouchEvent(event)before super.onTouchEvent(event).

content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.androidtutorialpoint.myapplication.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:id="@+id/outputText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

strings.xml:

<resources>
<string name="app_name">MyApplication</string>
    <string name="single_tap">single_tap!</string>
    <string name="double_tap">double_tap!</string>
    <string name="double_tap_event">double_tap_event!</string>
    <string name="on_down">on_down!</string>
    <string name="screen_pressed">screen_pressed!</string>
    <string name="single_tap_up">single_tap_up!</string>
    <string name="scroll">scroll!</string>
    <string name="long_press">long_press!</string>
    <string name="flinging">flinging!</string>
    <string name="action_settings">Settings</string>
</resources>

So that’s it. Isn’t it very easy? We have gone through whole code while explaining each line.

What’s Next

You can see our next tutorial of How to make a basic App. Here You will be able to make an App from scratch without any external help.

Congrats!! Please write comments wherever you have problem or want to give some suggestions. Don’t forget to subscribe for latest android tutorials.Also do Like our Facebook Page or Add us on Twitter.

You can download above code by clicking below: