Creating A Frame Animation In Xamarin Android 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, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Frame Animation is called for animating the images in apps.

Prerequisites

• Visual Studio 2015 Update 3.

The steps, given below, need to be followed in order to create the frame animation in the Xamarin Android app, using Visual Studio 2015.

Step 1

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



Step 2

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

Next, go to the Solution Explorer and select Resource-->Layout-->double click to open main.axml page. 



Step 4

After opening the main.axml file, open the main page designer.  If you want to write the code, use Source panel, otherwise open Designer section.



Next, go to the Source panel and delete the code of default "hello world" button, followed by deleting the C# button from MainActivity.cs page.

Step 5

Now, go to the toolbox window and scroll down. You will see all the tools and controls. You need to drag and drop the ImageView.



Step 6

Now, go to the properties window. You need to edit the ImageView Id Value and src Value (EX: android:id="@+id/animated_android" android:src="@anim/animate_android" ).



Step 7

In this step, go to the Main.axml page Source Panel. Note down the ImageView Id value and source value.



Main.axml

<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/animated_android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@anim/animate_android" />
</LinearLayout>

Step 8

In this step, add the Images form your local system. Go to Solution Explorer-->Resource-->Drawable-->Right Click-->Add-->Exsisting Item (Shift+Alt+A).



Step 9

Now, you can choose the needed images. Then, click Add.



Step 10

In this step, add one folder named Anim.

Go to Solution Explorer-->Resource-->Right click-->Add-->New Folder.



Step 11

In this step, add one file called animate_android.xml.

Go to Solution Explorer-->Resource-->Anim-->Right Click-->Add-->New Item (Ctrl+shift+A).



Step 12

Now, select the XML file and give it a name as animate_android.xml and click Add.



Step 13

After creating the animate_android.xml file, write the following code.

animate_android.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/im1" android:duration="100" />
    <item android:drawable="@drawable/im2" android:duration="100" />
    <item android:drawable="@drawable/im3" android:duration="100" />
    <item android:drawable="@drawable/im4" android:duration="100" />
    <item android:drawable="@drawable/im5" android:duration="100" />
    <item android:drawable="@drawable/im6" android:duration="100" />
    <item android:drawable="@drawable/im7" android:duration="100" />
</animation-list>

Step 14

Next, go to the MainActivity.cs page and write the following two namespaces.

using Android.Graphics.Drawables;
using Android.Views.Animations;



Step 15

Now, go to the MainActivity.cs page. Create one method OnWindowFocusChanged() and write animation code.

MainActivity.cs

public override void OnWindowFocusChanged(bool hasFocus) {
    if (hasFocus) {
        ImageView imageView = FindViewById < ImageView > (Resource.Id.animated_android);
        AnimationDrawable animation = (AnimationDrawable) imageView.Drawable;
        animation.Start();
    }
}

Step 16

If you have Android Virtual device, run the app on it. Otherwise, connect your Android phone and run the app in that.

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 that the Frame Animation is working successfully.







Summary

So, this was the process of creating the Frame Animation in Xamarin Android app, using Visual Studio 2015.