Sequential and Combination Tween Animation use XML

In previous post we use tag rotate to shake ImageView (you can replace with any UI element like TextView, Button etc) and now try to use sequential and combination of xml animation tag : scale, translate, alpha . You can use scale to zoom in or zoom out, translate to move and alpha to fade in or fade out. 

• Make new android project name it as you want to. 
• Create a new folder named anim in res directory and then create four new xml file under anim folder : move1.xml, move2.xml, move3.xml, move4.xml. Each xml file to animate each image below.
• Put these four images (or you can use yours with size 50x60px each) in drawable-mdpi folder.     

Its base on 320x480px screensize rasio for other ratio may need some adjustment related with position attributes like android:fromXDelta and android:toXDelta.

Set four imageview in activity_main.xml and place each of them at each corner of the screen. In tween animation xml files (move1.xml, move2.xml, move3.xml, move4.xml) we define a combination animation elements (scale,translate,alpha) in sequence. Almost all attribute in these elements are self-explain except pivotX=”50%” and pivotY=”50%” in scale mean that it will zoomed base on 50% relative to itself, if 50 (without %) mean relative to parent. Attribute startOffset mean time delay in ms before animation start, this attribute is the most important in sequential animation. Each tween animation file will animate each imageview. In MainActivity.java just inflate all imageview and set image resource with each drawable image above. Load animation use AnimationUtils.loadAnimation and set background resource of imageview with animation xml files. Then set onClickListener for one of imageview and inside onClick callback methode start animation use startAnimation.

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


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">

    <ImageView
        android:id="@+id/comboimg1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" 
        android:layout_alignParentTop="true"/>
    
    
    <ImageView
        android:id="@+id/comboimg2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" 
        android:layout_alignParentTop="true"/>
    
   
    <ImageView
        android:id="@+id/comboimg3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" 
        android:layout_alignParentBottom="true"/>

    <ImageView
        android:id="@+id/comboimg4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" 
        android:layout_alignParentBottom="true"/>
    
</RelativeLayout>

move1.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    
    <scale
        android:duration="500"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="4"
        android:toYScale="4" 
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
        
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="160"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="210"
        android:startOffset="500"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="120"
        android:startOffset="1500"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100"
        android:startOffset="2000"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="-120"
        android:startOffset="2500"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="3500"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:interpolator="@android:anim/decelerate_interpolator"/>
     
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="120"
        android:startOffset="3500"
        android:interpolator="@android:anim/linear_interpolator" />
          
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-120"
        android:startOffset="4500"
        android:interpolator="@android:anim/linear_interpolator" />
     
   
</set>

move2.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    
    <scale
        android:duration="500"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="4"
        android:toYScale="4" 
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-210"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="210"
        android:startOffset="500"
        android:interpolator="@android:anim/linear_interpolator" />
     
      <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="50"
        android:startOffset="2000"
        android:interpolator="@android:anim/linear_interpolator" />
      
      <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="4000"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:interpolator="@android:anim/decelerate_interpolator"/>
     
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="120"
        android:startOffset="4000"
        android:interpolator="@android:anim/linear_interpolator" />
          
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-120"
        android:startOffset="5000"
        android:interpolator="@android:anim/linear_interpolator" />

</set>

move3.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    
    <scale
        android:duration="500"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="4"
        android:toYScale="4" 
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="210"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="-185"
        android:startOffset="500"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-50"
        android:startOffset="2000"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="4500"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:interpolator="@android:anim/decelerate_interpolator"/>
     
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="120"
        android:startOffset="4500"
        android:interpolator="@android:anim/linear_interpolator" />
          
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-120"
        android:startOffset="5500"
        android:interpolator="@android:anim/linear_interpolator" />

</set>

move4.xml>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    
    <scale
        android:duration="500"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="4"
        android:toYScale="4" 
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
    
     <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-160"
        android:startOffset="0"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="-185"
        android:startOffset="500"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="-120"
        android:startOffset="1500"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100"
        android:startOffset="2000"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="120"
        android:startOffset="2500"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="5000"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:interpolator="@android:anim/decelerate_interpolator"/>
     
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="120"
        android:startOffset="5000"
        android:interpolator="@android:anim/linear_interpolator" />
     
     <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-120"
        android:startOffset="6000"
        android:interpolator="@android:anim/linear_interpolator" />

</set>

MainActivity.java

package com.example.animcombo;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity
{
	ImageView comboimg1,comboimg2,comboimg3,comboimg4;
	Animation animcombo1,animcombo2,animcombo3,animcombo4;
		
	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		animcombo1 = AnimationUtils.loadAnimation(this,R.anim.move1);
		animcombo2 = AnimationUtils.loadAnimation(this,R.anim.move2);
		animcombo3 = AnimationUtils.loadAnimation(this,R.anim.move3);
		animcombo4 = AnimationUtils.loadAnimation(this,R.anim.move4);
		
		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);
				comboimg2.startAnimation(animcombo2);
				comboimg3.startAnimation(animcombo3);
				comboimg4.startAnimation(animcombo4);
                        }
                });
	}
}