Implement AnimationListener in XML Animation

Now we will try implement AnimationListener to animate ImageView. we will use two of three AnimationListener ie. onAnimationStart to listen when an animation start and onAnimationEnd to listen when an animation end. Still use four images from previous post. Each image will shake and blink one after another, use onAnimationEnd to listen the end of each animation and then start another image animation and use onAnimationStart to display text in textview to show what animation is running now.

Create 2 xml file under anim folder : rotate.xml, blink.xml, like codes below, all attribute is self-explain. Set one textview to display what animation running now, place it in the midle of parent and four imageview as view object to be animated, place them below textview.

In MainActivity class because we want to use animation listener we have to implements animationListener. Inside onCreate methode inflate all imageview and textview, set image resource for imageview with each drawable image. Load animation use AnimationUtils. Then set onClickListener for one of imageview (comboimg1) and inside onClick callback methode start animation for comboimg1 use startAnimation, this comboimg1 animation will start first followed by comboimg2 etc. Don’t forget to setAnimationListener for each animation (animcombo1,animcombo2).

To use animation listener override onAnimationEnd, inside this methode use endcounter to count every end of animation and base on that it will listen end of comboimg1 animation and then remove it (setAnimation(null)) and start comboimg2 animation and so on. Meanwhile override onAnimationStart to listen each animation start and then display it what happening on textview.

This project need android API 8 or above and already tested with emulator.


rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    
     <rotate
        android:duration="100"
        android:fromDegrees="-30"
        android:toDegrees="30"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:interpolator="@android:anim/cycle_interpolator" />
     
</set>

blink.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    
    <alpha
        android:duration="100"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:startOffset="0"
        android:repeatCount="6"
        android:repeatMode="reverse"
        android:interpolator="@android:anim/accelerate_interpolator"/>

</set>

activity_main.xml 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff000000">
		
    <TextView
        android:id="@+id/text1"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_centerInParent="true" 
        android:textSize="20sp"/>
	
    <ImageView
        android:id="@+id/comboimg1"
        android:visibility="visible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1" 
        android:layout_marginLeft="60dp"/>
    
    <ImageView
        android:id="@+id/comboimg2"
        android:visibility="visible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1" 
        android:layout_toRightOf="@id/comboimg1"/>
    
    <ImageView
        android:id="@+id/comboimg3"
        android:visibility="visible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1" 
        android:layout_toRightOf="@id/comboimg2"/>

    <ImageView
        android:id="@+id/comboimg4"
        android:visibility="visible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1" 
        android:layout_toRightOf="@id/comboimg3"/>
    
</RelativeLayout>

MainActivity.java

package com.example.animcombo;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity implements AnimationListener
{
	private TextView text1;
	private ImageView comboimg1,comboimg2,comboimg3,comboimg4;
	private Animation animcombo1,animcombo2;
	private int startcount, endcount;
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		text1 = (TextView) findViewById(R.id.text1);
		text1.setTextColor(Color.YELLOW);
		
		animcombo1 = AnimationUtils.loadAnimation(this,R.anim.rotate);
		animcombo2 = AnimationUtils.loadAnimation(this,R.anim.blink);
		
		animcombo1.setAnimationListener(this);
		animcombo2.setAnimationListener(this);
		
		comboimg1 = (ImageView) findViewById(R.id.comboimg1);
		comboimg1.setImageResource(R.drawable.hurufh);
		comboimg2 = (ImageView) findViewById(R.id.comboimg2);
		comboimg2.setImageResource(R.drawable.hurufe);
		comboimg3 = (ImageView) findViewById(R.id.comboimg3);
		comboimg3.setImageResource(R.drawable.hurufl);
		comboimg4 = (ImageView) findViewById(R.id.comboimg4);
		comboimg4.setImageResource(R.drawable.hurufo);
		
		comboimg1.setOnClickListener(new View.OnClickListener() 
		{
			@Override
                        public void onClick(View v) 
                        {
		              comboimg1.startAnimation(animcombo1);
	                }
                });
		
	}

	@Override
	public void onAnimationEnd(Animation animend) 
	{
		endcount+=1;
		if(animend==animcombo1 & endcount==1)
		{
			comboimg1.setAnimation(null);
			comboimg2.startAnimation(animcombo1);
		}
		else if(animend==animcombo1 & endcount==3)
		{
			comboimg2.setAnimation(null);
			comboimg3.startAnimation(animcombo1);
		}
		else if(animend==animcombo1 & endcount==5)
		{
			comboimg3.setAnimation(null);
			comboimg4.startAnimation(animcombo1);
		}
		else if(animend==animcombo1 & endcount==7)
		{
			comboimg4.setAnimation(null);
			comboimg1.startAnimation(animcombo2);
		}
		else if(animend==animcombo2 & endcount==8)
		{
			comboimg1.setAnimation(null);
			comboimg2.startAnimation(animcombo2);
		}
		else if(animend==animcombo2 & endcount==10)
		{
			comboimg2.setAnimation(null);
			comboimg3.startAnimation(animcombo2);
		}
		else if(animend==animcombo2 & endcount==12)
		{
			comboimg3.setAnimation(null);
			comboimg4.startAnimation(animcombo2);
		}
		else if(endcount==14){endcount=0;}
		
	}

	@Override
	public void onAnimationRepeat(Animation arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onAnimationStart(Animation animstart) 
	{
		startcount+=1;
		if(animstart==animcombo1 & startcount==1)
                {
                      text1.setText("H is shaking");
                }
		else if(animstart==animcombo1 & startcount==2)
                {
                      text1.setText("E is shaking");
                }
		else if(animstart==animcombo1 & startcount==3)
                {
                      text1.setText("L is shaking");
                }
		else if(animstart==animcombo1 & startcount==4)
                {
                      text1.setText("O is shaking");
                }
		else if(animstart==animcombo2 & startcount==5)
                {
                      text1.setText("H is blinking");
                }
		else if(animstart==animcombo2 & startcount==6)
                {
                      text1.setText("E is blinking");
                }
		else if(animstart==animcombo2 & startcount==7)
                {
                      text1.setText("L is blinking");
                }
		else if(animstart==animcombo2 & startcount==8)
		{
			text1.setText("O is blinking");
			startcount=0;
		}
	}
}