Exploring Gesture Detection With An Animation In Xamarin With Visual Studio 2015

Introduction

In this article, I will explain how we can recognize simple touch gestures in an an Android application with view animation.

Following are the steps on how to detect touch gesture and an animation in Xamarin.

Step 1

Create a new project for an Android Application

 

 

I have selected “Blank App(Android)” template for this article.

Step 2

Add simple GestureDetectorListener class in MainActivity

For touch detection, OnTouchEvent override method is used. In this article, I am doing simple gesture detection. For this, GestureDetector is a base class entry point to detect any gestures without having to deal directly with the touch events. Here, I am using IOnGestureListener event of GestureDetector class. There is also a ScaleGestureDetector class for scaling the specific events such as pinch to zoom. I will cover ScaleGestureDetector example in the next article.

In this article, I am detecting fling gesture to remove image from the screen. For that first we need to initialize GestureDetector class with Listener, pass touch event to the detector. GestureDetector class has six methods as follows: 

Method	Description
OnDown( )	When the user is doing down motion tap on the screen, this event will be triggered.
OnFling( )	When the user flings motion tap on the screen, this event will be triggered.
OnLongPress( )	When the user taps on the screen for long time, this event will be triggered.
OnScroll( )	When the user scrolls tap on the screen, this event will be triggered.
OnShowPress( )	When the user taps on the screen, this event will be triggered.
OnSingleTap( )	When the user does single tap on the screen, this event will be triggered.

Step 3

Add an animation in MainActivity class

When the user flings on the screen OnFling() method call, I have used ScaleAnimation, TranslateAnimation and alphaanimation to remove animated images from the screen. The code snippet of “Main” Android XML and MainActivity class is shown below.

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@android:color/white">
    <ImageView
        android:src="@drawable/image1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/imageView1" />
</LinearLayout>

I have added one image in Resource->drawable folder and set an image in ImageView, as shown in the code above. The screenshot of the final layout is shown below.

 

MainActivit.cs

public class MainActivity : Activity, GestureDetector.IOnGestureListener
{
        private GestureDetector myGestureDetection;
        private ImageView imageview;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            imageview = FindViewById<ImageView>(Resource.Id.imageView1);
            myGestureDetection = new GestureDetector(this);
        }
        public bool OnDown(MotionEvent e)
        {
            return false;
        }
        public bool OnFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
        {
                var alpha = new AlphaAnimation(1.0f, 0.0f);
                var translate = new TranslateAnimation(0.0f, (float)WindowManager.DefaultDisplay.Width, 0.0f, 0.0f);
                var set = new AnimationSet(shareInterpolator: true);
                var scaleAnimation = new ScaleAnimation(1, 0.7f, 1, 0.7f, Dimension.RelativeToSelf, 0.5f, Dimension.RelativeToSelf, 0.5f);
                set.AddAnimation(alpha);
                set.AddAnimation(translate);
                set.AddAnimation(scaleAnimation);
                set.Duration = 2000;
                scaleAnimation.RepeatCount = 1;
                scaleAnimation.RepeatMode = RepeatMode.Reverse;
                imageview.StartAnimation(set);
                return true;
        }
        public void OnLongPress(MotionEvent e)
        {
            Toast.MakeText(this, "This is OnLongPress Method", ToastLength.Short).Show();
        }
        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;
        }
        public override bool OnTouchEvent(MotionEvent e)
        {
            myGestureDetection.OnTouchEvent(e);
            return false;
        }
}

In the code given above, I have added three types of animation (alpha, scale and translate) in one property, using AnimationSet, duration to 2000 ms, repeate count to 1.

Output

Summary

In this article, we learned how to detect touch gestures with an animation in Xamarin with Visual Studio 2015.