Android Working with XML Animations

Adding animations to your app interface will give high quality feel to your android applications. Animations can be performed through either XML or android code. In this tutorial i explained how to do animations using XML notations. I will explain how to do the same using android java code in future tutorials. Here i covered basic android animations like fade in, fade out, scale, rotate, slide up, slide down etc.,

In the source code project provided in this tutorial, I wrote separate activity and XML for each animation. Download and play with the code to get familiar with the animations. Following are list of animations covered in this article.

Basic steps to perform animation

Following are the basic steps to perform an animation on any UI element. Creating animation is very simple, all it needs is creating necessary files and write small pieces of code.

Step 1: Create xml that defines the animation

Create an xml file which defines type of animation to perform. This file should be located under anim folder under res directory (res ⇒ anim ⇒ animation.xml). If you don’t have anim folder in your res directory create one. Following is example of simple fade in animation.

Step 3: Set the animation listeners (Optional)

If you want to listen to animation events like start, end and repeat, your activity should implements AnimationListener. This step is optional. If you implement AnimationListener you will have to override following methods.

onAnimationStart – This will be triggered once the animation startedonAnimationEnd – This will be triggered once the animation is overonAnimationRepeat – This will be triggered if the animation repeats

Important XML animation attributes

When working with animations it is better to have through knowledge about some of the important XML attributes which create major differentiation in animation behavior. Following are the important attributes you must known about.

android:duration – Duration of the animation in which the animation should complete

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:interpolator – It is the rate of change in animation

android:fillAfter – This defines whether to apply the animation transformation after the animation completes or not. If it sets to false the element changes to its previous state after the animation. This attribute should be use with <set> node

android:repeatMode – This is useful when you want your animation to be repeat

android:repeatCount – This defines number of repetitions on animation. If you set this value to infinite then animation will repeat infinite times

Some useful animations

Following i am giving xml code to perform lot of useful animations. Try to assign different values to xml attributes to see change in animations.

Zoom In

For zoom use <scale> tag. Use pivotX=”50%” and pivotY=”50%” to perform zoom from the center of the element. Also you need to use fromXScale, fromYScale attributes which defines scaling of the object. Keep these value lesser than toXScale, toYScale

Bounce

Bounce is just an animation effect where animation ends in bouncing fashion. For this set android:interpolator value to @android:anim/bounce_interpolator. This bounce can be used with any kind animation. Following slide down example uses bounce effect.

Sequential Animation

If you want to perform multiple animation in a sequential manner you have to use android:startOffset to give start delay time. The easy way to calculate this value is to add the duration and startOffset values of previous animation. Following is a sequential animation where set of move animations performs in sequential manner.

Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: ravi@androidhive.info

awesome God bless you, this just came in timely for me, please keep posting more tutorial, i always look forward to your tutorials!! Simply awesome, am from nigeria and your tutorial has been handy and useful. Thank you once again! God Bless you !!!!!!

Hi Ravi , i love your site. i am begginer and learning android from most of your posts.
God job… Keep it up….

Darshan

nice tutorial……..it just helped me lot to complete my task…

Thanks..

Darshan

chhote lal pal

Dear As your keep posting more tutorial, i always look forward to your tutorials!! and your tutorial has been handy and useful. that way i had start up development help up tutorials. God Bless you !!!!!!

Darshan

how to implement that facebook login screen type of application supporting both landscape as well portrait mode…

Narendra Reddy

Ravi,Nice Post It helped me a lot….Great work

RK

Really nice one. Thanks a lot.

I have one question,

Animation does not really moves the layout so it’s position on the display remains the same. So if we have one button in layout and doing animation on that will lose button click.

lets assume i have a button with on-click listener at position x.after animation i move it to position x+10.though the button moves but click listener doesn’t work in this new position.listener remain bind to old position

kartik

@Hussnain Azam If you want that click listener should work for the button after the animation , you have to use object animation. It always keep the functionality of the view.

Pranav Mahajan

What exactly do u mean by abject animation. Can u give some example or link

Akhil Srivas

All is ok with translation and after the animation ends. Now I have the same problem with a set of buttons in rotation and i’m trying to call onClick while rotating. So what to do if i need to call DURING animation? If i need to use object animation can u give me the details please?

Excelent! I have been waiting for this. Once again, excelent work Ravi, keep it up! 🙂

VASU

Hi ravi its awesome can you post an article for photo editing like adding comments,drawing some symbols on pic and saving that pic in mysql database
no one is providing photo editing content ……………………
please provide some example on this RAVI

Anusha

Thank you ravi .you are helping so much for beginners.i am following your tutorial itself.

Anusha

i am new to android and animations.How we can animate the background colors and add to the application.

VASU

thanks

VASU

