Android Animation is used to give the UI a rich look and feel. Animations in android apps can be performed through XML or android code. In this android animation tutorial we’ll go with XML codes for adding animations into our application. Show
Android AnimationAnimation in android apps is the process of creating motion and shape change. The basic ways of animation that we’ll look upon in this tutorial are:
Android Animation Example XMLWe create a resource directory under the res folder names anim to keep all the xml files
containing the animation logic. Following is a sample xml file showing an android animation code logic.
Loading Animation when UI widget is clickedOur aim is to show an animation when any widget(lets say TextView) is clicked. For that we need to use the
To start the animation we need
to call the
Here we perform the animation on a textview component by passing the type of Animation as the parameter. Setting the Animation ListenersThis is only needed if we wish to listen to events like start, end or repeat. For this the activity must implement AnimationListener and the following methods need to overridden.
Android Animation Project StructureAs you can see, we’ve included the xml of all the major types of animations covered above.Android Animation Examples XML CodeHere I am providing sample code for most of the common android animations. Fade In Animation
Here alpha references the opacity of an object. An object with lower alpha values is more transparent, while an object with higher alpha values is less transparent, more opaque. Fade in animation is nothing but increasing alpha value from 0 to 1. Fade Out Animation
Fade out android animation is exactly opposite to fade in, where we need to decrease the alpha value from 1 to 0. Cross Fading AnimationCross fading is performing fade in animation on one TextView while other TextView is fading out. This can be done by using Blink Animation
Here fade in and fade out are performed infinitely in reverse mode each time. Zoom In Animation
We use Zoom Out Animation
Notice that android:from and android:to are opposite in Rotate Animation
A from/toDegrees tag is used here to specify the degrees and a cyclic interpolator is used. Move Animation
Slide Up Animation
It’s achieved by setting android:fromYScale="1.0″ and android:toYScale="0.0″ inside the scale tag. Slide Down Animation
This is just the opposite of Bounce Animation
Here bounce interpolator is used to complete the animation in bouncing fashion. Sequential Animation
Here a different android:startOffset is used from the transitions to keep them sequential. Together Animation
Here CodeThe
To sum up, a
As discussed before each textView animation is started by invoking the respective animation object in which the animation logic is loaded by AnimationUtils.loadAnimation() method. The crossFade animation consists of two TextViews in which one fades out and the other fades in. Below is a short video showing all the animations in our application. The together animation is seen in the image above. Note that these animation when run on an emulator wont be smooth, so it’s recommended to run the application on a normal device. This brings an end to android animation example tutorial. You can download the Android Animation Example Project from the link below.Download Android Animation XML Project |