how to create sequential animation using AnimationDrawable and animation-list

Question

I'm attempting to create a sequential loading animation that display's 5 dots which turn black one after another in order to display a loading animation. I've built the animation - but thus far - only one dot turns black - my attempt to turn the 2nd black does not seem to be working (once I figure out how to animate it I will apply the method to the remaining 3 dots - just so you know where the code sits as of now - I've only attempted to animate the 2nd dot at this point but it isn't working - the first dot blinks as it should - then nothing happens to the other 4 dots in the animation)

-Amani Swann

SRC SNIPPET:

try {
        // updating layout initially has updating text with 1 dot in the xml
        setContentView(R.layout.updating);
        // This image view has the updating text to be progressively updated
        // with dots addition
        ImageView loading = (ImageView) findViewById(R.id.loading_empty1);
        //Button goButton = (Button) findViewById(R.id.loading_empty);
        // Set updating button to drawable animation
        loading.setBackgroundResource(R.drawable.updating1);
        loadingAnimation = (AnimationDrawable) loading.getBackground();


        ImageView loading2 = (ImageView) findViewById(R.id.loading_empty2);
        //Button goButton = (Button) findViewById(R.id.loading_empty);
        // Set updating button to drawable animation
        loading2.setBackgroundResource(R.drawable.updating2);
        loadingAnimation = (AnimationDrawable) loading2.getBackground();

ANIMATION XML SNIPPET #1:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"    
    android:oneshot="false">    
    <item android:drawable="@drawable/loading_empty" android:duration="500" />    
    <item android:drawable="@drawable/loading_full" android:duration="500" />    
</animation-list>

ANIMATION XML SNIPPET #2:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"    
    android:oneshot="false">    
    <item android:drawable="@drawable/loading_empty" android:duration="500" />    
    <item android:drawable="@drawable/loading_full" android:duration="500" />    
</animation-list>

LAYOUT XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/updating_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:text="@string/updating_text"
        android:textColor="#000000"
        android:textSize="14sp" />

    <ImageView
        android:id="@+id/loading_empty1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:layout_toLeftOf="@+id/loading_empty2"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="15dp"
        android:background="@drawable/updating1"
        android:src="@drawable/loading_empty" />

    <ImageView
        android:id="@+id/loading_empty3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/loading_empty2"
        android:layout_centerHorizontal="true"
        android:background="@drawable/updating3"
        android:layout_marginRight="15dp"
        android:src="@drawable/loading_empty" />

    <ImageView
        android:id="@+id/loading_empty2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/loading_empty1"
        android:layout_toLeftOf="@+id/loading_empty3"
        android:background="@drawable/updating2"
        android:layout_marginRight="15dp"
        android:src="@drawable/loading_empty" />

    <ImageView
        android:id="@+id/loading_empty4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/loading_empty3"
        android:layout_toRightOf="@+id/loading_empty3"
        android:background="@drawable/updating4"
        android:layout_marginRight="15dp"
        android:src="@drawable/loading_empty" />

    <ImageView
        android:id="@+id/loading_empty5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/loading_empty4"
        android:layout_toRightOf="@+id/loading_empty4"
        android:background="@drawable/updating5"
        android:src="@drawable/loading_empty" />

</RelativeLayout>

Answer 1

this can be done using a single ImageView, animation-list and AnimationDrawable class of Android.

• Copying your five images in drawable folder.
• Create XML file in your drawable folder of animation-list.
• List all five images in this xml file.
• Set the duration of animation of each Image in xml file.
• Set your xml file as an image resource in your ImageView.
• Use getDrawable() to get each image from xml.
• Start the animation.

for instance, suppose you have created five images of dots with names dot01.png, dot02.png, dot03.png, dot04.png, dot05..png then your xml file in drawable folder should be,

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true" >

    <item
        android:drawable="@drawable/dot01"
        android:duration="150"/>
    <item
        android:drawable="@drawable/dot02"
        android:duration="150"/>
    <item
        android:drawable="@drawable/dot03"
        android:duration="150"/>
    <item
        android:drawable="@drawable/dot04"
        android:duration="150"/>        
    <item
        android:drawable="@drawable/dot05"
        android:duration="150"/>


    <!-- Reset to original -->
    <item
        android:drawable="@drawable/dot01"
        android:duration="10"/>

</animation-list>

Now set that xml as image resource in an ImageView and start the animation from start() method of AnimationDrawable instance,

ImageView DotAnimImage = (ImageView) findViewById(R.id.imageView1);
// dots_animation below is the name of your xml file.
DotAnimImage.setImageResource(R.drawable.dots_animation);
// Now create a reference to getDrawable
AnimationDrawable dotsAnimation = (AnimationDrawable) DotAnimImage.getDrawable();
// Start animation
dotsAnimation.start();

the above code would work but it will animate the image just once , this is because of a bug in android, android thinks that the animation is still running even when its already over. The solution is to check if the animation is running using isRunning() method of AndroidDrawable instance and manually stopping it using stop() method,

//Check if animation is running and stop it,
if (dotsAnimation.isRunning()) {
    dotsAnimation.stop();
    // start again,
    dotsAnimation.start();
}

Your final code should be,

ImageView DotAnimImage = (ImageView) findViewById(R.id.imageView1);
DotAnimImage.setImageResource(R.drawable.dots_animation);
AnimationDrawable dotsAnimation = (AnimationDrawable) DotAnimImage.getDrawable();

if (dotsAnimation.isRunning()) {
    dotsAnimation.stop();
}

dotsAnimation.start();

Answer 2

Why didn't you use animation list for this? 4 dots as 1 image and each item in animation list as one frame in animation?

Like this http://android-er.blogspot.com/2012/01/create-frame-animation-with.html