Animation of sliding horizontal and vertical

I have a old example of "Implement slide-in and slide-out animation", slide horizontally using Android provided android.R.anim.slide_in_left and android.R.anim.slide_out_right. It's modified to implement vertical slide down animation.



Create /res/anim/slide_down.xml to define our vertical animation.

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

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

</set>

/res/layout/activity_main.xml, to add extra ImageView.

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

    <ImageView
        android:id="@+id/image1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:visibility="invisible" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:background="#D0D0D0" >

        <ImageView
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"
            android:background="#B0B0B0" />

    </LinearLayout>

</LinearLayout>

MainActivity.java

package com.example.androidslideanimation;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
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 image1, image2, image3;
 Animation animationSlideInLeft, animationSlideOutRight;
 ImageView curSlidingImage;
 
 ImageView image4;
 Animation animationSlideDown;

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

  image1 = (ImageView) findViewById(R.id.image1);
  image2 = (ImageView) findViewById(R.id.image2);
  image3 = (ImageView) findViewById(R.id.image3);

  animationSlideInLeft = AnimationUtils.loadAnimation(this,
    android.R.anim.slide_in_left);
  animationSlideOutRight = AnimationUtils.loadAnimation(this,
    android.R.anim.slide_out_right);
  animationSlideInLeft.setDuration(1000);
  animationSlideOutRight.setDuration(1000);
  animationSlideInLeft.setAnimationListener(animationSlideInLeftListener);
  animationSlideOutRight
    .setAnimationListener(animationSlideOutRightListener);

  curSlidingImage = image1;
  image1.startAnimation(animationSlideInLeft);
  image1.setVisibility(View.VISIBLE);
  
  //Vertical slide on image4
  image4 = (ImageView) findViewById(R.id.image4);

  animationSlideDown = AnimationUtils.loadAnimation(this,
    R.anim.slide_down);
  animationSlideDown.setDuration(3000);
  animationSlideDown.setAnimationListener(animationSlideDownListener);
  
  image4.startAnimation(animationSlideDown);

 }

 @Override
 protected void onPause() {
  // TODO Auto-generated method stub
  super.onPause();
  image1.clearAnimation();
  image2.clearAnimation();
  image3.clearAnimation();
  image4.clearAnimation();
 }
 
 AnimationListener animationSlideDownListener = new AnimationListener() {

  @Override
  public void onAnimationStart(Animation animation) {}

  @Override
  public void onAnimationEnd(Animation animation) {
   image4.startAnimation(animationSlideDown);
  }

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

 AnimationListener animationSlideInLeftListener = new AnimationListener() {

  @Override
  public void onAnimationEnd(Animation animation) {
   // TODO Auto-generated method stub

   if (curSlidingImage == image1) {
    image1.startAnimation(animationSlideOutRight);
   } else if (curSlidingImage == image2) {
    image2.startAnimation(animationSlideOutRight);
   } else if (curSlidingImage == image3) {
    image3.startAnimation(animationSlideOutRight);
   }
  }

  @Override
  public void onAnimationRepeat(Animation animation) {}

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

 AnimationListener animationSlideOutRightListener = new AnimationListener() {
  @Override
  public void onAnimationEnd(Animation animation) {
   // TODO Auto-generated method stub
   if (curSlidingImage == image1) {
    curSlidingImage = image2;
    image2.startAnimation(animationSlideInLeft);
    image1.setVisibility(View.INVISIBLE);
    image2.setVisibility(View.VISIBLE);
    image3.setVisibility(View.INVISIBLE);
   } else if (curSlidingImage == image2) {
    curSlidingImage = image3;
    image3.startAnimation(animationSlideInLeft);
    image1.setVisibility(View.INVISIBLE);
    image2.setVisibility(View.INVISIBLE);
    image3.setVisibility(View.VISIBLE);
   } else if (curSlidingImage == image3) {
    curSlidingImage = image1;
    image1.startAnimation(animationSlideInLeft);
    image1.setVisibility(View.VISIBLE);
    image2.setVisibility(View.INVISIBLE);
    image3.setVisibility(View.INVISIBLE);
   }
  }

  @Override
  public void onAnimationRepeat(Animation animation) {}

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

Download the files.

---

I fail to set RepeatMode and RepeatCount to make it animate repeatly by using Java code or XML, so I implement AnimationListener to restart when onAnimationEnd is called.