Thursday, December 8, 2011

Animation Drawbles in Android

To show an animation in app like sailing ship or flying aeroplane with the help of static image frames you need to make a drawble like this:

/drawbles/loading_animation.xml


<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
id="selected"
android:oneshot="true"
android:animationOrder="reverse"
>
<item
android:drawable="@drawable/loading_1"
android:duration="80" />
<item
android:drawable="@drawable/loading_2"
android:duration="80" />
<item
android:drawable="@drawable/loading_3"
android:duration="80" />
<item
android:drawable="@drawable/loading_4"
android:duration="80" />
<item
android:drawable="@drawable/loading_5"
android:duration="80" />
<item
android:drawable="@drawable/loading_6"
android:duration="80" />
<item
android:drawable="@drawable/loading_7"
android:duration="80" />
<item
android:drawable="@drawable/loading_8"
android:duration="80" />
<item
android:drawable="@drawable/loading_9"
android:duration="80" />
<item
android:drawable="@drawable/loading_10"
android:duration="80" />
<item
android:drawable="@drawable/loading_11"
android:duration="80" />
<item
android:drawable="@drawable/loading_12"
android:duration="80" />
<item
android:drawable="@drawable/loading_13"
android:duration="80" />
<item
android:drawable="@drawable/loading_14"
android:duration="80" />
<item
android:drawable="@drawable/loading_15"
android:duration="80" />
</animation-list>


Then in the layout.xml, define your image view like this:


<ImageView android:layout_below="@id/image1"
android:layout_centerHorizontal="true" android:layout_marginTop="20dp"
android:id="@+id/ivLoading" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="@drawable/loading_animation" />

Then in the Activity file:

AnimationDrawable loadingAnimation;
loadingAnimation = (AnimationDrawable) ivLoading.getBackground(); // ivLoading is the imageView created in layout.xml
Now start the animation by:
loadingAnimation.start();