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
  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



Similar Articles