Android Android Tutorials

Android Animation using XML resources

Written by Sabith Pkc Mnr

Have you ever know that people stick around your app if it contains well-maintained animations in it? Guess what? It is really easy to implement an animation to your app and you can make use of it in many cases like when the app is just started with a fade or slide in animation to a pop-up animation when a message or dialog is ready to display.

Android animations are of many types like fade in or out, slide, rotation, scale, bounce animation and so on. A single animation XML file and a line of code can help you insert animation into your application too. Here’s a real quick tutorial on adding animation to your Android Application.

Source code given at the bottom

Just by calling an AnimationListener method, will help the app to check whether the application is started, finished or repeating. You can include animations to your app, like this:

Let’s get started

I have added this tutorial on two variants, one you can watch and understand it or you can completely read this post. I suggest reading if you want to know each and every point repeatedly, this may take time ūüôā

Video Tutorial 

If you want a well-explained video tutorial, then you can watch the below video from my official YouTube channel.

 

Learn through reading 

As we said above, this method makes it easier and simplify the total number of lines required to write in MainActivity.

First of all, we have to create animation file, for example, like fade in and slide animation.

Here I have created some animations XML files. You can simply copy the codes given below and add an animation resource file according to that, also make adjustments according to you (only if required).

Step 1: Create animation resource file

Create a folder named anim inside the res folder of your project. Once you created the folder, now you can choose the animation type you required from the below items. When you find the one fit for you, then you can create an animation resource file simply by right-clicking on res folder and select New and on click on animation resource file give it any name you wish and paste the codes that you copied from your preferred animation type.

res folder

Fade in animation (XML)
Fade out animation (XML)
Zooming in
Zooming out
Motion
Rotation
Sliding Up
Scale Down
Bouncing
Blink

Understanding the animations

  • 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:
  • 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

Step 2: Add Animation code for animation element

This animation can be used on any type of widgets or views like Buttons, ImageViews, TextViews, etc. So, find one and animate it like this.

Here I created an Animation variable with name myAnimation and navigated it to the required animation resource file using the AnimationUtils.

Step 3: Animate the element by calling .setAnimation method

Here is an example of animating a TextView:
Likewise, animating some other stuff:
A sample MainActivity with animation added into it will look like this:
So, within following the steps up to here, you will able to add animation to your application. If you don’t want to go further more, then you can stop at here.

If you’re thinking of including some advanced animation features and go further with it, then you can also add AnimationListener to your java class through which you can track the animation state like animation started, animation finished¬†and¬†animation repeated. Below is the line giving an example of adding AnimationListener into your application.

As we said above, the onAnimationStart catches the instant point at which the animation just began. The onAnimationEnd look for the thing to do at the moment when the animation complete and the onAnimationRepeat get triggered if the animation kept repeating.

With all the animations methods and listeners added, here’s a sample of MainActivity complete file.

MainActivity.java

There you go! If you went up with any trouble while adding this codes to your project, then you can ask your question on below comment section. So, we are about to wrap up this tutorial and hope you guys got the idea from this tutorial. You can direct download the complete source code using the below button.

Source Code

Do you find this tutorial helpful? Do you think respecting the time I took to write this post? If so, please hit the below share buttons to share with your Android loving friends and family members and raise your support. Thank you!

About the author

Sabith Pkc Mnr

Internet Personality, YouTuber, Programmer & Web Entrepreneur! Working on the complete Android platform for more than 5 years!

Leave a Comment