Android Animations
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.
- Fade In Animation
- Fade Out Animation
- Cross Fading Animation
- Blink Animation
- Zoom In Animation
- Zoom Out Animation
- Rotate Animation
- Move Animation
- Slide Up Animation
- Slide Down Animation
- Bounce Animation
- Sequential Animation
- Together Animation
Android Animation Example XML
We 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.
sample_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="https://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:duration="300"
android:fillAfter="true"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
- android:interpolator : It is the rate of change in animation. We can define our own interpolators using the time as the constraint. In the above xml code an inbuilt interpolator is assigned
- android:duration : Duration of the animation in which the animation should complete. It is 300ms here. This is generally the ideal duration to show the transition on the screen.
- The start and end of the animation are set using:
android:fromTRANSFORMATION android:toTRANSFORMATION
- TRANSFORMATION : is the transformation that we want to specify. In our case we start with an x and y scale of 0 and end with an x and y scale of 1
- android:fillAfter : property specifies whether the view should be visible or hidden at the end of the animation. We’ve set it visible in the above code. If it sets to false, the element changes to its previous state after the animation
- android:startOffset : It is the waiting time before an animation starts. This property is mainly used to perform multiple animations in a sequential manner
- android:repeatMode : This is useful when you want the animation to be repeat
- android:repeatCount : This defines number of repetitions on animation. If we set this value to infinite then animation will repeat infinite times
Loading Animation when UI widget is clicked
Our aim is to show an animation when any widget(lets say TextView) is clicked. For that we need to use the Animation
Class. The xml file that contains the animation logic is loaded using AnimationUtils class by calling the loadAnimation()
function. The below snippet shows this implementation.
Animation animation;
animation = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.sample_animation);
To start the animation we need to call the startAnimation()
function on the UI element as shown in the snippet below:
sampleTextView.startAnimation(animation);
Here we perform the animation on a textview component by passing the type of Animation as the parameter.
Setting the Animation Listeners
This 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.
- onAnimationStart : This will be triggered once the animation started
- onAnimationEnd : This will be triggered once the animation is over
- onAnimationRepeat : This will be triggered if the animation repeats
textView.setAnimationListener(new AnimationListener() {
public void onAnimationEnd(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationStart(Animation animation) {
}
});
Fade In Animation
fade_in.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" > <alpha
android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" /></set>
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.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" > <alpha
android:duration="1000"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" /></set>
Fade out android animation is exactly opposite to fade in, where we need to decrease the alpha value from 1 to 0.
Blink Animation
blink.xml
<set xmlns:android="https://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>
Here fade in and fade out are performed infinitely in reverse mode each time.
Zoom In Animation
zoom_in.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" > <scale
xmlns:android="https://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="3"
android:toYScale="3" >
</scale></set>
We use pivotX="50%"
and pivotY="50%"
to perform zoom from the center of the element.
Zoom Out Animation
zoom_out.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" > <scale
xmlns:android="https://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" >
</scale></set>
Notice that android:from and android:to are opposite in zoom_in.xml
and zoom_out.xml
.
Rotate Animation
rotate.xml
<set xmlns:android="https://schemas.android.com/apk/res/android">
<rotate android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="600"
android:repeatMode="restart"
android:repeatCount="infinite"
android:interpolator="@android:anim/cycle_interpolator"/></set>
A from/toDegrees tag is used here to specify the degrees and a cyclic interpolator is used.
Move Animation
move.xml
<set
xmlns:android="https://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true"> <translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="800" />
</set>
Slide Up Animation
slide_up.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true" > <scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" /></set>
It’s achieved by setting android:fromYScale=”1.0″ and android:toYScale=”0.0″ inside the scale tag.
Slide Down Animation
slide_down.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true"> <scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" /></set>
This is just the opposite of slide_up.xml
.
Bounce Animation
bounce.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/bounce_interpolator"> <scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" /></set>
Here bounce interpolator is used to complete the animation in bouncing fashion.
Sequential Animation
sequential.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator" >
<!-- Move -->
<translate
android:duration="800"
android:fillAfter="true"
android:fromXDelta="0%p"
android:startOffset="300"
android:toXDelta="75%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromYDelta="0%p"
android:startOffset="1100"
android:toYDelta="70%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromXDelta="0%p"
android:startOffset="1900"
android:toXDelta="-75%p" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromYDelta="0%p"
android:startOffset="2700"
android:toYDelta="-70%p" /> <!-- Rotate 360 degrees -->
<rotate
android:duration="1000"
android:fromDegrees="0"
android:interpolator="@android:anim/cycle_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="3800"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toDegrees="360" /></set>
Here a different android:startOffset is used from the transitions to keep them sequential.
Together Animation
together.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/linear_interpolator" >
<!-- Move -->
<scale
xmlns:android="https://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="4"
android:toYScale="4" >
</scale>
<!-- Rotate 180 degrees -->
<rotate
android:duration="500"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toDegrees="360" /></set>
Here android:startOffset
is removed to let them happen simultaneously.