Xamarin.Android – drawable animations

Android provides a very rich and diverse framework for supporting 2D graphics and animations.
Drawable animations are the simplest frame-by-frame animations. Android loads and displays drawable resources in specific sequence defined in XML file.
The key for good drawable animation is well prepared resources.

Today I want to present you how to create coin animation, which is mostly used in games.

For this purpose I prepared some drawable resources and placed them in Resources/drawable directory.

 

If you have your own pictures create an XML file in Resources/drawable directory. There will be definition of your animation.

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/goldCoin1" android:duration="100" />
  <item android:drawable="@drawable/goldCoin2" android:duration="100" />
  <item android:drawable="@drawable/goldCoin3" android:duration="100" />
  <item android:drawable="@drawable/goldCoin4" android:duration="100" />
  <item android:drawable="@drawable/goldCoin5" android:duration="100" />
  <item android:drawable="@drawable/goldCoin6" android:duration="100" />
  <item android:drawable="@drawable/goldCoin7" android:duration="100" />
  <item android:drawable="@drawable/goldCoin8" android:duration="100" />
  <item android:drawable="@drawable/goldCoin9" android:duration="100" />
  <item android:drawable="@drawable/goldCoin10" android:duration="100" />
  <item android:drawable="@drawable/goldCoin11" android:duration="100" />
</animation-list>

As you can see root element is animation-list and each frame of animation is defined in item element. My animation consists of eleven frames.
Next create your view. I wanted to have possibility to stop and start animation so I added buttons.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:orientation="vertical" 
 android:layout_width="match_parent" a
 ndroid:layout_height="match_parent">
    <ImageView 
     android:id="@+id/animationView" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_gravity="center_horizontal" />
    <LinearLayout 
     android:orientation="horizontal" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent">
        <Button 
         android:id="@+id/startButton" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:text="Start" 
         android:layout_weight="1" />
        <Button 
         android:id="@+id/stopButton" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:text="Stop" a
         android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

The last step is to clip created animation definition with ImageView.

  [Activity(Label = "RadekAnimations", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        private ImageView animationsView;

        private Button startButton;

        private Button stopButton;

        private AnimationDrawable animation;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            RequestWindowFeature(WindowFeatures.NoTitle);
            SetContentView (Resource.Layout.Main);

            animationsView = FindViewById<ImageView>(Resource.Id.animationView);
            startButton = FindViewById<Button>(Resource.Id.startButton);
            stopButton = FindViewById<Button>(Resource.Id.stopButton);

            animation = (AnimationDrawable)GetDrawable(Resource.Drawable.coin_animation);
            animationsView.SetImageDrawable(animation);

            startButton.Click += (sender, args) =>
            {
                animation.Start();
            };

            stopButton.Click += (sender, args) =>
            {
                animation.Stop();
            };
        }
    }

And here is the result. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *