Android Animations
Android provides two mechanisms that you can use to create simple animations:
Tweened animation , in which you tell Android to perform a series of simple transformations (position, size, rotation, and so on) to the content of a View; and Frame-By-Frame animation, which loads a series of Drawable resources one after the other. Both animation types can be used in any View object to provide simple rotating timers, activity icons, and other useful UI elements
1. Tweened Animation
Android can perform simple visual transformations for you, including straight line motion, size change, and transparency change, on the contents of a View object. These transformations are represented by the following classes:
- AlphaAnimation (transparency changes)
- RotateAnimation (rotations)
- ScaleAnimation (growing or shrinking)
- TranslateAnimation (position changes)
This animations can be highly customized and combined, for example we can set the speed, delay, acceleration, duration of animations, then group them together in an AnimationSet.
The animations can be defined in XMl or by code. Defining in xml is much more clear, but you can not set animation parameters dynamically.
The animation XML files should be created in the res/anim folder and can be accessed using R.anim.animation_name.
Project setup
We are going to load our animations for a ImageView used in an activity – so set up a new Android project. Add a ImageView to your main.xml
<?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">
<ImageView android:id="@+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"
/>
</LinearLayout>
Create a new Activity named AnimationActivity
package com.mobisys.android.twin_animation_ex;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
public class TwinAnimationActivity extends Activity {
/** Called when the activity is first created. */
@Override public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ImageView iv = (ImageView) findViewById(R.id.iv1);
LinearLayout layout = (LinearLayout) findViewById(R.id.root);
}
}
Alpha Animations
Alpha animations allows us to create fade-in/fade-out effects.
All animations are stored in res/anim so we create a new xml file named alpha.xml there.
Attributes:
android:fromAlpha
Float. Starting opacity offset, where 0.0 is transparent and 1.0 is opaque.
android:toAlpha
Float. Ending opacity offset, where 0.0 is transparent and 1.0 is opaque.
<?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:fromAlpha="1.0" android:toAlpha="0.2" android:duration="4000" />
Note : The file must have a single root element: either an <alpha>, <scale>, <translate>, <rotate>, or <set> element that holds a group (or groups) of other animation elements (even nested <set> elements).
Change the activity to load the animation from the xml file and start the animation
package com.mobisys.android.animation_demo;
import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
public class AnimationActivity extends Activity {
/** Called when the activity is first created. */
ImageView imageView;
Animation a;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imageView=(ImageView)findViewById(R.id.iv1);
a = AnimationUtils.loadAnimation(this, R.anim.alpha);
a.reset();
imageView.startAnimation(a);
}
}
Rotate Animations
A rotation animation.
Attributes:
android:fromDegrees
Float. Starting angular position, in degrees.
android:toDegrees
Float. Ending angular position, in degrees.
android:pivotX
Float or percentage. The X coordinate of the center of rotation. Expressed either: in pixels relative to the object’s left edge (such as “5″), in percentage relative to the object’s left edge (such as “5%”), or in percentage relative to the parent container’s left edge (such as “5%p”).
android:pivotY
Float or percentage. The Y coordinate of the center of rotation. Expressed either: in pixels relative to the object’s top edge (such as “5″), in percentage relative to the object’s top edge (such as “5%”), or in percentage relative to the parent container’s top edge (such as “5%p”).
Add a new xml file to res/anim named rotate.xml
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="4000" />
Replace the alpha rotation with the new rotation animation in your activity.
Animation a = AnimationUtils.loadAnimation(this, R.anim.rotate);
Scale Animations
A resizing animation. You can specify the center point of the image from which it grows outward (or inward) by specifying pivotX and pivotY.
Attributes:
android:fromXScale
Float. Starting X size offset, where 1.0 is no change.
android:toXScale
Float. Ending X size offset, where 1.0 is no change.
android:fromYScale
Float. Starting Y size offset, where 1.0 is no change.
android:toYScale
Float. Ending Y size offset, where 1.0 is no change.
android:pivotX
Float. The X coordinate to remain fixed when the object is scaled.
android:pivotY
Float. The Y coordinate to remain fixed when the object is scaled.
Create another XML file in res/anim named scale.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="3.0"
android:toXScale="1.0"
android:fromYScale="3.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="4000" />
Load the animation in your activity.
Animation a = AnimationUtils.loadAnimation(this, R.anim.scale);
Translate Animations
A vertical and/or horizontal motion. Supports the following attributes in any of the following three formats: values from -100 to 100 ending with “%”, indicating a percentage relative to itself; values from -100 to 100 ending in “%p”, indicating a percentage relative to its parent; a float value with no suffix, indicating an absolute value.
Attributes:
android:fromXDelta
Float or percentage. Starting X offset. Expressed either: in pixels relative to the normal position (such as “5″), in percentage relative to the element width (such as “5%”), or in percentage relative to the parent width (such as “5%p”).
android:toXDelta
Float or percentage. Ending X offset. Expressed either: in pixels relative to the normal position (such as “5″), in percentage relative to the element width (such as “5%”), or in percentage relative to the parent width (such as “5%p”).
android:fromYDelta
Float or percentage. Starting Y offset. Expressed either: in pixels relative to the normal position (such as “5″), in percentage relative to the element height (such as “5%”), or in percentage relative to the parent height (such as “5%p”).
android:toYDelta
Float or percentage. Ending Y offset. Expressed either: in pixels relative to the normal position (such as “5″), in percentage relative to the element height (such as “5%”), or in percentage relative to the parent height (such as “5%p”).
Create translate.xml in res/anim
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<translate android:fromXDelta="0"
android:toXDelta="30"
android:duration="4000"
android:fillAfter="true"/>
<translate android:toYDelta="100"
android:fillAfter="true"
android:duration="4000"
android:startOffset="4000"/>
</set>
here <set>: A container that holds other animation elements (<alpha>, <scale>, <translate>, <rotate>) or other <set> elements.(i.e <set> contains multiple animation elements)
and android:fillAfter : When set to true, the animation transformation is applied after the animation is over.
Replace the animation in your activity
Animation a = AnimationUtils.loadAnimation(this, R.anim.translate);
2. Frame By Frame Animation
An object used to create frame-by-frame animations, defined by a series of Drawable objects, which can be used as a View object’s background.
The simplest way to create a frame-by-frame animation is to define the animation in an XML file, placed in the res/anim, and set it as the background to a View object. Then, call start() to run the animation.
An AnimationDrawable defined in XML consists of a single <animation-list> element, and a series of nested
Firstly,we will define ImageView in main.xml
<?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"
android:gravity="center">
<ImageView android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
spin_animation.xml file in res/anim/ folder:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/blue_baloon" android:duration="1000" />
<item android:drawable="@drawable/orange_baloon" android:duration="1000" />
<item android:drawable="@drawable/red_baloon" android:duration="1000" />
</animation-list>
You can download images here
Here is the code to load and play this animation.
package com.mobisys.android.frame_by_frame;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;
public class FrameActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
@Override
public void onWindowFocusChanged(boolean hasFocus){
ImageView img=(ImageView)findViewById(R.id.img);
img.setBackgroundResource(R.anim.spin_animation);
AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();
frameAnimation.start();
}
}
Here don’t start animation until window’s focus get changed. So never start the animation in onCreate().
So for that override the method onWindowFocusChanged() and start animation in this method.
Run the application. 
