Animation translate both X and Y

This example show how to implement animation of translate on both X(horizontal) and Y(vertical) together.


Create XML files slide_down.xml and slide_down2.xml under the folder /res/anim/, show two approachs to define translate on X and Y.

slide_down.xml, One <Set> have two <translate>, for X and Y separately.

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:fromYDelta="0"
        android:toYDelta="100%p" />
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%p" />

</set>

slide_down2.xml, One <Set> have one <translate>, have X and Y together.

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%p"
        android:toYDelta="100%p" />
    
</set>

/res/layout/activity_main.xml, to have two LinearLayouts and ImageViews to contain the animation.

<LinearLayout 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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.androidslideanimation.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:background="#D0D0D0" >
        
        <LinearLayout
         android:layout_width="0dp"
         android:layout_weight="1"
         android:layout_height="fill_parent"
         android:orientation="vertical"
         android:background="#C0C0C0" >
         
            <ImageView
             android:id="@+id/imagea"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/ic_launcher"
             android:background="#A0A0A0" />
            
        </LinearLayout>
        
        <LinearLayout
         android:layout_width="0dp"
         android:layout_weight="2"
         android:layout_height="fill_parent"
         android:orientation="vertical"
         android:background="#B0B0B0" >
         
            <ImageView
             android:id="@+id/imageb"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/ic_launcher"
             android:background="#A0A0A0" />
            
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

MainActivity.java

package com.example.androidslideanimation;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity {

 ImageView imageA, imageB;
 Animation animationASlideDown, animationBSlideDown;

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

  imageA = (ImageView) findViewById(R.id.imagea);
  imageB = (ImageView) findViewById(R.id.imageb);

  animationASlideDown = AnimationUtils.loadAnimation(this,
    R.anim.slide_down);
  animationASlideDown.setDuration(3000);
  animationASlideDown.setAnimationListener(animationASlideDownListener);
  imageA.startAnimation(animationASlideDown);
  
  animationBSlideDown = AnimationUtils.loadAnimation(this,
    R.anim.slide_down2);
  animationBSlideDown.setDuration(3000);
  animationBSlideDown.setAnimationListener(animationBSlideDownListener);
  imageB.startAnimation(animationBSlideDown);

 }

 @Override
 protected void onPause() {
  // TODO Auto-generated method stub
  super.onPause();
  imageA.clearAnimation();
  imageB.clearAnimation();
 }
 
 AnimationListener animationASlideDownListener = new AnimationListener() {

  @Override
  public void onAnimationStart(Animation animation) {}

  @Override
  public void onAnimationEnd(Animation animation) {
   imageA.startAnimation(animationASlideDown);
  }

  @Override
  public void onAnimationRepeat(Animation animation) {}
 };
 
 AnimationListener animationBSlideDownListener = new AnimationListener() {

  @Override
  public void onAnimationStart(Animation animation) {}

  @Override
  public void onAnimationEnd(Animation animation) {
   imageB.startAnimation(animationBSlideDown);
  }

  @Override
  public void onAnimationRepeat(Animation animation) {}
 };

}

Download the files.