Android Animations – Quick Guide

A quick guide in the world of animations in Android from Chandan, one of our JCG partners.

(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!

Related Articles:

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

Leave a Reply


2 + = nine



Java Code Geeks and all content copyright © 2010-2015, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

Get ready to Rock!
To download the books, please verify your email address by following the instructions found on the email we just sent you.

THANK YOU!

Close