Wednesday, June 29, 2011

Android Gestures - Tutorial


Lars Vogel

Version 0.1
04.01.2011
Revision History
Revision 0.104.01.2011Lars Vogel
Created
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).

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="fill_parent"
    android:layout_height="fill_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.

3. Thank you

No comments:

Post a Comment