Xamarin.Android - Gesture Overlay View

Introduction

In this article, I shall show you how to create gestures using Gesture Overlay View in Xamarin Android. A "gesture" occurs when a user places one or more fingers on the touchscreen and your application interprets that pattern of touches as a particular gesture.

Step 1

Open Visual Studio emulator for Android and open "Gestures Builder" from emulator apps.

Step 2

Next, click on "Add Gesture" button and draw a gesture, give it a name as shown in the screenshot, and click on "Done" button.

Step 3

After creating some gestures in Gesture Builder, click on emulator double arrow and go to Emulator Tools -> Additional Tools -> SD card. Pick a local folder whose content will be used to populate the SD card and give it a new location.

Next, click on "Pull from SD card". The emulator will pull all the emulator data to your local folder.

Step 4

Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give it a name like XamarinGesture.

Step 5

Now, copy the gestures file from your local folder with the name "0" and go to Solution Explorer-> Project Name-> Resources. Right-click to create a new folder, give it a name like Raw, and paste the gesture file in it, as shown in below screenshot.

Step 6

Go to Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open main.axml file and add the following code. The layout will have a TextView in order to display the preview of the gesture name.

(FileName: Main.axml)

XAML Code

<?xml version="1.0" encoding="utf-8"?>
<android.gesture.GestureOverlayView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="@+id/gesture"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/txtResult"
android:textSize="30sp"
android:text="Gesture" />
</android.gesture.GestureOverlayView>

Step7

Next, go to Solution Explorer-> Project Name-> MainActivity and add the following code to it using appropriate namespaces.

(FileName: MainActivity)

C# Code

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Gestures;
using static Android.Gestures.GestureOverlayView;
using System.Collections.Generic;
using System.Linq;
namespace XamarinGesture
{
[Activity(Label = "XamarinGesture", MainLauncher = true)]
public class MainActivity : Activity, IOnGesturePerformedListener
{
GestureLibrary lib;
TextView txtResult;
public void OnGesturePerformed(GestureOverlayView overlay, Gesture gesture)
{
List<Prediction> predictions = lib.Recognize(gesture).ToList();
foreach(var item in predictions)
{
if (item.Score > 1.0)
txtResult.Text = item.Name;
}
}
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
txtResult = FindViewById<TextView>(Resource.Id.txtResult);
lib = GestureLibraries.FromRawResource(this, Resource.Raw.gestures);
if (!lib.Load())
Finish();
GestureOverlayView gesture = FindViewById<GestureOverlayView>(Resource.Id.gesture);
gesture.AddOnGesturePerformedListener(this);
}
}
}

We have finished our gesture builder app. Just rebuild and run the project. You will have the result like below.

Output