Android Special Effects: Alpha Animation

An Alpha Animation is animation that controls the alpha level of an object, i.e. fading it  in and out. In Android, you can apply that fading effect to almost  anything, from simple text, to images, buttons, check boxes, etc… Android has a few classes that can help you add that special effect to your programs, like AlphaAnimation and AnimationUtils.

Here’s an example on how to apply fading on any Android component subclass of View.

First, the XML resource.  In the resources folder, we will create a tiny XML configuration file with the characteristics of the fading effect we want in an “anim” subfolder. So, under res/anim, here’s our alpha.xml:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000" />

We are choosing to have a very basic full fade in effect (alpha from 0 to 1) that lasts one second. The above can also be done directly in Java code:

Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(1000);

Configuring the animation in resources or in code is ultimately a matter of preference. We will use the XML in this example. This is our class that does the above fading to any View (TextView, Button, etc..):

package com.ts.fx.utils;

import android.app.Activity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;

public class Fader {

	/**
	 * handles all subclasses of View : TextView, Button, ImageView etc..
	 * given the component's id in their layout file
	 * */
	public static void runAlphaAnimation(Activity act, int viewId) {

	    // load animation XML resource under res/anim
	    Animation animation  = AnimationUtils.loadAnimation(act, R.anim.alpha);
	    if(animation == null){
		return; // here, we don't care
	    }
	    // reset initialization state
	    animation.reset();
	    // find View by its id attribute in the XML
	    View v = act.findViewById(viewId);
	    // cancel any pending animation and start this one
	    if (v != null){
	      v.clearAnimation();
	      v.startAnimation(animation);
	    }
	}
}

The runAlphaAnimation() method takes an Activity reference and a View id attribute (as set up in the View’s layout XML). We’re basically done. all we have to do now is call it from any one of our Activitites:

// inside an Activity with text, checkbox and button
Fader.runAlphaAnimation(this, a_text.getId());
Fader.runAlphaAnimation(this, a_checkbox.getId());
Fader.runAlphaAnimation(this, a_button.getId());
//etc...

That’s all there is to it. The same basic technique seen here applies to all other special effects like translating, scaling or rotating components. The Animation classes have of course lots of other cool stuff, like controlling the z-ordering of the animated components, acceleration and repeat effects.

Here’s a thirty-second video (by yours truly) demonstrating various Android special effects (fading, translation and rotation) used together in a concrete application:

This article is also available at the Mobile Zone.

About these ads

, ,

  1. FrAndroid DevSharing #2 : Freamware
  2. Clément Hallet – "Mes" news » FrAndroid DevSharing #2 Arnaud
  3. FrAndroid DevSharing #2 | FrAndroid Communauté Android
  4. Android Tips: Expandable/Collapsible Views | Blog T

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: