Creating A Touch Event In Xamarin Android App Using Visual Studio 2015

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. Touch event is called to detect and respond to a touch event. The user can touch a button on the screen and then slide it left or right.

Prerequisites

  • Visual Studio 2015 Update 3.

The steps, mentioned below, are required to be followed in order to create a Touch event in the 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 clicking (Ctrl+Shift+N).

Xamarin

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.

Xamarin

Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project.

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

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

Xamarin

Step 4

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

Xamarin

Now, delete the Default hello world button. Go to the source panel, where you can see the button coding. You need to delete it.

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

Go to the 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 button.

Xamarin

Step 6

Now, go to the properties Window. You need to edit the button's Id value and text value.

(EX:android:id="@+id/myView" android:text="Move").

Xamarin

Step 7

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

Main.axml
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:minWidth="25px" android:minHeight="25px">  
  2.     <Button android:text="Move" android:padding="6dip" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/myView" />  
  3. </LinearLayout>  
Xamarin

Step 8

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

MainActivity.cs
  1. public class MainActivity: Activity, View.IOnTouchListener  
  2.     //variables  
  3. private Button _myButton;  
  4. private float _viewX;  
Xamarin

Step 9

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

MainActivity.cs
  1. protected override void OnCreate(Bundle bundle) {  
  2.     base.OnCreate(bundle);  
  3.     // Set our view from the "main" layout resource  
  4.     SetContentView(Resource.Layout.Main);  
  5.     _myButton = FindViewById < Button > (Resource.Id.myView);  
  6.     _myButton.SetOnTouchListener(this);  
  7. }  
  8. public bool OnTouch(View v, MotionEvent e) {  
  9.     switch (e.Action) {  
  10.         case MotionEventActions.Down:  
  11.             _viewX = e.GetX();  
  12.             break;  
  13.         case MotionEventActions.Move:  
  14.             var left = (int)(e.RawX - _viewX);  
  15.             var right = (left + v.Width);  
  16.             v.Layout(left, v.Top, right, v.Bottom);  
  17.             break;  
  18.     }  
  19.     return true;  
  20. }  
Xamarin

Step 10

If you have an 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.

Xamarin

Output

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

You will see you app is running successfully. Now, you can slide the button left or right and it will work successfully.

Xamarin

Xamarin

Xamarin

Summary

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


Similar Articles