Create Drawable Animation In Xamarin With Visual Studio 2015

Introduction

In my previous article on “Animated Splash screen”, I explained how three types of animation can be created in Android and gave an example of View Animation. In this article, I will discuss how we can do Drawable animation in Xamarin Android using Visual Studio 2015.

Following are the steps for how to create Drawable Animation in Xamarin.

Step 1 Create new Project for Android Application

 

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

Step 2 Adding Images in Project

In this article, I have taken 9 images. Each image contains a character of string “Xamarin”. I will display characters one by one in ImageView. We need to add images under Resource->drawable folder as shown in below image.

 

Step 3 Create XML file for Drawable Animation

We need to create “Anim” folder under Resource folder and then add new XML file under “Anim” folder. Here, I have created an “animate_xamarin.xml” file for drawable animation. In this file, we need to add images in <animation-list> tag. Here I have used android:oneshot attribute set to false. If we give value as true to said attribute then it will run only one time. I want to start animation when the user clicks on ImageView and if animation is running then animation will stop. I have take ImageView in Main.xml. Code snippet of Main.axml and animate_xamarin.xml is as follows:

Main.axml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/animate_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@anim/animate_xamarin"
        android:background="@android:color/white" />
</LinearLayout>

animate_xamarin.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
  <item android:drawable="@drawable/xamarin_0"
        android:duration="200"  />
  <item android:drawable="@drawable/xamarin_1"
        android:duration="200"  />
  <item android:drawable="@drawable/xamarin_2"
        android:duration="200"  />
  <item android:drawable="@drawable/xamarin_3"
        android:duration="200"  />
  <item android:drawable="@drawable/xamarin_4"
        android:duration="200" />
  <item android:drawable="@drawable/xamarin_5"
        android:duration="200" />
  <item android:drawable="@drawable/xamarin_6"
        android:duration="200" />
  <item android:drawable="@drawable/xamarin_7"
        android:duration="200" />
  <item android:drawable="@drawable/xamarin_8"
        android:duration="200"  />
</animation-list>

In the above, “animate_xamarin.xml” consists of  android:duration tag to set animation duration.

Step 4 Apply Animation in MainActivity.cs

The AnimationDrawable class is the basis for loading drawable resources one after another to create an animation. The drawable resources will be loaded one after another, according to the instructions in the resource file Resource/Anim/animate_xamarin.xml.

This animations are applied to ImageView in MainActivity class using AnimationDrawable base class. When user clicks on ImageView, animation will start and when user again clicks on ImageView, the animation will stop using Start() and Stop() method. Code snippet of MainActivity.cs as shown below:

MainActivity.cs

public class MainActivity : Activity
{
        ImageView imageView;
        AnimationDrawable animation;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);
            imageView = FindViewById<ImageView>(Resource.Id.animate_imageview);
            animation = (AnimationDrawable)imageView.Drawable;
            imageView.Clickable = true;
            imageView.Click+= ImageView_Click;
        }

        private void ImageView_Click(object sender, System.EventArgs e)
        {
            if(!animation.IsRunning)
            {
                animation.Start();
            }
            else
            {
                animation.Stop();
            }
        }
}

Output

 

Summary

In this article, we learned how to create Frame or Drawable Animation in Xamarin with Visual Studio 2015.