Make your apps come alive! Use Animation

.

Our tutorial app

Starting the app displays 4 buttons:

Selecting a button demonstrates one of the four View animations

Pressing a button demonstrates a View animation:

• AlphaAnimation – fades an image in from invisible to fully visible
• RotateAnimation – rotates a color wheel first clockwise and then anti-clockwise
• ScaleAnimation – scales an image up from one-tenth to full-size
• TranslateAnimation – slides an image diagonally down from the top-left corner to the bottom-right corner of the parent layout

Size matters: Changing the scale of an image

Our ScaleAnimation scales an image up from one-tenth its size to full-size.

The image scales up over 5 seconds

We define the animation in an XML animation resource file saved in the res/anim folder:

Define the animation attributes in an animation resources file

Note the following:

• scale – we use this element to indicate a resizing animation
• duration – time in milliseconds to scale the image
• fromXScale – the starting horizontal scale of the image
• fromYScale – the starting vertical scale of the image
• interpolator – determines the acceleration of the image scaling – accelerate_interpolator causes the scaling to start off slowly and then accelerate
• pivotX – the X coordinate of the pivot point which remains fixed during scaling (here it’s the horizontal centre of the image)
• pivotY – the Y coordinate of the pivot point which remains fixed during scaling (here it’s the vertical centre of the image)
• toXScale – the final horizontal scale of the image
• toYScale – the final vertical scale of the image

Here’s the code we use to start the animation:

Load the ScaleAnimation from the animation resource file

Note the following:

• this method executes when the Scale Animation button is pressed
• we get a reference to the image view and set it to display the eye.png drawable
• clearAnimation – cancels any animation that may be linked to this view
• layoutParams – we set the layout parameters for the image so that it’s displayed in the centre of the relative layout container
• scaleAnimation – our animation object which we load from our XML animation resource file
• startAnimation – we start the scale animation

Round and round we go: Rotate an image

Our RotateAnimation rotates an image clockwise over 5 seconds and then rotates it back over 2 seconds.

The wheel rotates first clockwise and then anti-clockwise

We define the animation in an XML animation resource file saved in the res/anim folder:

We use an Animation Set to group our two RotateAnimation animations

Note the following:

• set – we use the element to group together two rotate animations
• rotate – we use this element for rotation animations
• duration – the time in milliseconds to complete the rotation. The first rotation takes 5 seconds and the second takes 2 seconds
• fromDegrees – rotation offset at the beginning of the rotation. The first rotation starts at 0 degrees and ends at 360 degrees (clockwise rotation). The second rotation starts at 360 degrees and ends at 0 degrees (anti-clockwise rotation)
• interpolator - determines the acceleration of the image rotation – the first rotation’s interpolator is set to accelerate_decelerate. The rotation starts and ends slowly with acceleration in the middle. The second rotation’s interpolator is set to decelerate. The rotation starts quickly and then decelerates
• pivotX – the X coordinate for the centre of the rotation. Set to the middle of the image
• pivotY - the Y coordinate for the centre of the rotation. Set to the middle of the image
• toDegrees – rotation offset at the end of the rotation

Here’s the code we use to start the animation:

We create our RotateAnimation object, load the animation from the resource file and then start the animation

Note the following:

We execute the doRotate() method when the Rotate Animation button is pressed.

As in the doScale() method:

• we get a reference to the image view and set it to display an image, the wheel.png drawable
• we call clearAnimation() to cancel any animation that may be linked to this view
• we set the layout parameters for the image so that it’s displayed in the centre of the relative layout container
• then we create an Animation object, rotateAnimation and load our XML defined animation resource
• finally we start the animation by calling startAnimation(), passing our RotateAnimation object as the parameter

Now you see it, now you don’t: Animating the Alpha level of a View

Our AlphaAnimation fades an image in over 3 seconds.

The image fades in from completely invisible to completely opaque

We define the animation in an XML file animation resource file saved in the res/anim folder:

We define our AlphaAnimation animation in an XML animation resource file

Note the following:

• alpha – we use this element for Alpha Animations
• duration – the time in milliseconds for the image to become completely visible
• fromAlpha – starting opacity offset, 0.0 means it’s completely transparent
• interpolator – determines the acceleration of the change in transparency. accelerate_interpolator causes the image to first start appearing slowly and then speed up, quickly becoming visible
• toAlpha – ending opacity offset, 1.0 means that the image is completely opaque

Here’s the code we use to start the animation:

We create our AlphaAnimation object, load the animation from the resource file and then start the animation

Note the following:

We execute the doAlpha() method when the Alpha Animation button is pressed.

As in the doScale() method:

• we get a reference to the image view and set it to display an image, the car.png drawable
• we call clearAnimation() to cancel any animation that may be linked to this view
• we set the layout parameters for the image so that it’s displayed in the centre of the relative layout container
• then we create an Animation object, alphaAnimation and load our XML defined animation resource
• finally we start the animation by calling startAnimation(), passing our AlphaAnimation object as the parameter

Get a move on: Translate your View!

Our TranslateAnimation slides an image diagonally across the screen, taking four seconds. The animation is repeated and when finished triggers an Animation Listener’s onAnimationEnd() method where our code starts a new activity.

The image moves diagonally across the screen

We define the animation in code:

Firstly, as we did with the other animations:

• we get a reference to the image view and set it to display an image, the stairs.png drawable

• we call clearAnimation() to cancel any animation that may be linked to this view

Then we set the layout parameters for the image but this time we want the image to start off in the top-left corner of the screen:

Set the layout parameters to position the image in the top-left corner

Note the following:

• we get the layout parameters for the image view and then add two rules:
  • ALIGN_PARENT_LEFT – aligns the image view’s left edge with the relative layout’s left edge
  • ALIGN_PARENT_TOP – aligns the image view’s top edge with the relative layout’s top edge
