Wednesday, August 15, 2012

Implement slide top-down vertical animation

The exercise "Implement slide-in and slide-out animation" implement horizontal animation using build in animation xml android.R.anim.slide_in_left and android.R.anim.slide_out_right. Currently, there are no build-in vertical animation xml supported. To implement vertical animation, create it by ourself.



/res/anim/slidedown_in.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromYDelta="-50%"
    android:toYDelta="0.0"
    android:duration="1000" />


/res/anim/slidedown_out.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromYDelta="0.0"
    android:toYDelta="50%"
    android:duration="1000" />


Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="horizontal"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
<ImageView
   android:id="@+id/image1"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   android:src="@drawable/ic_launcher"
   android:visibility="invisible"
   />
<ImageView
   android:id="@+id/image2"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   android:src="@drawable/ic_launcher"
   android:visibility="invisible"
   />
<ImageView
   android:id="@+id/image3"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   android:src="@drawable/ic_launcher"
   android:visibility="invisible"
   />
</LinearLayout>


Main code.
package com.exercise.androidanimation;

import android.os.Bundle;
import android.app.Activity;
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 Activity {
 
 ImageView image1, image2, image3;
 Animation animationSlideDownIn, animationSlideDownOut;
 ImageView curSlidingImage;

    @Override
    public 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);
        
        animationSlideDownIn = AnimationUtils.loadAnimation(this, R.anim.slidedown_in);
        animationSlideDownOut = AnimationUtils.loadAnimation(this, R.anim.slidedown_out);
        
        animationSlideDownIn.setAnimationListener(animationSlideInListener);
        animationSlideDownOut.setAnimationListener(animationSlideOutListener);

        curSlidingImage = image1;
        image1.startAnimation(animationSlideDownIn);
        image1.setVisibility(View.VISIBLE);
    }

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

  @Override
  public void onAnimationEnd(Animation arg0) {
   // TODO Auto-generated method stub
   if(curSlidingImage == image1){
    image1.startAnimation(animationSlideDownOut); 
   }else if(curSlidingImage == image2){
    image2.startAnimation(animationSlideDownOut); 
   }else if(curSlidingImage == image3){
    image3.startAnimation(animationSlideDownOut); 
   } 
  }

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

  @Override
  public void onAnimationStart(Animation animation) {
   // TODO Auto-generated method stub
   
  }
  
 };
 
 AnimationListener animationSlideOutListener
 = new AnimationListener(){

  @Override
  public void onAnimationEnd(Animation animation) {
   // TODO Auto-generated method stub
   if(curSlidingImage == image1){
    curSlidingImage = image2;
    image2.startAnimation(animationSlideDownIn);
    image1.setVisibility(View.INVISIBLE);
    image2.setVisibility(View.VISIBLE);
    image3.setVisibility(View.INVISIBLE); 
   }else if(curSlidingImage == image2){
    curSlidingImage = image3;
    image3.startAnimation(animationSlideDownIn);
    image1.setVisibility(View.INVISIBLE);
    image2.setVisibility(View.INVISIBLE);
    image3.setVisibility(View.VISIBLE); 
   }else if(curSlidingImage == image3){
    curSlidingImage = image1;
    image1.startAnimation(animationSlideDownIn);
    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
   
  }
  
 };

}



Download the files.

3 comments:

Rajiv Bawa said...

Nice tutorial its good and help full
and i also wana knw that how we can swipe more to activities

Ly Nguyen said...

thank you :)

Puran Thapa said...

Thankyou very much man.saved my day got what I wanted with some edits for my work.