DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Android Special Effects: Alpha Animation

Android Special Effects: Alpha Animation

Tony Siciliani user avatar by
Tony Siciliani
·
May. 07, 12 · Mobile Zone · Interview
Like (0)
Save
Tweet
37.17K Views

Join the DZone community and get the full member experience.

Join For Free
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:

 

From Tony's Blog.
Android (robot) Alpha (finance)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • APIs Outside, Events Inside
  • Migrating From Heroku To Render
  • Modern REST API Design Principles and Rules
  • Vue 3 Reactivity Composition API Using Reactive() And Ref()

Comments

Mobile Partner Resources

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo