Android: Defining Animation in Java on User Interaction

In this tutorial we will demonstrate using a set of animations on an Android view, with the animation prompted by user interaction. We will include an Image View in the app layout, starting the animations when the user clicks it. We will make two animations run concurrently using an Animation Set. Rather than defining the animations in XML as resources, we will implement the details in Java. I've written about some of the other approaches to animation in Android for Mobiletuts+, see these more detailed guides:

• Creating a Simple Tween Animation
• Creating Frame Animations
• Creating a Simple Property Animation

This tutorial indicates some of the alternative options you can choose from when implementing animations in your Android projects.

Setup Layout and Drawables

In your app layout, you can use any view you want to animate, for example, the following Image View:

The background drawable can be any shape you like, for example the following, saved in the app drawables as "spin_pic.xml":

The shape is a circle with a linear gradient in it. You can include it in any layout you choose.

Java Activity

In your Java Activity class, set the layout as normal. Your class will need the following imports:

import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;

Retrieve a reference to the view you want to animate in onCreate:

ImageView spinBtn = (ImageView)findViewById(R.id.spinView);

Set the class up to act as click listener for the Image View:

spinBtn.setOnClickListener(this);

For this your Activity class must implement the OnClickListener interface as follows, but with your own class name:

public class YourActivity extends Activity implements OnClickListener

Add an onClick method to the class and check for the Image View:

public void onClick(View v){
if(v.getId()==R.id.spinView){
//respond to click
}
}

Alter the code if your view has a different ID. Inside the conditional block you can start the animation.

Animate

Now you can animate your view when it is clicked. We will be spinning and fading the view at the same time. In the if block you created in onClick for the view you want to animate, first create a Rotate Animation:

RotateAnimation rotateAnim = new RotateAnimation
 (0f, 360f, 
 Animation.RELATIVE_TO_SELF, 0.5f,
 Animation.RELATIVE_TO_SELF, 0.5f);

The first two parameters represent the number of degrees to rotate the view from and to - we will rotate it one full circle. The second two pairs of parameters represent the pivot points to rotate on, with the first pair representing the X pivot value type then the value and the second two doing the same for the Y value - this code defines the centre of the view on both axes.

Next define an Alpha Animation to fade the view out as it rotates:

AlphaAnimation alphaAnim = new AlphaAnimation(1.0f, 0.0f);

We will fade the view from full alpha to invisible. Next create an Animation Set so that we can apply both animations to the same view:

AnimationSet animSet = new AnimationSet(true);

The true parameter specifies that the same interpolator should be used for all animations in the set. Now specify the animation set properties:

animSet.setInterpolator(new AccelerateInterpolator());
animSet.setDuration(3000);
animSet.setRepeatCount(0);
animSet.setFillAfter(true);

You could set the properties for the animations individually - setting them on the set applies them to all animations within it. We will accelerate the animation, let it elapse over 3000 milliseconds, only carry it out once and retain the end state rather than letting the view jump back to its original state after the animation is complete, which is the default behaviour.
Add the two animations to the set:

animSet.addAnimation(rotateAnim);
animSet.addAnimation(alphaAnim);

Finally, start the animation on the view:

v.startAnimation(animSet);

Run your animation to see the result:

The view spins and fades on clicking, eventually disappearing completely.

Resources

The official Android Developer Guide runs through the various options you have in animating application elements: Animation and Graphics