How To Create Animation Using ViewAnimator In Xamarin With Visual Studio 2015

Introduction

In Android application development, sometimes we need to use framing or sliding type effects or an animation when the user clicks on “Next” button or “Previous” button. This can be done by “ViewAnimator” component. In this article, I will show how we can use ViewAnimator in Xamarin with Visual Studio 2015. ViewAnimator is mainly used to animate the views on the screen. It switches smoothly between two or more views and thus provides a way of transitioning from one view to another through the appropriate animations.

The steps are given below to create ViewAnimator.

Step 1

Create new project for an Android Application

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

Step 2

Application layout

I have used one Android layout to create ViewAnimator. It is “main.axml” layout, which contents ViewAnimator and two buttons are “Next” and “Previous”. AXML code of layout is shown below.

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<ViewAnimator
android:id="@+id/ViewAnimator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/linearLayout1"
android:gravity="center"
android:minWidth="25px"
android:minHeight="25px">
<Button
android:id="@+id/btnNext"
android:background="#055"
android:text="NEXT"
android:textColor="#fff"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<Button
android:id="@+id/btnPrevious"
android:background="#055"
android:text="Previous"
android:textColor="#fff"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_marginLeft="150dp"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>

Screenshot of the layout

I have taken 5 images here to show the sliding effect when the user clicks on “Next” or “Previous” button. Thus, I have added 5 image files in Resource->drawable folder. It is shown below.

Step 3

Implementation of ViewAnimator in MainActivity

Now, we need to use layout given above in MainActivity.cs file. I have taken layout given above as Main layout, using SetContentView() method. For smooth switches between two or more views, ViewAnimator have base methods, which I have used below to describe.

This method does the opposite of SetInAnimation() method. This method first removes an old view, using an animation and then place a new view by SetInAnimation() method.

Method	Use
AddView()	As described before, ViewAnimator has two or more views to show. For it, this method is used to add views in ViewAnimator.
SetInAnimation()	This method is used to set an animation of view transition.
SetOutAnimation()	This method does opposite to SetInAnimation() method. This method first removes an old view, using an animation and then place new view by SetInAnimation() method.
ShowNext()	This method is used to show next view in ViewAnimator.
ShowPrevious()	This method is used to show previous view in ViewAnimator.
SetAnimateFirstView()	This method is used to indicate the current view, which should animated the first time; when displayed in ViewAnimator by setting true or false value. Here, we set it as true, so it will be animated first time; when view is displayed in ViewAnimator.
RemoveView()	This method is used to remove any view from ViewAnimator.

There are many methods in ViewAnimator. Here, I have described some of them.

MainActivity.cs

public class MainActivity : Activity
{
private ViewAnimator firstViewAnimator;
Button btnNext,btnback;
int[] images = {
Resource.Drawable.image1,
Resource.Drawable.image2,
Resource.Drawable.image3,
Resource.Drawable.image4,
Resource.Drawable.image5
};
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
btnNext = (Button)FindViewById(Resource.Id.btnNext);
btnback = (Button)FindViewById(Resource.Id.btnPrevious);
firstViewAnimator = (ViewAnimator)FindViewById(Resource.Id.ViewAnimator);
for (int i = 0; i < images.Length; i++)
{
ImageView imageView = new ImageView(this);
imageView.SetImageResource(images[i]);
firstViewAnimator.AddView(imageView);
}
firstViewAnimator.SetAnimateFirstView(true);
btnNext.Click += BtnNext_Click;
btnback.Click += Btnback_Click;
}
private void Btnback_Click(object sender, System.EventArgs e)
{
firstViewAnimator.SetOutAnimation(this, Android.Resource.Animation.SlideOutRight);
firstViewAnimator.SetInAnimation(this, Android.Resource.Animation.SlideInLeft);
firstViewAnimator.ShowPrevious();
}
private void BtnNext_Click(object sender, System.EventArgs e)
{
firstViewAnimator.SetInAnimation(this, Android.Resource.Animation.SlideInLeft);
firstViewAnimator.SetOutAnimation(this, Android.Resource.Animation.SlideOutRight);
firstViewAnimator.ShowNext();
}
}

Here, I have taken 5 images as view and it is set by view in ViewAnimator object, using AddView() method. When the user clicks on “Next” button, the animation effect is set as view in from left and out in right side. It is opposite in nature, when the user clicks Previous button.

Output

Summary

In this article, we learned how to create an animation, using ViewAnimator. Methods of ViewAnimator and set animation effects are done , using ViewAnimator in Xamarin with Visual Studio 2015.