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
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.gesture.GestureOverlayView xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:id="@+id/gesture"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent">
  7. <TextView
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:layout_gravity="center"
  11. android:id="@+id/txtResult"
  12. android:textSize="30sp"
  13. android:text="Gesture" />
  14. </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

  1. using Android.App;
  2. using Android.Widget;
  3. using Android.OS;
  4. using Android.Gestures;
  5. using static Android.Gestures.GestureOverlayView;
  6. using System.Collections.Generic;
  7. using System.Linq;
  8. namespace XamarinGesture
  9. {
  10. [Activity(Label = "XamarinGesture", MainLauncher = true)]
  11. public class MainActivity : Activity, IOnGesturePerformedListener
  12. {
  13. GestureLibrary lib;
  14. TextView txtResult;
  15. public void OnGesturePerformed(GestureOverlayView overlay, Gesture gesture)
  16. {
  17. List<Prediction> predictions = lib.Recognize(gesture).ToList();
  18. foreach(var item in predictions)
  19. {
  20. if (item.Score > 1.0)
  21. txtResult.Text = item.Name;
  22. }
  23. }
  24. protected override void OnCreate(Bundle savedInstanceState)
  25. {
  26. base.OnCreate(savedInstanceState);
  27. // Set our view from the "main" layout resource
  28. SetContentView(Resource.Layout.Main);
  29. txtResult = FindViewById<TextView>(Resource.Id.txtResult);
  30. lib = GestureLibraries.FromRawResource(this, Resource.Raw.gestures);
  31. if (!lib.Load())
  32. Finish();
  33. GestureOverlayView gesture = FindViewById<GestureOverlayView>(Resource.Id.gesture);
  34. gesture.AddOnGesturePerformedListener(this);
  35. }
  36. }
  37. }

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

Output