In this chapter, we will see how to use the Animation class to make our UI more mobile and interesting. As we have come to expect, and the Animation class is no different, the Android API will allow us to do some quite advanced things with relatively straightforward code.
This chapter can be approximately divided into these topics:
- An introduction to how animations in Android work and are implemented
- An introduction to a new UI widget: SeekBar
- A working animated mini app
- Adding simple, pleasing animations to the Note To Self app
First, let's see how do animations in Android work?
The normal way to create an animation in Android is through XML. We can write XML animations and then load and play them in Java on a specified UI widget. So, for example, we can write an animation that fades in and out five times over 3 seconds and then play that animation on ImageView or any other widget. We can think of these XML animations as a script as they define the type, order, and timing of the animation.
Let's explore some of the different properties that we can assign to our animations and how to use them in our Java code, and finally, we can make a neat animated mini app to try it all out.
We have learned that XML can also be used to describe animations as well as UI layouts, but let's find out exactly how. We can state properties of an animation that describe the starting and ending appearance of a widget. The XML can then be loaded by our Java code by referencing the name of the XML file that contains it and turning it into a usable Java object, again, like a UI layout.
Let's take a quick look at some of the animation property pairs that we can state in order to create an animation. Straight after we have looked at some XML, we will see how to use it in Java.
Alpha is the measure of transparency. So, by stating the starting fromAlpha values and ending toAlpha values, we can fade items in and out. A value of 0.0 is invisible, and the value 1.0 is an object's normal appearance. Steadily moving between the two makes a fading-in effect, as shown in the following code:
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" />
We can move an object within our UI using a similar technique: fromXDelta and toXDelta can have values set as a percentage of the size of the object that is being animated.
So, the code here would move an object from the left-hand side to the right-hand side by a distance that is equal to the width of the object itself:
<translate android:fromXDelta="-100%" android:toXDelta="0%"/>
In addition to this, there are the fromYDelta and toYDelta properties that can be used to animate the movements up and down.
The fromXScale and toXScale values will increase or decrease the scale of an object. As an example, the code shown here will change the object that runs the animation from a normal size to invisible:
<scale android:fromXScale="1.0" android:fromYScale="0.0" />
As another example, we could shrink the object to a tenth of its usual size using android:fromYScale="0.1" or make it 10 times as big using android:fromYScale="10.0".
Of course, none of these animations would be especially interesting if they just instantly arrived at their conclusion. To make our animations more interesting, we can, therefore, set their duration in milliseconds. A millisecond is one thousandth of a second. We can also make timing easier, especially in relation to other animations by setting startOffset, also in milliseconds.
The next code would begin an animation one-third of a second after we started it, and it would take two-thirds of a second to complete:
android:duration="666" android:startOffset="333"
If you want to spin something around, just use fromDegrees and toDegrees. This next code, predictably, will spin a widget around in a complete circle because, of course, there are 360 degrees in a circle:
<rotate android:fromDegrees="360" android:toDegrees="0" />
Repetition might be important in some animations, for example, a wobble or shake effect, so we can add a repeatCount property. In addition, we can specify how the animation is repeated by setting repeatMode.
The following code would repeat an animation 10 times, each time reversing the direction of the animation. The repeatMode property is relative to the current state of the animation. What this means is that if you, for example, rotated a button from 0 to 360 degrees, the second part of the animation (the first repeat) would rotate the other way from 360 degrees back to 0. The third part of the animation (the second repeat) would again reverse and rotate from 0 to 360 degrees:
android:repeatMode="reverse" android:repeatCount="10"
To combine groups of these effects, we need a set tag. This code shows how we can combine all the previous code snippets that we have just seen into an actual XML animation that will be compiled:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" …All our animations go here </set>
We still haven't seen any Java code with which we can bring these animations to life. Let's fix that now.
This next snippet of Java code shows us how we would declare an object of the type Animation, initialize it with an animation contained in an XML file named fade_in.xml, and start the animation on ImageView. Soon, we will do this in a project and see where to put the XML animations as well:
// Declare an Animation object Animation animFadeIn; // Initialize it animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_in); // Get an ImageView from the UI in the usual way ImageView (ImageView) findViewById(R.id.imageView); // Start the animation on the ImageView imageView.startAnimation(animFadeIn);
We already have quite a powerful arsenal of animations and control features for things such as timing, but the Android API gives us a little bit more than this as well.
We can listen for the status of animations much like we can listen for clicks on a button. We can also use interpolators to make our animations more life-like and pleasing. Let's look at listeners first.
If we implement the AnimationListener interface, we can indeed listen to the status of animations by overriding the three methods that tell us when something has occurred. We could then take actions based on these events.
In the following code snippet, OnAnimationEnd announces the end of an animation; onAnimationRepeat is called each and every time an animation begins a repeat, and perhaps predictably, onAnimationStart is called when an animation has started animating. This might not be the same time as when startAnimation is called if startOffset is set in the animation's XML:
@Override
public void onAnimationEnd(Animation animation) {
// Take some action here
}
@Override
public void onAnimationRepeat(Animation animation) {
// Take some action here
}
@Override
public void onAnimationStart(Animation animation) {
// Take some action here
}We will see how AnimationListener works in the Animations Demo app, as well as how to put another widget, SeekBar, into action.
If you can think back to high school, you might remember really exciting lessons about calculating acceleration. If we animate something at a constant speed, then at first glance things might seem OK. If we then compare the animation to another that uses gradual acceleration, then the latter will almost certainly be more pleasing to watch. It is possible that if we were not told that the only difference between the two animations was that one used acceleration and the other didn't, we wouldn't be able to say why we preferred it. Our brains are more receptive to things that conform to the norms of the world around us. This is why adding a bit of real-world physics, such as acceleration and deceleration, improves our animations.
The last thing we want to do, however, is start performing a bunch of calculations just to slide a button onto the screen or spin a piece of text in a circle.
This is where interpolators come in. They are animation modifiers that we can set in a single line of code within our XML.
Some examples of interpolators are accelerate_interpolator and bounce_interpolator, as shown:
android:interpolator="@android:anim/accelerate_interpolator" android:interpolator="@android:anim/cycle_interpolator"/>
We will put some interpolators along with some XML animations and the related Java code into action next.
Tip
You can learn more about interpolators and the Android Animation class at the developer website, http://developer.android.com/guide/topics/resources/animation-resource.html.