Thursday, September 29, 2011

Implement slide-in and slide-out animation



package com.exercise.AndroidAnimation;

import android.app.Activity;
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 AndroidAnimationActivity extends Activity {
 
 ImageView image1, image2, image3;
 Animation animationSlideInLeft, animationSlideOutRight;
 ImageView curSlidingImage;
 
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.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);

   }

 @Override
 protected void onPause() {
  // TODO Auto-generated method stub
  super.onPause();
  image1.clearAnimation();
  image2.clearAnimation();
  image3.clearAnimation();
 }
  
 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) {
   // TODO Auto-generated method stub
   
  }

  @Override
  public void onAnimationStart(Animation animation) {
   // TODO Auto-generated method stub
   
  }};
   
 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) {
   // TODO Auto-generated method stub
   
  }
  @Override
  public void onAnimationStart(Animation animation) {
   // TODO Auto-generated method stub
    
  }};
}


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
<TextView 
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="@string/hello"
   />
<ImageView
   android:id="@+id/image1"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:src="@drawable/icon"
   android:visibility="invisible"
   />
<ImageView
   android:id="@+id/image2"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:src="@drawable/icon"
   android:visibility="invisible"
   />
<ImageView
   android:id="@+id/image3"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:src="@drawable/icon"
   android:visibility="invisible"
   />
</LinearLayout>




Download the files.



Ref:
- Implement simple Fade-in Animation
- Handle Animation event, AnimationListener
- Android pre-defined Animation Resources
- Implement slide top-down vertical animation
Animation of sliding horizontal and vertical

8 comments:

Unknown said...

Thats is really an awesome example of SlideIn and SlideOut. I have one question... How can we convert this left to right sequence to Top to bottom?

Erik said...

hello,

please read Implement slide top-down vertical animation.

Unknown said...

Thanks Mate really helpful :)
I have one that why the image take a stop in the middle of the screen??? Even if I disable the the Pause action it still doesn't work. Any idea or I am missing something.

Warm Regards.

Erik said...

Hello Ali Bin Abid,

I think it's the delay between AnimationEnd -> Listener -> andother Animation start.

Unknown said...

Hi Android Er....
If this is the case then how can we decrease this delay???? I am completely new so please ignore if I sound stupid.

Ali

Erik said...

Hello Ali Bin Abid,

If you want the animation from left-in to right-out only, without stop on center, you can create your animation.

Refer to Implement slide top-down vertical animation.

You can create your own animation with fromXDelta="-50%" and toXDelta="50%"

Rohan said...

how can we make page slide as the user slides finger on the screen.? Please help. I am new to android

Satya said...

Good Article... To Learn..