Android Animations – Quick Guide

(NOTE: The original post has been slightly edited to improve readability)

Setting animations to a layout programmatically is described below. Here we go:

Create an XML file named for example “bottom_out.xml” and place it in a folder called “anim” inside the “res” folder. The contents of the “bottom_out.xml” file should be as follows:

<?xml version="1.0" encoding="utf-8"?>
<set
     xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <translate
        android:fromYDelta="0%"
        android:toYDelta="60%"
        android:duration="700">
    </translate>
</set>

The values indicate the percentage relative to the parent layout. An Interpolator is used in order to indicate how the animation should proceed. It essentially defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rotate) to be accelerated, decelerated, repeated, etc. For example, here we use a AccelerateInterpolator, thus the animation will be accelerated during the end. Another interpolator we could use is the LinearInterpolator, where the rate of change is constant.

Let’s see how this can be used inside an Android class.

private void startAnimationPopOut() {         
    LinearLayout myLayout = (LinearLayout) findViewById(R.id.anim_layout);

    Animation animation = AnimationUtils.loadAnimation(this,R.anim.bottom_out);

    animation.setAnimationListener(new AnimationListener() {                  
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {

        }
    });

    myLayout.clearAnimation();
    myLayout.startAnimation(animation);

}

The “myLayout” variable (pointing to R.id.anim_layout) is a simple LinearLayout defined in xml file under “layout” folder. The AnimationUtils class can be used to load an Animation object from a resource. We also can attach AnimationListeners and be notified in the various stages of the animation. Note that it is generally a good practice to clear any previously set animations prior to set new animation, as shown in the end of the snippet.

Below are some of the samples I would like to share:

Sinking in:

<translate
     android:fromYDelta="70%"
     android:toYDelta="0%"
     android:duration="700">
</translate>

Slide from left side:

<translate
     android:fromXDelta="-100%p"
     android:toXDelta="0%"
     android:duration="600">
</translate>

Slide from right side:

<translate
     android:fromXDelta="100%p"
     android:toXDelta="0%p"
     android:duration="600">
</translate>

Rotate from 0 to 180 degree:

<rotate 
    android:fromDegrees="180"
    android:toDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="600">
</rotate>

Here pivotX and PivotY are the x and y coordinates of center around which you wish the view to rotate.

Scale (here it is zooming in):

<scale                 
    android:toXScale="1.1"               
    android:fromXScale="1.0"             
     
    android:toYScale="1.1"
    android:fromYScale="1.0"
   
    android:pivotX="0%"
    android:pivotY="0%"
   
    android:startOffset="100"
    android:duration="2000">
 </scale>

Here 1.0 implies original view size; as the pivot is set 0, the view will be scaled taking its origin as the center.

Find more in the Animation Resources page. Happy coding!