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:
In this post of Gesture Tutorial, we will make a simple App that will display if you are dragging, tapping or scrolling on screen.
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.
Please follow following steps:
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:
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 andGestureDetector.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. ThisoutputText 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, onDoubleTapetc. 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 callDetectMe.onTouchEvent(event)before super.onTouchEvent(event).
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://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>
<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.
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)