Android Animations with Examples

In android, Animations are used to change the appearance and behavior of the objects over a particular interval of time. The animations will provide a better look and feel high-quality user interface for our applications.

 

Generally, the animations are useful when we want to notify users about the changes happening in our app, such as new content loaded or new actions available, etc.

 

We have a different type of animations available in android, here we will discuss the most commonly used android animations such as zoom in / zoom out, fade in / fade out, slide up / slide down and rotate clockwise or anti-clockwise, etc. with examples.

 

To create an animation effect on the objects in our android application, we need to follow the below steps.

Create XML File to Define Animation

We need to create an XML file that defines the type of animation to perform in a new folder anim under res directory (res à anim à animation.xml) with the required properties. In case, anim folder not exists in res directory, create a new one.

 

Following is the example of creating XML files under anim folder to define slide up / down animation properties.

 

Android Animations Example Create Anim Folder

 

The XML files will contain the code like as shown below based on the type of animation.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <
scale
       
android:duration="500"
       
android:fromXScale="1.0"
       
android:fromYScale="0.0"
       
android:toXScale="1.0"
       
android:toYScale="1.0" />
</
set>

In case if we want to use different type of animations such as fade in / out, zoom in / out, etc. we need to create a new xml files in anim folder with required properties.

 

The following are some of the important animation attributes that will help us to change the behavior of animation in our application.

 

AttributesDescription
android:duration It is used to define the duration of the animation to complete.
android:startOffset It is used to define the waiting time before the animation starts.
android:interpolator It is used to define the rate of change in animation.
android:repeatMode It is useful when we want to repeat our animation.
android:repeatCount It is used to define the number of times the animation repeats. In case if we set infinite, the animation will repeat infinite times.
android:fillAfter It is used to define whether to apply animation transformation after the animation completes or not.

Android Load and Start the Animation

In android, we can perform animations by using AnimationUtils component methods such as loadAnimation(). Following is the code snippet of loading and starting an animation using loadAnimation() and startAnimation() methods.

 

ImageView img = (ImageView)findViewById(R.id.imgvw);

Animation aniSlide = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up);
img.startAnimation(aniSlide);

If you observe above code snippet, we are adding an animation to the image using loadAnimation() method. The second parameter in loadAnimation() method is the name of our animation xml file.

 

Here we used another method startAnimation() to apply the defined animation to imageview object.

Different Types of Android Animations

In android, we have different types of animations such as Fade In / Fade Out, Zoom In / Zoom Out, Slide Up / Slide Down, Rotate in Clockwise or Anti-Clockwise, etc.

 

Now we will see how to create each animation with required properties in the android application.

Android Fade In / Out Animation

To use Fade In or Fade Out animations in our android applications, we need to define a new XML file with <alpha> tag like as shown below.

 

For Fade In animation, we need to increase the alpha value from 0 to 1 like as shown below.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
   <
alpha
       
android:duration="2000"
       
android:fromAlpha="0.1"
       
android:toAlpha="1.0">
    </
alpha>
</
set>

For Fade Out animation, we need to decrease the alpha value from 1 to 0 like as shown below.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   
android:interpolator="@android:anim/linear_interpolator">
    <
alpha
       
android:duration="2000"
       
android:fromAlpha="1.0"
       
android:toAlpha="0.1" >
    </
alpha>
</
set>

To know more about Fade In and Fade Out animations check this, Android Fade In / Out Animations with Examples.

Android Slide Up / Down Animation

To use Slide Up or Slide Down animations in our android applications, we need to define a new XML file with <scale> tag like as shown below.

 

For Slide Up animation, we need to set android:fromYScale="1.0" and android:toYScale="0.0" like as shown below.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <
scale
       
android:duration="500"
       
android:fromXScale="1.0"
       
android:fromYScale="1.0"
       
android:toXScale="1.0"
       
android:toYScale="0.0" />
</
set>

For Slide Down animation, we need to set android:fromYScale="0.0" and android:toYScale="1.0"  like as shown below. 

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <
scale
       
android:duration="500"
       
android:fromXScale="1.0"
       
android:fromYScale="0.0"
       
android:toXScale="1.0"
       
android:toYScale="1.0" />
</
set>

To know more about Slide Up and Slide Down animations check this, Android Slide Up / Down Animations with Examples.

Android Zoom In / Out Animation

To use Zoom In or Zoom Out animations in our android applications, we need to define a new XML file with <scale> tag like as shown below.

 

For Zoom In animation, we need to set android:pivotX="50%" and android:pivotY="50%" to perform the zoom from the centre of the element. Also, we need to use fromXScalefromYScale attributes to define the scaling of an object and we need keep these values lesser than toXScaletoYScale like as shown below.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <
scale
       
xmlns:android="http://schemas.android.com/apk/res/android"
       
android:duration="1000"
       
android:fromXScale="2"
       
android:fromYScale="2"
       
android:pivotX="50%"
       
android:pivotY="50%"
       
android:toXScale="4"
       
android:toYScale="4" >
    </
scale>
</
set>

In android, Zoom Out animation is same as Zoom In animation but fromXScalefromYScale attribute values must be greater than toXScaletoYScale like as shown below.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <
scale
       
android:duration="2500"
       
android:fromXScale="1.0"
       
android:fromYScale="1.0"
       
android:pivotX="50%"
       
android:pivotY="50%"
       
android:toXScale=".2"
       
android:toYScale=".2" />
</
set>

To know more about Zoom In and Zoom Out animations check this, Android Zoom In / Out Animations with Examples.

Android Rotate Clockwise / Anti Clockwise Animation

To use Rotate animation in our android applications, we need to define a new XML file with <rotate> tag like as shown below.

 

To Rotate animation in Clockwise, we need to set android:fromDegrees and android:toDegrees property values and these will define a rotation angles like as shown below.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/cycle_interpolator">
    <
rotate android:fromDegrees="0"
       
android:toDegrees="360"
       
android:pivotX="50%"
       
android:pivotY="50%"
       
android:duration="5000" />
</
set>

To Rotate animation in Anti Clockwise, we need to set android:fromDegrees and android:toDegrees property values and these will define a rotation angles like as shown below.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/cycle_interpolator">
    <
rotate android:fromDegrees="360"
       
android:toDegrees="0"
       
android:pivotX="50%"
       
android:pivotY="50%"
       
android:duration="5000" />
</
set>

To know more about Rotate animations check this, Android Rotate Clockwise / Anti Clockwise Animations with Examples.

 

This is how we can use different types of animations in android applications based on our requirements.