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.,

android animations using xml

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.

android animations using xml

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.

android animation anim folder
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>

Step 2: Load the animation

Next in your activity create an object of Animation class. And load the xml animation using AnimationUtils by calling loadAnimation function.

public class FadeInActivity extends Activity{

	TextView txtMessage;

	// Animation
	Animation animFadein;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_fadein);

		txtMessage = (TextView) findViewById(R.id.txtMessage);

		// load the animation
		animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
				R.anim.fade_in);		
	}
}

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 started
onAnimationEnd – This will be triggered once the animation is over
onAnimationRepeat – This will be triggered if the animation repeats

public class FadeInActivity extends Activity implements AnimationListener {
.
.
.
// set animation listener
animFadein.setAnimationListener(this);
.
.
.
// animation listeners
	@Override
	public void onAnimationEnd(Animation animation) {
		// Take any action after completing the animation
		// check for fade in animation
		if (animation == animFadein) {
			Toast.makeText(getApplicationContext(), "Animation Stopped",
					Toast.LENGTH_SHORT).show();
		}

	}

	@Override
	public void onAnimationRepeat(Animation animation) {
		// Animation is repeating
	}

	@Override
	public void onAnimationStart(Animation animation) {
		// Animation started
	}

Step 4: Finally start the animation

You can start animation whenever you want by calling startAnimation on any UI element by passing the type of animation. In this example i am calling fade in animation on TextView.

// start the animation
txtMessage.startAnimation(animFadein);

Complete Code

Following is complete code for FadeInActivity

package info.androidhive.androidanimations;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class FadeInActivity extends Activity implements AnimationListener {

	TextView txtMessage;
	Button btnStart;

	// Animation
	Animation animFadein;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_fadein);

		txtMessage = (TextView) findViewById(R.id.txtMessage);
		btnStart = (Button) findViewById(R.id.btnStart);

		// load the animation
		animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
				R.anim.fade_in);
		
		// set animation listener
		animFadein.setAnimationListener(this);

		// button click event
		btnStart.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				txtMessage.setVisibility(View.VISIBLE);
				
				// start the animation
				txtMessage.startAnimation(animFadein);
			}
		});

	}

	@Override
	public void onAnimationEnd(Animation animation) {
		// Take any action after completing the animation

		// check for fade in animation
		if (animation == animFadein) {
			Toast.makeText(getApplicationContext(), "Animation Stopped",
					Toast.LENGTH_SHORT).show();
		}

	}

	@Override
	public void onAnimationRepeat(Animation animation) {
		// TODO Auto-generated method stub

	}

	@Override
	public void onAnimationStart(Animation animation) {
		// TODO Auto-generated method stub

	}

}

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.

1. Fade In
2. Fade Out
3. Cross Fading
4. Blink
5. Zoom In
6. Zoom Out
7. Rotate
8. Move
9. Slide Up
10. Slide Down
11. Bounce
12. Sequential Animation
13. Together Animation

Fade In

For fade in animation you can use <alpha> tag which defines alpha value. Fade in animation is nothing but increasing alpha value from 0 to 1.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>

Fade Out

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>

Cross Fading

Cross fading is performing fade in animation while other element is fading out. For this you don’t have to create separate animation file, you can just use fade_in.xml and fade_out.xml files.

In the following code i loaded fade in and fade out, then performed them on two different UI elements.

TextView txtView1, txtView2;
Animation animFadeIn, animFadeOut;
.
.
// load animations
animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
				R.anim.fade_in);
animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),
				R.anim.fade_out);
.
.
// set animation listeners
animFadeIn.setAnimationListener(this);
animFadeOut.setAnimationListener(this);

.
.
// Make fade in elements Visible first
txtMessage2.setVisibility(View.VISIBLE);

// start fade in animation
txtMessage2.startAnimation(animFadeIn);
				
// start fade out animation
txtMessage1.startAnimation(animFadeOut);

Blink animation is animating fade out or fade in animation in repetitive fashion. For this you will have to set android:repeatMode=”reverse” and android:repeatCount attributes.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <scale
        xmlns:android="http://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>

Zoom Out

Zoom out animation is same as zoom in but toXScale, toYScale values are lesser than fromXScale, fromYScale

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <scale
        xmlns:android="http://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>

Rotate

Rotate animation uses <rotate> tag. For rotate animation required tags are android:fromDegrees and android:toDegrees which defines rotation angles.

Clock wise – use positive toDegrees value
Anti clock wise – use negative toDegrees value

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>

Move

In order to change position of object use <translate> tag. It uses fromXDelta, fromYDelta for X-direction and toXDelta, toYDelta attributes for Y-direction.

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://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

Sliding animation uses <scale> tag only. Slide up can be achieved by setting android:fromYScale=”1.0″ and android:toYScale=”0.0″

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>

Slide Down

Slide down is exactly opposite to slide down animation. Just interchange android:fromYScale and android:toYScale values.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="1.0" />

</set>

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.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>

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.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >

    <!-- Use startOffset to give delay between animations -->


    <!-- 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>

Together Animation

Performing all animation together is just writing all animations one by one without using android:startOffset

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >

    <scale
        xmlns:android="http://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>

I hope you like this tutorial, feel free to ask any kind of questions in the comment section.

Thank You

Subscribe
Notify of
guest
142 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
paul getty
paul getty
7 years ago

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 !!!!!!

Ravi Tamada
7 years ago
Reply to  paul getty

Thank you Paul, same to you.

akhilesh
akhilesh
7 years ago
Reply to  Ravi Tamada

thanks a lot

arun
arun
7 years ago
Reply to  akhilesh

hi explain me clearly

Rajesh
Rajesh
7 years ago

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

Darshan
Darshan
7 years ago

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

Thanks..

Darshan

