Animations with Android tutorial

This tutorial explains what animation is and how to use animations in your Android application with the help of an example.

Animations

Do you know what animations are? Animation is actually illusion of motion. It is a technique in which successive images which differs very lightly creates effect of motion. Animations are very useful in mobile applications. Animation in education is used to explain theories and concepts. Animations in applications in used to show some guidelines or procedures. Adding animations to Android application increases user additivity. It adds fun and smooths the user experience. In this tutorial you will learn how to increase user experience by adding animations in your Android app.

Animation in Android

Android provides a class called Animations. This class provides many different methods. Here are few of them:

• loadAnimation( context, layout): This method is used to load animation. It has two parameters.
• start(): Used to start animation.
• setDuration( long duration): This method sets duration of animation in Android.
• getDuration( ): Used to get duration of Android animation.
• end(): Used to end animation.
• cancel(): Used to cancel animation.

Animation example in Android

Lets start creating example for animation in Android. I will discuss four types of animations that is blink, fade, clockwise and slide. Open your Android Studio and create a new activity. In main activity there is one image view and a button. I used image of a football. Here is the code for activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="368dp"
    android:layout_height="495dp"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="8dp"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">


    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="JavaTutorial"
            android:id="@+id/textView2"
            android:textColor="#ff3eff0f"
            android:textSize="35dp"
            android:layout_centerHorizontal="true" />

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:id="@+id/imageView"
            android:src="@drawable/football"
            android:layout_below="@+id/textView2"
            android:layout_alignRight="@+id/textView2"
            android:layout_alignEnd="@+id/textView2"
            android:layout_marginTop="50dp" />


    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="59dp"
        android:backgroundTint="@color/colorAccent"
        android:onClick="Animation"
        android:text="Animation" />



    </RelativeLayout>

Now create four  layouts file for blink animation, fade animation, clockwise animation and slide animation. Here is the code for blink_animation.xml

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

Here is the code for fade_animation.xml

<?xml version="1.0" encoding="utf-8"?>

    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator" >

        <alpha
            android:fromAlpha="0"
            android:toAlpha="1"
            android:duration="2000" >
        </alpha>

        <alpha
            android:startOffset="2000"
            android:fromAlpha="1"
            android:toAlpha="0"
            android:duration="2000" >
        </alpha>

    </set>

Here is the code for clockwise_animation.xml

<?xml version="1.0" encoding="utf-8"?>

       <set xmlns:android="http://schemas.android.com/apk/res/android">

        <rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromDegrees="0"
            android:toDegrees="360"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="5000" >
        </rotate>

        <rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:startOffset="5000"
            android:fromDegrees="360"
            android:toDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="5000" >
        </rotate>

    </set>

Here is the code for slide_animation.xml

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

Now create a java class MainActivity.java and paste the following code

package com.example.admin.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.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
    int count=0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void Animation(View view){
        if(count==0){
            ImageView image = (ImageView)findViewById(R.id.imageView);
            Animation animation = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.clockwise_animation);
            image.startAnimation(animation);
        }
        if(count==1){
            ImageView image = (ImageView)findViewById(R.id.imageView);
            Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.fade_animation);
            image.startAnimation(animation1);
        }
        if(count==2){
            ImageView image = (ImageView)findViewById(R.id.imageView);
            Animation animation1 =
                    AnimationUtils.loadAnimation(getApplicationContext(),
                      R.anim.blink_animation);
            image.startAnimation(animation1);
        }
        if(count==3){
            ImageView image = (ImageView)findViewById(R.id.imageView);
            Animation animation1 =
                    AnimationUtils.loadAnimation(getApplicationContext(),
                            R.anim.slide_animation);
            image.startAnimation(animation1);
            count=0;
        }
        count++;

    }

}

When user clicks on animation button first time that is count=0 then the image will rotate clockwise. When user clicks second time that is count=1, then the image will fade. When user clicks for the third time that is count=2 then image will start blinking. And for the fourth time that is count=3 then the image will show slide animation. Now run this and here is the output

Here is the output when it blinks

You can download this tutorial by clicking this link.

Resources

Official Android Animations Guide