Custom Android UI animation (TranslateAnimation, RotateAnimation or AlphaAnimation)

Animations are a great way to spice up the UI of your app. Although using too many animations can freak out the user, applying one or two in the right places can make the interface look professional and add some points to the user experience.

Most developers have no problem learning and using the standard animations that Android provides, such as TranslateAnimation, RotateAnimation or AlphaAnimation. You can specify them both in XML and programmatically in the code. Also, it's easy to understand the Interpolators - linear, cycle, acceleration/deceleration etc.

What could also be cool for your app is to have a custom, unique animation that is not seen in any other app. Fortunately, that is easy enough to do. In this article, we will develop a simple custom animation and apply it to a UI element to make a demo.

App Layout

We'll use a simple app layout described by the following 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/image"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:layout_marginTop="30dip"
   android:src="@drawable/rhino" />
  <Button
   android:id="@+id/button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:layout_marginTop="30dip"
   android:text="Please click me" />
</LinearLayout>

We expect the image to animate with our custom animation when the user clicks the button.

Coding the animation

For simplicity, let's make an animation that only modifies the alpha value (transparency) and does not change the transformation matrix (scaling, translation, rotation etc.). The standardAlphaAnimation is a good example. However, it is too simple. Let's make an animation that doesn't simply fade our view in or out, but instead makes the view blink multiple times by modifying its transparency.

In order to create our custom animation, let's just subclass the Animation class:

import android.util.FloatMath;
import android.view.animation.Animation;
import android.view.animation.Transformation;


public class BlinkAnimation extends Animation {
/*...*/

Now, curiously, the Animation class does not have any abstract methods that are required to be overridden. However, for most animations you will need to override the applyTransformation()method. That method actually defines the animation by taking the interpolated time and thetransformation object as inputs and modifying the transformation object according to the time and the animation logic. In our case, the method will change the transparency by a cosine function that we loop, shift and take the absolute value of, according to the settings our animation object has:

public class BlinkAnimation extends Animation {
    private int totalBlinks;
    private boolean finishOff;
   
    public BlinkAnimation(int totalBlinks, boolean finishOff) {
        this.totalBlinks = totalBlinks;
        this.finishOff = finishOff;
    }


    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        float period = interpolatedTime * totalBlinks * 3.14f + (finishOff ?3.14f / 2 : 0);
        t.setAlpha(Math.abs(FloatMath.cos(period)));
    }


/*...*/

The totalBlinks parameter defines the total number of times our view will blink. The finishOffparameter defines whether the animation will finish with a fade-out or with a fade-in. This is good if we want to show or hide the view after the animation has finished.

It is very important to understand that interpolatedTime is a value between 0.0f and 1.0f that represents an artificial, non-linear timeline. That is, unless you use a LinearInterpolator(See this for other Interpolator), theinterpolatedTime value will not change linearly with time, but will change with an acceleration, or in cycle, or with acceleration+deceleration etc. This allows to combine the animation effect with various time effects that make the animation look more interesting.

In addition, we override the following methods to hint the animation engine that our animation does not change the transformation matrix or the bounds of the view:

    @Override
    public boolean willChangeBounds() {
        return false;
    }


    @Override
    public boolean willChangeTransformationMatrix() {
        return false;
    }

Using the animation

Although we defined a very simple animation using only few trivial lines of code, we can now use the entire animation framework with our animation, such as interpolators, duration changes and animation listeners. Here's the code of the activity that uses our new BlinkAnimation:

public class TestActivity extends Activity implements OnClickListener, AnimationListener {
    private ImageView image;
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        image = (ImageView) findViewById(R.id.image);
        ((Button) findViewById(R.id.button)).setOnClickListener(this);
    }


    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.button) {
            Animation animation;
            if (image.getVisibility() == View.VISIBLE) {
                animation = new BlinkAnimation(3, true);
                animation.setInterpolator(new DecelerateInterpolator());
            } else {
                animation = new BlinkAnimation(3, false);
                animation.setInterpolator(new AccelerateInterpolator());
            }
            animation.setDuration(1000L);
            animation.setAnimationListener(this);
           
            image.startAnimation(animation);
        }
    }


    @Override
    public void onAnimationEnd(Animation animation) {
        image.setVisibility(image.getVisibility() == View.VISIBLE ?
                View.INVISIBLE : View.VISIBLE);
    }


    @Override
    public void onAnimationRepeat(Animation animation) {}


    @Override
    public void onAnimationStart(Animation animation) {}
}

