Android UI

How To Create Frame Animation In Android Using XML Drawable

Create Android Frame Animation Using Drawable

Today animations are being a part of UI because it plays a very important role in making UI interactive. When it comes to show complex animations that cannot be created simply by basic view animations. And we know that GIF is a good solution for this but unfortunately it is not supported by android. But we have a good news that Android has a similar mechanism exactly like GIF i.e, Frame Animation.

Normally GIF animate by changing frames in a certain interval of time. The same applies here in Frame Animation also. This can be applied to a View. This solves our big problem. Now you don’t need to depend on any animation making tools or libraries the only thing you have to learn is how to create a frame animation. It is very simple and can be learnt with in a minute.

Here i will explain basics of Frame Animation with a simple example. I am pretty much sure that when you finish reading this article you will be confident making such an animation.

Create An Animation Drawable

Let’s name it Swing Animation. So create a drawable file, res/drawable/swing_animation.xml.

Here i have created 14 frames. All of them are image drawables. I named them as frame_1, frame_2, frame_3,.. so on.

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/selected" android:oneshot="false">

    <item android:drawable="@drawable/frame_1" android:duration="180" />
    <item android:drawable="@drawable/frame_2" android:duration="170" />
    <item android:drawable="@drawable/frame_3" android:duration="160" />
    <item android:drawable="@drawable/frame_4" android:duration="150" />
    <item android:drawable="@drawable/frame_5" android:duration="150" />
    <item android:drawable="@drawable/frame_6" android:duration="150" />
    <item android:drawable="@drawable/frame_7" android:duration="150" />
    <item android:drawable="@drawable/frame_9" android:duration="150" />
    <item android:drawable="@drawable/frame_10" android:duration="150" />
    <item android:drawable="@drawable/frame_11" android:duration="150" />
    <item android:drawable="@drawable/frame_12" android:duration="150" />
    <item android:drawable="@drawable/frame_13" android:duration="160" />
    <item android:drawable="@drawable/frame_14" android:duration="170" />
    <item android:drawable="@drawable/frame_15" android:duration="180" />

</animation-list>

The another important property is to notice is that android:duration it defines the time consumed by that particular frame.

For example, take the first line,

 <item android:drawable="@drawable/frame_1" android:duration="180" />

This is the first frame to show and this will be keep showing for 180 milliseconds. After 180 milliseconds the next frame will appear and completes the rest of the 13 frames and completes one round of Swing Animation.

Since we defined android:oneshot="false" to the animaiton-list so it will repeat the Swing Animation infinitely.

Activity Layout

Open the activity layout file res/layout/activity_animation.xml and add a empty ImageView. We are not adding the animation drawable here because we do it in the Activity class.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
android:background="@color/pageBackground" 
tools:context="frameanimation.devdeeds.com.frameanimation.AnimationActivity">

    <ImageView android:id="@+id/animationView" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" />
</RelativeLayout>

res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#303F9F</color>
    <color name="colorPrimaryDark">#283593</color>
    <color name="colorAccent">#7986CB</color>
    <color name="pageBackground">#396EA9</color>
</resources>

Start The Animation In Activity

Open your AnimationActivity class. The only thing you have to do here is to get the Animation Drawable and start the animation defined in it by calling the method start()

package frameanimation.devdeeds.com.frameanimation;

import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class AnimationActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);

        ImageView imageView = (ImageView) findViewById(R.id.animationView);
        imageView.setBackgroundResource(R.drawable.swing_animation);

        // Get the background, which has been compiled to an AnimationDrawable object.
        AnimationDrawable frameAnimation = (AnimationDrawable) imageView.getBackground();

        // Start the animation (looped playback by default).
        frameAnimation.start();
    }
}
About author

Geethu is a teacher by profession, but she likes to research new things and is also interested in writing. Devdeeds is her blog, where she writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

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