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!