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:

Related Whitepaper:

Rapid Android Development: Build Rich, Sensor-Based Applications with Processing

Create mobile apps for Android phones and tablets faster and more easily than you ever imagined

Use 'Processing', the free, award-winning, graphics-savvy language and development environment, to work with the touchscreens, hardware sensors, cameras, network transceivers, and other devices and software in the latest Android phones and tablets.

Get it Now!  

Leave a Reply


three × = 9



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
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.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books