• setLayoutParams – we set the image view to use our new layout parameters

Next, we set up and start the animation:

Get the container’s corner coordinates and use them in the TranslateAnimation’s constructor

Note the following:

• We get the X and Y values for the boundaries of the relative layout. We’ll use these as coordinates for our TranslateAnimation object
• translateAnimation – we create our TranslateAnimation object, passing in the coordinates:
  • left – start X coordinate
  • right – end X coordinate
  • top – start Y coordinate
  • bottom – end Y coordinate
• setDuration – the time in milliseconds for the image to slide across the screen
• setRepeatCount – we want to repeat the animation
• setInterpolator – we use the AccelerateInterpolator interpolator. This controls the acceleration of the slide, starting off slowly and then accelerating
• startAnimation – we start the animation, passing our TranslateAnimation object as a parameter

Listen up! The AnimationListener

We use an animation listener to listen for the key events during the animation. In our case we’re interested in when the animation ends so that we can start a new activity.

When the image slides off the screen at the bottom-right corner, the listener triggers its onAnimationEnd() method which starts the new activity:

The AnimationListener is notified when the animation starts, ends and if it’s repeated

Note the following:

We call the animation listener on our TranslateAnimation object, passing in a new implementation of AnimationListener.

We want to start a new activity when the animation is finished so we put our code inside the onAnimationEnd() method:

• we create a new Intent containing details of the activity that we want to start
• then we call startActivity(), passing the intent as a parameter,  to start the new activity

Here’s to a new day! The New Activity

The new activity starts when our Translate Animation ends.

When the activity starts, it displays a rotating image, which starts off completely transparent with a scale of 0. As the image spins, it scales up to full size, and becomes completely opaque.

The image completes 3 rotations and continues for a bit, the overshoot interpolator causing it to go beyond the third rotation and then bounce back.

The image spins, making three revolutions, overshoots and then bounces back

There are three animations grouped in a set. We create the animations in code, without using an XML animation resource file.

Let’s look at the code.

Firstly we create the RotateAnimation object:

We create our RotateAnimation object which is centred in the LinearLayout container

Note the following:

• This animation rotates the image 3 times. The pivot of the rotation is in the middle of the LinearLayout container
• rotateAnimation – our RotateAnimation object. We pass in 6 parameters:
  • fromDegrees – rotation offset to apply at the start of the animation
  • toDegrees - rotation offset to apply at the end of the animation (we do 3 x 360 degree rotations)
  • pivotXType – the image rotates on a pivot point which has X and Y coordinates. The pivot type determines how we interpret the X and Y coordinates. Here RELATIVE_TO_PARENT indicates that we should interpret the X value as a percentage from the left edge of the parent view
  • pivotXValue – the X coordinate for the pivot point
  • pivotYType - the image rotates on a pivot point which has X and Y coordinates. The pivot type determines how we interpret the X and Y coordinates. Here RELATIVE_TO_PARENT indicates that we should interpret the Y value as a percentage from the top edge of the parent view
  • pivotYValue - the Y coordinate for the pivot point

Next, we create the ScaleAnimation object:

We create our ScaleAnimation object which is centred in the LinearLayout container

Note the following:

• This animation scales the image from a scale of 0 to full-size. The pivot of the scale is in the middle of the LinearLayout container
• scaleAnimation – our ScaleAnimation object. We pass the constructor 8 parameters:
  • fromX – the horizontal start scaling factor
  • toX – the horizontal end scaling factor
  • fromY – the vertical start scaling factor
  • toY – the vertical end scaling factor
  • pivotXType - the image scales from a pivot point which has X and Y coordinates. The pivot type determines how we interpret the X and Y coordinates. Here RELATIVE_TO_PARENT indicates that we should interpret the X value as a percentage from the left edge of the parent view
  • pivotXValue – the X coordinate of the pivot point
  • pivotYType - the image scales from a pivot point which has X and Y coordinates. The pivot type determines how we interpret the X and Y coordinates. Here RELATIVE_TO_PARENT indicates that we should interpret the Y value as a percentage from the top edge of the parent view
  • pivotYValue – the Y coordinate of the pivot point

Next, we create our AlphaAnimation object:

We create our AlphaAnimation object which fades the image in until it is completely opaque

Note the following:

• this animation fades the image in from completely invisible until it is completely visible
• alphaAnimation – our AlphaAnimation object. We pass the constructor 2 parameters:
  • fromAlpha – the starting alpha value, 0.0 is fully transparent
  • toAlpha – the end alpha value, 1.0 is fully opaque

Then we create the AnimationSet object:

We create our AnimationSet object which groups our animations so that they can be run in sequence

Note the following:

• our animation set groups our animations together so that they can run together as a single animation
• animationSet – our AnimationSet object. We pass true as the parameter, indicating that all the animations in the set should use the interpolator that we associate with this set
• addAnimation – we add our animations to the set. The animations are applied in the order that they are added to the set
• setDuration – we set the duration for all the animations in the set to 2 seconds

Finally we set the interpolator, get a reference to the image view and start the animation:

We set the Interpolator for the set which will apply to all the animations in the set

Note the following:

• the interpolator applies to all the animations in the set
• OvershootInterpolator – the animation continues past the last value and then comes back
• imageViewBadge – our image view. We apply the set of animations to this view
• startAnimation – we start the set of animations

You may want to have a look at A Property Animation tutorial to see how to use Property Animations in your apps. Also, have a look at our Frame Animation tutorial, Frame-by-Frame Animation tutorial.

I hope that you have found this tutorial helpful.

This project was created using .

You can download the project files here 

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.