chhote lal pal
chhote lal pal
7 years ago

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
Darshan
7 years ago

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

Narendra Reddy
Narendra Reddy
7 years ago

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

RK
RK
7 years ago

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.

So please guide also on that issue.

Thank you.

Hussnain Azam
Hussnain Azam
7 years ago
Reply to  RK

i have the same question but did’nt got answer

Ravi Tamada
7 years ago
Reply to  Hussnain Azam

@d4c98aa5bca1b99e7d44fafa076fcf3e:disqus @hussnainazam:disqus I didn’t get you clearly guys. Please explain me little bit more

Hussnain Azam
Hussnain Azam
7 years ago
Reply to  Ravi Tamada

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
kartik
7 years ago
Reply to  Hussnain Azam

@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
Pranav Mahajan
7 years ago
Reply to  kartik

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

Akhil Srivas
Akhil Srivas
6 years ago
Reply to  kartik

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?

Muhammad Babar
Muhammad Babar
7 years ago
Reply to  Hussnain Azam

refer this link i have explained http://stackoverflow.com/a/15808679/1939564

amine
amine
7 years ago

very good job thanks!

er
er
7 years ago
Reply to  amine

yup!

Hernan
Hernan
7 years ago

Thank you Ravi!

Antony Kor
Antony Kor
7 years ago

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

VASU
VASU
7 years ago

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
Anusha
7 years ago

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

Anusha
Anusha
7 years ago

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

VASU
VASU
7 years ago

thanks

VASU
VASU
7 years ago

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 ?

İsmail Kocacan
İsmail Kocacan
7 years ago

Great Thanks.

rank
rank
7 years ago

great post

Gabriel Pozoz
7 years ago

It’s excellent this post, thanks a lot !!!

Surjit Sidhu
Surjit Sidhu
7 years ago

HI!
i want to animation behave like facebook comments box do.
please help me, how to do this.

Thank You

aid
aid
7 years ago

Thanks you sir, very nice tutorial. God bless

Anon
Anon
7 years ago

Hey Ravi, I’ve been following your tutorials since the original post- they’ve been fantastic in aiding my personal growth in the Android Development space. I can’t thank you enough. Thanks mate 🙂

Ravi Sharma
Ravi Sharma
7 years ago

this is very helpfull artical

Serysew
Serysew
7 years ago

Thanks a lot >>>>>>> Cool blog!!!!!!!!!!!!!

surabhi
surabhi
7 years ago

superb..really very much helpful

Minh Nguyen
Minh Nguyen
7 years ago

thank you very much. It’s really nice and clear

vinhnt.dev
7 years ago

thanks, this is a good tutorials

kenvin
kenvin
7 years ago

thanks you

Guest
Guest
7 years ago

123456

Devganiya hitesh
Devganiya hitesh
7 years ago

can we apply these animation to full xml page??????

Krishna Hrishitha
Krishna Hrishitha
7 years ago

Nice tutorial, it is useful one.

Eshan
Eshan
7 years ago

Great tutorial thanks

JAson
JAson
7 years ago

hi im jason can you give a code in swiping image with zoom in and out
thank you

Julio Vergara
Julio Vergara
7 years ago

Thanks a lot Ravi

nilkash
nilkash
7 years ago

Ossum Creation. Thank you for such a valuable post .. 🙂

Arun Yadav
Arun Yadav
7 years ago

Awesome tutorial… the way you explain and organize your tutorial its awesome. I learned Android from your blog and I’m really thankful to you.

Ravi Tamada
7 years ago
Reply to  Arun Yadav

You are welcome 🙂

ravi
ravi
5 years ago
Reply to  Ravi Tamada

welcome

Abdul Mohsin
Abdul Mohsin
7 years ago

Great Tutorial!!!……..very helpful . thanks

Anand Jain
Anand Jain
7 years ago

Thanks…Its an awesome tutorial. Everything explained in a very easy manner..

ravi
ravi
5 years ago
Reply to  Anand Jain

welcome

Rana Ranvijay Singh
Rana Ranvijay Singh
7 years ago

These tutorials are really helpful … thnx a lot dude.

Ravi Tamada
7 years ago

You are welcome 🙂

Rupesh
Rupesh
7 years ago

Awesome tutorial… the way you explain and organize your tutorial its
awesome. I learned Android from your blog and I’m really thankful to
you.

jukoor
jukoor
7 years ago

Nice Code, Nice Examples, perfect! Keep on this good work. maybe you could add to this tutorial how to start animation just after a few seconds (setStartOffset(5000)).

ShahNawaz Khan
ShahNawaz Khan
7 years ago

how to use these anims on activities?? i wanna get rid of that slide anim when an activity is called!

Zahuranecs
Zahuranecs
7 years ago

Is there any way to stop a slide up activity when it reaches a certain point?

Pranav Mahajan
Pranav Mahajan
7 years ago

Great tutorial!!!

Q- If in move.xml I want to move some button from its current position to 25% towards left. Then how do I calculate fromXDelta & toXDelta??

Raheel Adnan
Raheel Adnan
7 years ago

Great Tutorial

Khosbayar
Khosbayar
7 years ago

hey guys i have a prob,
how to use zoom in with zoom out ?
i want to zoom out shape first, then zoom in my shape back
how how how????
Please help me guys!!!

Hemant
Hemant
6 years ago
Reply to  Khosbayar

Set android:fillAfter=”false”.

It will set the view into original shape after animation.

Kukku
Kukku
6 years ago

Just Miracle…thanks..

Yadu Nandan
6 years ago

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
Suvi
6 years ago

Thans a lot…. This is really helpful….

Anand
Anand
6 years ago

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

me
me
6 years ago

This is a great tutorial for beginners. Thanks dude.

142
0
Would love your thoughts, please comment.x
()
x