Its awesome ravi
can you post some article on PHOTO EDITING IN ANDROID LIKE DRAWING SYMBOLS ON THE PIC AND SAVING THAT EDITED PIC IN DB………..
i searched many blogs ravi no one is providing this information……………..
please help us in this topic ravi
can you post some example on photo editing ?

Thanks a lot, It is really cool!! but I have one error:
after adding the xml files to android anim folder as you said, the eclipse cannot recognize it and is thus resulting in an error whenever i’m trying to load the animation.

Suvi

Thans a lot…. This is really helpful….

Anand

I am unable to download source code. Please help me.

me

This is a great tutorial for beginners. Thanks dude.

Kirill

Thank You very much! You have a talent of well-structured explanation!

Vektor

Really nice info here, I wonder if you can create a curl page animation using the same technique.

Mtuli

can you help me, i want to draw a soccer field and make circles to represent players

Dieguillo App

Very very good post, congrats

Aamir

very helpful and clear article easy to understand thanks.

Aamir

beautifully explained

jun

Can you help me i want to develop an anime that talks like human using Android animation

Ayuchuco!

Nice and neat tutorial!!!
But I have one question….. how do I achieve an animation like “slide up” but instead of “shrinking” the image from bottom to up, I want it to “expand” it from bottom to up???

Project Hydrux

Not gonna lied, you have remarkable tutorials

sidhi

its very helpful.. thank you 🙂

Kris

hi Ravi, your tutorials are really helpful, can you try to post one with showing how to animate listview on activity open or page load

you got it?, then can you explain where I can find it, because in my file this won’t work :/

Henry

Thank you!!!!

ajay

sir i used translate.xml in my android project.

But when i display the bottom and top dimension of view using Log.i(“top”,””+view.getBottom). It shows a constant value. Don’t know what is the problem? Should i implement it programatically ?
Please provide the solution asap.

shivi

excellent it helps me alot during work :):)

Augstin

I cannot begin to thank you for the tutorial. Thanks to you I have finished my game and uploaded on google play.
Here is the link if you are interested.

Awesome. My first practice with android animation. Explained very well. Keep it up . Thanks sir.

Micheal

Thanks for the tutorial. But, I’m confuse with anim/accelarate_interpolator part. Is that something you decide? or it’s from Android library? btw, I super super new to Android. Thanks again

tejdeep

it’s really awsome i understand very well

nnns

good yar ………..thanks

Champak

THnx yaar.

champak

welcome yaar

sandhu

good

abhishek

not able to download the code

Mohit garg

hello sir

i want to make

Genie Effect Animation. Can u please me .How to make this animation

thanks

Muhammad Usman

Can i make ‘Button Up’ then ‘Button Down’ infinitely:
button goes up smoothly but goes down with a glitch, i think its because “Up animation” is infinite it starts again, without letting it go down.
my code is:

I just want to create zoom in constantly animation like shareit recived friend search animation. For this issue i created a shpe and set in view. but when i m starting one animation 2nd animation need to start first animation after some moment and it will be going constantly. could u help me ???

Albert Newton

So create it.
Why are you telling us.

Sachin Gowda

what an idiot… : |

Prerna Gupta

I want to know more about android animations and its properties
theoretically. Can anyone tell me from where I can get the material for
the same? Any Link would be helpful. Thanx in advance.

Thank you so much.. that was so helpful . But , I have a problem when in text file i use a font and run your code in my program, At the first ,the font get back to that former font and after that , i mean for the second time pressing the button, It start to fade in.. I think it has a problem for running with font in txt file.

Deepak

Tnk u bro 🙂

Aqeel Tamimi

Thank you very much. It is valuable and helpful. Shokran شكرا

Raju Thomas

Hi Ravi,
While using the rotation animation, i seems like lagging. Can’t feel it as continuous rotation. I tried adjusting duration, interpolator . But still the same.. How to make it feel like continuous rotation without lag?

Sir , can you provide lessons on animation with layout ?
Is it possible to make our app look like ios apps(with the help of animations)?

apchar

cat you just give us a simple download link? I’m not handing out access to my social accounts. That’s insane.

Alex Mugo

This is great! now I have understood animations.

Devesh Vyas

Hi Ravi,
Another Great tutorial, I have followed almost all the tutorials of yours and they helped me a mot iin learning android. I am moving into AR/VR space, do you have any tutorials for Android VR using VR SDK or Cardboard SDK. I am really looking forward for such tutorials.

I am using something like this and the images on screen disappeared after some time I start to run the activity, When we set the anim.setRepeatCount(INFINITE); to anim.setRepeatCount(0); the images on screen does not disappear. Is there any relation in between repeat count and image visibility. It is not the image animating is disappearing. It is another image on the screen get disappeared when we touch them.

NaveenReddy N

Hi Ravi,
I have followed almost all the tutorials of yours and they helped me a mot in learning android.
In my app i need to disappeared the image with Vanish animation effect like the below link. Please help me if there is any possibility.Thanks in Advance…