Creating a simple Gesture App with Android

May 14th, 2010 by

The integration of gestures into your android app adds some nice functionality and is made very easy using Google’s GestureBuilder application and the integrated GestureLibrary and Gesture Overlay API – so let’s build a sample app.

If you need some basic information regarding gestures on android first – take a look at this article.

Creating a gesture library

First you need to define the gestures that should be captured in the application later. For this reason there’s the GestureBuilder delivered with the Android SDK. You can find the app in the samples directory of your android sdk – e.g. <installation-directory>/android-sdk-linux_86/platforms/android-2.1/samples/GestureBuilder.

Run the gesture builder app on the android emulator. It is important to run the app with a SD card connected – if you need more information on creating virtual SD cards – take a look at this article. The important thing is to start the emulator with -sdcard <path-to-virtual-sdcard>/<sdcard-image>. The app needs the sdcard to store the captured gestures on it.

Running the GestureBuilder you need to add a new gesture – for this tutorial I’m capturing one gesture by drawing a spiral and naming it to “test”.

Copy the gesture library from the SD card  – e.g. by opening the view Android File Explorer in Eclipse  and save it somewhere for now.

Capturing Gestures

First create a new android application using the android sdk – my AndroidManifest.xml looks like this

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.hascode.android.tutorial"
 android:versionCode="1"
 android:versionName="1.0">
 <application android:icon="@drawable/icon" android:label="@string/app_name">
 <activity android:name=".GestureActivity"
 android:label="@string/app_name">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 </application>
</manifest>

My strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">hasCode.com - Gesture Tutorial</string>
</resources>

Create directory res/raw if it doesn’t exist yet and put the downloaded gesture library “gesture” in there

Now create an activity called GestureActivity and reference the gesture library – my class looks like this

package com.hascode.android.tutorial;
 
import java.util.ArrayList;
 
import android.app.Activity;
import android.gesture.Gesture;
import android.gesture.GestureLibraries;
import android.gesture.GestureLibrary;
import android.os.Bundle;
import android.util.Log;
 
/**
 * A simple Activity listening for Gestures
 *
 * visit http://www.hascode.com
 */
public class GestureActivity extends Activity {
	private GestureLibrary gLib;
	private static final String TAG = "com.hascode.android.gesture";
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		gLib = GestureLibraries.fromRawResource(this, R.raw.gesture);
		if (!gLib.load()) {
			Log.w(TAG, "could not load gesture library");
			finish();
		}
	}
}

Now we need a gesture overlay – we’re adding it to the 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="fill_parent"
    android:layout_height="wrap_content"
    android:text="Try to draw the gesture"
    />
<android.gesture.GestureOverlayView
    android:id="@+id/gestures"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1.0" />
</LinearLayout>

Add an event listener to the activity and reference the gesture overlay in the GestureActivity – at last my class looks like this:

package com.hascode.android.tutorial;
 
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.Prediction;
import android.gesture.GestureOverlayView.OnGesturePerformedListener;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
 
/**
 * A simple Activity listening for Gestures
 *
 * visit http://www.hascode.com
 */
public class GestureActivity extends Activity {
	private GestureLibrary gLib;
	private static final String TAG = "com.hascode.android.gesture";
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		gLib = GestureLibraries.fromRawResource(this, R.raw.gesture);
		if (!gLib.load()) {
			Log.w(TAG, "could not load gesture library");
			finish();
		}
 
		GestureOverlayView gestures = (GestureOverlayView) findViewById(R.id.gestures);
		gestures.addOnGesturePerformedListener(handleGestureListener);
	}
 
	/**
	 * our gesture listener
	 */
	private OnGesturePerformedListener handleGestureListener = new OnGesturePerformedListener() {
		@Override
		public void onGesturePerformed(GestureOverlayView gestureView,
				Gesture gesture) {
 
			ArrayList<Prediction> predictions = gLib.recognize(gesture);
 
			// one prediction needed
			if (predictions.size() > 0) {
				Prediction prediction = predictions.get(0);
				// checking prediction
				if (prediction.score > 1.0) {
					// and action
					Toast.makeText(GestureActivity.this, prediction.name,
							Toast.LENGTH_SHORT).show();
				}
			}
 
		}
	};
}

Now run the application and draw the spiral and a toast showing the gesture’s name (I named it “test”) pops up:

Links

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android” package=”com.hascode.android.tutorial” android:versionCode=”1″ android:versionName=”1.0″>
<application android:icon=”@drawable/icon” android:label=”@string/app_name”>
<activity android:name=”.GestureActivity” android:label=”@string/app_name”>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />
<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
</application>
</manifest>

Tags: , , , , , , ,

12 Responses to “Creating a simple Gesture App with Android”

  1. Naveen shrivastva Says:

    how to save gesture in sd card

  2. micha kops Says:

    from the emulator? or an app on your smartphone?

  3. rahul Says:

    Can you tell me how these Gestures are saved in the SD card. I mean the piece of code which does it.?

  4. micha kops Says:

    You can find the sources for the gesture builder in your android install dir in “platforms/android-/samples/GestureBuilder/” – take a look at GestureBuilderActivity in “src/com/android/gesture/builder

    the following code could work, too ;)

    final GestureLibrary lib = GestureLibraries.fromFile(new File(Environment.getExternalStorageDirectory(), "mygestures"));
    lib.addGesture("gesture's name", gesture); // adding
    lib.remove(gesture); // removing
    lib.save(); // done

  5. Lalita Says:

    I’m a newbie and hope you guys could bear with me.
    Thanks for the awesome stuffs. It truly helps a lot.
    The thing is……
    I try to run this code, but encountered one problem.
    The error message is “raw cannot be resolved or is not a field”
    in this line “gLib = GestureLibraries.fromRawResource(this, R.raw.gesture);”

    Could anyone here light me up?
    Thank you in advance!!

  6. micha kops Says:

    hi there!
    did you create the directory “res/raw” and did you copy your captured gesture library named “gesture” to this directory as described above?

  7. sandeep goria Says:

    I have added the gesture overlay in a linear layout with a imageView and a gessture overlay. It is not detecting in Android 2.2 but working fine Android 3.0 Please suggest necessary solution.

  8. Riz Says:

    i want to recognize the gesture when user click on the button.

  9. Anuja Says:

    Is there any good answer to this Stackoverflow question related to Gesture?

  10. Anuja Says:

    Is there any good answer to this Stackoverflow question related to Gesture?

    http://stackoverflow.com/q/9120499/833007

    (Sorry previous comment does not have the link)

  11. micha kops Says:

    I haven’t seen a complete gesture library that contained everything I needed yet .. once I wanted to implement and share a gesture library covering the basic printable ASCII characters as gestures + detection and listener API but there’s not much progress atm

  12. C-Swipe: An Ergonomic Solution To Navigation Fragmentation On Android | Smashing Magazine Says:

    [...] the GestureBuilder delivered with the Android SDK. You can read about this detailed procedure in “Creating a Simple Gesture App With Android” by Micha [...]

Leave a Reply

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 80,993 bad guys.

Search
Categories