Photo by Possessed Photography on Unsplash

Animations give us an idea that what’s going on in our application. It gives a polished look and feel. They are especially useful in how it is changing the UI with new content or new actions.

Android gives a class called Animation. It is the abstract Parent class of Translate Animation, Rotate Animation, and so on.

we can do the Animation by writing the code in an XML file or directly in a java file. As with defining the layout, an XML file is recommended because it’s reusable, readable, and easy to understand.

To perform Animation in android, we need to follow some steps

  1. To create a new android application in android studio.
  2. Inside the res folder, creates a folder name called anim that holds all animation files like fade_in, rotate, and so on.
  3. In the java file we have to load the animation by using loadAnimation() with the class called AnimationUtils and we get the result in the instance of the object of animation.

second parameter refers the animation.xml file creates under res directory res->anim->myanimation.

4. After loading the animation we have to start the animation by using startAnimation() inside the braces we have to specify the animation object.

The Animation class has many functions given below:

1.start(): This method will start the animation.

2.setDuration(long duration): This method sets the duration of an animation.

3.getDuration(): This method gets the duration.

4.end(): This method ends the animation.

5.cancel(): This method cancels the animation.

Android specifies three types of Animations. They are:

  1. View Animation
  2. Drawable Animation
  3. Property Animation

In this article, we will see about the View Animation

It defines the animation that can be applied to text views, image views, and buttons. We can use the ViewAnimation system to perform the Tween Animation then We can call it Tween Animation.

Tween Animation- It takes some parameters like start point, endpoint, rotates, and so on. It performs a series of transformations on the content of a view object. For example, If u have a button we can add animations like rotate, scale, transformation, alpha, and so on.

The animations like the rotate, scale are created under the anim folder we are having separate codes for each animation. For some animations, we are using Interpolator.

Interpolator defines the rate of change of animation. It is used to traverse the paths from(0,0) to(1,1). It can be used to apply additional animations.

  1. AccelerateDeccelerateInterpolator- It defines the moving starts and ends slowly but it moves fast in the middle.
  2. AccelerateInterpolator- The moving of a view starts slowly but it accelerates until it reaches the final stage.
  3. AnticipateInterpolator- The view changes start in the backward and then flings forward.
  4. AnticipateOvershoot Interpolator- The view changes start in the backward and then flings forward and overshoots the target value and reset to the final value.
  5. Bounce Interpolator- The view bounces at the end.
  6. Cycle Interpolator- It repeats the animations a specific number of times.
  7. Decelerate Interpolator- The moving of a view starts quickly and then it decelerates.
  8. Linear Interpolator- The moving of a view remains constant. It is the default interpolator of all animations.
  9. Overshoot Interpolator- The moving of a view changes the flings forward and overshoots the last value and then comes back.
  10. Path Interpolator- It traverse the path from point(0,0) to(1,1). The X co_ordinate takes the path of the input and output is the Y co_ordinate of the line at that point.

We will see some examples of View Animation. They are

  1. Fade_in &Fade_out-This animation is used on the Views and we can customize it according to our requirements. In the below code we are using Alpha Animation.

Alpha Animation-Transparency of the view can be changed in the animation.

2.Slide Animation- We can apply on views. Based on the fromXscale & Yscale attributes we can customize the slide animation. In the below code we are using Scale Animation.

Scale Animation- It is used to make smaller or larger views on X-axis & Y-axis. Pivot can also be specified where we want the animation to take place.

3.Clockwise Animation- From this animation, we can rotate the views based on the degrees and the pivot points. In the below code we use Rotate Animation.

Rotate Animation- It is used to rotate a view around a pivot point by using certain degrees.

In this article we’ve learned about the animations and some important functions of animations and Interpolator and types of Interpolator how these are used for animation and some examples of view Animations

In my next article I’m writing the remaining two animations with examples, be sure to follow me to see when it is posted.

Android Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store