As you can see, we use the animation to toggle the image on and off, and we use AccelerationInterpolator and DecelerationInterpolator to make our animation look more natural.

I recommend you to grab the source below and try this animation in your own app. Then try to make something more complex and interesting. There is a lot of room for your creativity with custom Android animations.

Thank to http://www.wiseandroid.com/post/2010/08/10/Making-a-simple-custom-Android-UI-animation.aspx. follow this URL for source code too

Read more »

UNVEILING 2D ANIMAT ION

Frame-by-Frame Animation

Creating the Activity
Start by creating the basic XML layout file for our test-animation activity screen
Listing 6-1. XML Layout File for the Animation Test Harness

<?xml version="1.0" encoding="utf-8"?>

<!—filename: /res/layout/frame_animations_layout.xml -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView android:id="@+id/textViewId1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Debug Scratch Pad"

/>

<Button

android:id="@+id/startFAButtonId"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Start Animation"

/>

<ImageView

android:id="@+id/animationImage"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>

</LinearLayout>

The first control is the debug-scratch text control, which is a simple TextView. You
then add a button to start and stop the animation. The last view is the ImageView, where
you will play the animation. Once you have the layout, create an activity to load this view

 Activity to Load the ImageView
public class FrameAnimationActivity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.frame_animations_layout);
}
}
You will be able to run this activity from any menu item you might have in your current
application by executing the following code:
Intent intent = new Intent(inActivity,FrameAnimationActivity.class);
inActivity.startActivity(intent);
At this point, you will see an activity that looks like the one in Figure 6-3

Adding Animation to the Activity

 XML File Defining the List of Frames to be Animated

 <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
     android:oneshot="false">
         <item android:drawable="@drawable/colored-ball1" android:duration="50" />
          <item android:drawable="@drawable/colored-ball2" android:duration="50" />
          <item android:drawable="@drawable/colored-ball3" android:duration="50" />
         <item android:drawable="@drawable/colored-ball4" android:duration="50" />
         <item android:drawable="@drawable/colored-ball5" android:duration="50" />
        <item android:drawable="@drawable/colored-ball6" android:duration="50" />
        <item android:drawable="@drawable/colored-ball7" android:duration="50" />
        <item android:drawable="@drawable/colored-ball8" android:duration="50" />
</animation-list>

Each frame points to one of the colored-ball images you have assembled through their
resource IDs. The animation-list tag essentially gets converted into an AnimationDrawable
object representing the collection of images. You will then need to set this Drawable as a background
resource for our ImageView in the sample. Assuming that the file name for this XML file
is frame_animation.xml and that it resides in the /res/drawable subdirectory, you can use the
following code to set the AnimationDrawable as the background of the ImageView:
view.setBackGroundResource(Resource.drawable.frame_animation);

 Complete Code for the Frame-by-Frame Animation Test

public class FrameAnimationActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.frame_animations_layout);
this.setupButton();
}
private void setupButton()
{
Button b = (Button)this.findViewById(R.id.startFAButtonId);
b.setOnClickListener(
new Button.OnClickListener(){
public void onClick(View v)
{
parentButtonClicked(v);
}
});
}
private void parentButtonClicked(View v)
{
animate();
}
private void animate()
{
ImageView imgView = (ImageView)findViewById(R.id.imageView);
imgView.setVisibility(ImageView.VISIBLE);
imgView.setBackgroundResource(R.drawable.frame_animation);
AnimationDrawable frameAnimation =
(AnimationDrawable) imgView.getBackground();
if (frameAnimation.isRunning())
{
frameAnimation.stop();
}
else
{
frameAnimation.stop();
frameAnimation.start();
}
}
}//eof-class

Read more »