Creating A Gesture Listener In Xamarin Android App Using Visual Studio

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS).

In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Gesture listener is called to recognize a gesture, which is applicable when the user presses on the screen while maintaining contact with the screen and moves their finger in a given direction.

Prerequisites

• Visual Studio 2015 Update 3

The steps, mentioned below are required to be followed in order to create a gesture listener in Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio or click (Ctrl+Shift+N).



Step 2

After opening the New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Now, give your Android app; a name (Ex:sample) and give the path of your project. Afterwards, click OK.



Step 3

Go to Solution Explorer. In Solution Explorer, get all the files and source in your project.

Subsequently, select Resource-->Layout-->double click to open main.axml page. To write XAML code, you need to select the source.

If you want design, choose the Designer Window and you can design your app.



Step 4

After opening main.axml, file will open the main page designer. You can design the page as per your desire.



Delete the Default hello world button, go to the source panel and you can see the button coding. You need to delete it.

After deleting XAML code, delete C# button action code.

Go to MainActivity.cs page. You need to delete the button code.

Step 5

Now, go to the toolbox Window. In the toolbox Window, get all the types of the tools and controls.

You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls.

You need to drag and drop the TextView.



Step 6

Now, go to the properties Window. You need to edit the TextView Id's value and text value(EX: android:id="@+id/velocity_text_view" android:text="Small Text").



Step 7

In this step, go to Main.axml page Source Panel. Note, the TextView Id's value and text value.

Main.axml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px">
    <TextView android:text="Small Text" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/velocity_text_view" />
</LinearLayout>

Step 8

In this step, go to MainActivity.cs page, add one sub class whose name is GestureDetector.IOnGestureListener and also add two variables.

MainActivity.cs

public class MainActivity: Activity, GestureDetector.IOnGestureListener
    //Variables
private GestureDetector _gestureDetector;
private TextView _textView;

Step 9

Now, write the code, mentioned below from MainActivity.cs page.

MainActivity.cs

protected override void OnCreate(Bundle bundle) {
    base.OnCreate(bundle);
    // Set our view from the "main" layout resource
    SetContentView(Resource.Layout.Main);
    _textView = FindViewById < TextView > (Resource.Id.velocity_text_view);
    _textView.Text = "Fling Velocity: ";
    _gestureDetector = new GestureDetector(this);
}
public override bool OnTouchEvent(MotionEvent e) {
    _gestureDetector.OnTouchEvent(e);
    return false;
}
public bool OnDown(MotionEvent e) {
    return false;
}
public bool OnFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
    _textView.Text = String.Format("Fling velocity: {0} x {1}", velocityX, velocityY);
    return true;
}
public void OnLongPress(MotionEvent e) {}
public bool OnScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    return false;
}
public void OnShowPress(MotionEvent e) {}
public bool OnSingleTapUp(MotionEvent e) {
    return false;
}

Step 10

If you have Android Virtual device, run the app on it, else connect your Android phone and run the app on it.
Simply, connect your phone and go to Visual Studio. The connected phone will show up in the Run menu

(Ex:LENOVO A6020a40(Android 5.1-API 22)). Click the Run option.



Output

After a few seconds, the app will start running on your phone.

You will see your app run successfully.



Now, you can press any place on the screen. It will get the direction successfully.



Summary

This was the process of how to create a gesture listener in Xamarin Android app, using Visual Studio 2015.