Android Animations | Everything about android animations

In this tutorial, we’re going to implement animations in android. The animation is the process of creating motion and shape change. Animation in android is possible in many ways. In this tutorial, we will discuss one easy and widely used way of making animation called Tweened animation.

Tween Animation

The Tween Animation takes some parameters such as start value, end value, size, time duration, rotation angle, etc, and perform the required animation on that object. It can be applied to any type of object. So to use this, android has provided us a class called Animation.

To perform animation in android, we are going to call a static function loadAnimation() of the class AnimationUtils. We are going to receive the result in an instance of the Animation Object. Its syntax is as follows –

Android Animation

The basic ways of animation that we’ll look upon in this tutorial:

  • Zoom In
  • Zoom Out
  • Fade In
  • Fade Out
  • Slide Left
  • Slide Right
  • Slide Up
  • Slide Down
  • Zoom In + Fade In
  • Zoom Out + Fade Out
  • Rotate
  • Move

Android Animation Example XML

We create a Resource Directory under the res directory names anim to hold all XML files containing the animation logic. Following is a simple XML file showing an android animation code logic

fade_in.xml

  • android: interpolator : It is the rate of the change in animation. We can define our own interpolator. Here we’ll use the inbuild interpolator.
  • android: duration : Duration of the animation in which the animation should complete. Here 1000ms is used.
  • android:fillAfter : this property specifies whether the view should be visible or hidden at the end of the animation. If you set the value to false, the element changes to its previous state after the animation.
  • android:fromTRANSFORMATION & android:toTRANSFORMATION : these properties are used to start and end the animations.
  • android:repeatMode : to repeat the animation.
  • android:repeatCount : this defines the number of repetitions on animation.

Loading animation when UI widget is clicked

The main aim is to show the animation when any widget (let’s say an ImageView) 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:

To start the animation we need to call the startAnimation() function on the UI element as shown in the snippet below:

Here we perform the animation on an Image view component by passing the type of Animation as the parameter.

Setting the Animation Listeners

These parameters are only needed when we want 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 stared
  • onAnimationEnd : this will be triggered once the animation is over
  • onAnimationRepeat: this will be triggered if the animation repeats.

Android Animation Project Structure

As you can see, we’ve included all animation XML files.

All the Android Animation Examples XML code

Here I am providing sample code for the most common android animations.

Zoom In Animation

zoom_in.xml

Here pivotX=”50%” and pivotY=”50%” is used to perform zoom from the center of the element.

Zoom Out Animation

zoom_out.xml

Notice that android:to and android:from are opposite in zoom_in.xml and zoom_out.xml.

Fade In Animation

fade_in.xml

Here alpha references the opacity of an object. Object with a low alpha value is more transparent, while an object with a high alpha value is less transparent, more opaque. Fade-in animation is nothing but increasing the alpha value from 0 to 1.

Fade Out Animation

fade_out.xml

It is exactly opposite to fade in, where we need to decrease the alpha value from 1 to 0.

Slide Left Animation

slide_left.xml

It’s achieved by setting android:fromXScale=”1” and android:toXScale=”0” inside the scale tag.

Slide Right Animation

slide_right.xml

It’s achieved by setting android:fromXScale=”0” and android:toXScale=”1” inside the scale tag.

Slide Up Animation

slide_up.xml

It’s achieved by setting android:fromYScale=”1” and android:toXScale=”0” inside the scale tag.

Slide Down Animation

slide_down.xml

It’s achieved by setting android:fromYScale=”0” and android:toXScale=”1” inside the scale tag.

Zoom In and Fade In animation

zoom_in_fade_in.xml

It’s the combination of the zoom in and fade in animation.

Zoom Out and Fade Out Animation

zoom_out_fade_out.xml

It’s the combination of the zoom out and fade out animation.

Move Animation

move.xml

Rotate Animation

rotate.xml

from/toDegrees tag is used here to specify the degrees and cyclic interpolator is used.

Code

The activity_main.xml layout consists of a Linear Layout and ScrollView with TableRow in which every animation type is invoked on the image using their respective buttons. The XML is shown below:

activity_main.xml

The MainActivity.java file contains the onClick Listeners for every button related to its animation type. It’s source code is given below:

As discussed above each imageView animation is started by invoking the respective animation object in which the animation logic is loaded by AnimationUtils.loadAnimation() method.

Below is the result of the all animations.

Output

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Hi everyone, myself Golap an Android app developer with UI/UX designer.