Android Gestures - Tutorial

Android Gestures

This tutorial describes how to use Gestures and the GestureOverylayVIew in Android. The tutorial is based on Eclipse 3.6, Java 1.6 and Android 2.3 (Gingerbread).

Table of Contents

1. Android Gestures 2. Example 3. About this website 4. Links and Literature

4.1. Android Resources 4.2. vogella GmbH training and consulting support

1. Android Gestures

Android supports gestures. To use this support your application must use the view "GestureOverlayView". In this view you place your other views.

Gestures are defined by a binary resources which can be created with an example program from the Android SDK. In your activity you can load Gestures via GestureLib.fromRawResource(). If a gesture is detected then the method "onGesturePerformedListener" is called. For this the activity must implement the interface "OnGesturePerformedListener" and must register itself at the GestureOverlayView with the method "addOnGesturePerformedListener()".

Android shows the gestures in yellow for recognized gestures and a ligher yellow for not recognized gestures. You can turn this off, via setGestureColor(Color.TRANSPARENT) or setUncertainGestureColor(Color.TRANSPARENT) on the GestureOverlayView.

If you create the gesture in the Android simulator via the program "GestureBuilder". You can create several gestures with the same name. That may help you to determine the right one. If you create an Android Emulator for Android 1.6 this application will be preinstalled on your device. Make sure to create a device with sdcard otherwise you cannot save gestures. All gestures will be saved in a file called gestures on your emulator.

You can copy the gestures from the emulator via the adb onto your local machine via the command:

./adb pull /sdcard/gestures ~/test 

The gesture file must be copied into your application under "res/raw". Afterwards it can be used in your GestureOverlayView

2. Example

Create a new Android project "de.vogella.android.gestures" with the activity "GestureTest". Create a few gestures and copy them to your application as described in the last chapter.

Unfortunately the UI builder does not support GestureOverlayView, please see Bug report GestureOverlayView not working in the layout builder, therefore we have to build a layout without the gesture view and add this view via code to the GestureOverlayView.

Create the following layout main.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<TextView  
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:text="@string/hello"/>
</LinearLayout> 

Create the following Activity.

package de.vogella.android.gestures;

import java.util.ArrayList;

import android.app.Activity;
import android.gesture.Gesture;
import android.gesture.GestureLibraries;
import android.gesture.GestureLibrary;
import android.gesture.GestureOverlayView;
import android.gesture.GestureOverlayView.OnGesturePerformedListener;
import android.gesture.Prediction;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class GestureTest extends Activity implements OnGesturePerformedListener {
  private GestureLibrary gestureLib;

  
 

  /** Called when the activity is first created. */
 
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GestureOverlayView gestureOverlayView = new GestureOverlayView(this);
    View inflate = getLayoutInflater().inflate(R.layout.main, null);
    gestureOverlayView.addView(inflate);
    gestureOverlayView.addOnGesturePerformedListener(this);
    gestureLib = GestureLibraries.fromRawResource(this, R.raw.gestures);
    if (!gestureLib.load()) {
      finish();
    }
    setContentView(gestureOverlayView);
  }

  @Override
  public void onGesturePerformed(GestureOverlayView overlay, Gesture gesture) {
    ArrayList<Prediction> predictions = gestureLib.recognize(gesture);
    for (Prediction prediction : predictions) {
      if (prediction.score > 1.0) {
        Toast.makeText(this, prediction.name, Toast.LENGTH_SHORT)
            .show();
      }
    }
  }
} 

Start your application. As a result you should be able to perform gestures and see the result. We only show a Toast but of course you could perform all kind of actions.