Frame Animation

PDF for offline use
Sample Code:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

This tutorial will show how to create a Frame Animation.

Recipe

  1. Create a new Xamarin.Android project named FrameAnimation.

  2. Copy the images to be animated into the Resource/Drawable directory. In the Properties window, each image should have its build action set to AndroidResource.

  3. Create an new resource file Resource/Anim/animate_android.xml to hold the animation list:

<?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/android_1"
        android:duration="100" />
  <item android:drawable="@drawable/android_2"
        android:duration="100" />
  <item android:drawable="@drawable/android_3"
        android:duration="100" />
  <item android:drawable="@drawable/android_4"
        android:duration="100" />
  <item android:drawable="@drawable/android_5"
        android:duration="100" />
  <item android:drawable="@drawable/android_6"
        android:duration="100" />
  <item android:drawable="@drawable/android_7"
        android:duration="100" />
</animation-list>

The animation-list creates a list of images that are on Resources/Drawable that will be cycled through in the ImageView to cycle through as part of the animation.

  1. Open the file Resources/Layout/Main.axml and change the layout such that it has a single ImageView:
<?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/animated_android"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@anim/animate_android"
  />
</LinearLayout>
  1. Open MainActivity.cs, and insert the following code for the OnCreate() method:
protected override void OnCreate(Bundle bundle){
base.OnCreate(bundle);
  SetContentView(Resource.Layout.Main);
}
  1. Now override the method OnWindowFocusChanged() in MainActivity.cs:
public override void OnWindowFocusChanged(bool hasFocus)
{
    if (hasFocus)
    {
        ImageView imageView = FindViewById<ImageView>(Resource.Anim.animated_android);
        AnimationDrawable animation = (AnimationDrawable) imageView.Drawable;
        animation.Start();
    }
}

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_android.xml. Notice that the animation is not started in OnCreate(), but in OnWindowFocusChanged(). This is because the AnimationDrawable has not been fully attached to the window. By starting the animation in OnWindowFocusChanged() the animation will start without any interaction when Android brings the window into focus.

  1. Run the application. You should see the word Android being animated similar to the following screen shots:

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.