Android Animations using Java

The animation is a method in which a collection of images is combined in a specific way and processed then they appear as moving images. Building animations make on-screen objects seems to be alive. Android has quite a few tools to help you create animations with relative ease. So in this article, let’s learn to create android animations using Java. 

Table of Attributes

XML ATTRIBUTES	DESCRIPTION
android:id	Sets unique id of the view
android:duration	Used to specify the duration of the animation
android:fromDegrees	Starting angular position (in degrees)
android:toDegrees	Ending angular position (in degrees)
android:fromXScale	Starting X size offset
android:toXScale	Ending of X size offset
android:fromYScale	Starting Y size offset
android:toYScale	Ending of Y size offset
android:fromAlpha	Starting alpha value for the animation (1.0 means fully opaque and 0.0 means fully transparent)
android:toAlpha	Ending alpha value
android:fromYDelta	Change in Y coordinate to be applied at the beginning of the animation
android:toYDelta	Change in Y coordinate to be applied at the end of the animation
android:pivotX	Represents the X-axis coordinates to zoom from the starting point
android:pivotY	Represents the Y-axis coordinates to zoom from the starting point
android:interpolator	It defines the rate of change of an animation
android:startOffset	Delay occurs when an animation runs (in ms), once start time is reached

How to add animation in Android using Java

Step 1: Create a New Project

• Start Android Studio (version > 2.2)
• Go to File -> New -> New Project.
• Select Empty Activity and click on next
• Select minimum SDK as 21
• Choose the language as Java and click on the finish button.
• Modify the following XML and java files.

Step 2: Modify activity_main.xml file

In the XML file, we have added an ImageView, TextView, and Button inside the RelativeLayout.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/RL1"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="150dp"
        android:layout_below="@id/textView0"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp"
        android:visibility="visible"
        android:src="@drawable/logo2" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="4 common animations in android"
        android:layout_below="@id/imageView1"
        android:layout_marginTop="50dp"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:fontFamily="sans-serif"
        android:textSize="50px"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Blink"
        android:layout_below="@id/textView1"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="40dp"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Slide"
        android:layout_below="@id/textView1"
        android:layout_alignParentRight="true"
        android:layout_marginRight="50dp"
        android:layout_marginTop="40dp"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Rotate"
        android:layout_below="@id/button1"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="30dp"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Zoom"
        android:layout_below="@id/button2"
        android:layout_alignParentRight="true"
        android:layout_marginRight="50dp"
        android:layout_marginTop="30dp"/>

</RelativeLayout>

Step 3: Add these XML files to the anim directory

After modifying the layout we will create XML files for animations. So we will first create a folder name anim. In this folder, we will be adding the XML files which will be used to produce the animations. For this to happen, go to app/res right-click and then select Android Resource Directory and name it as anim. 

Some Common Types of Animations in Android are,

1. Blink – Hides the object for 0.6 to 1 second.
2. Slide – Move the object either vertically or horizontally to its axis.
3. Rotate – Rotate the object either clockwise or anti-clockwise.
4. Zoom – Zoom in or out the object in the X and Y-axis.

blinks.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="700"
      android:repeatMode="reverse"
      android:repeatCount="infinite"/>
</set>

rotate.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="2500" >
   </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="2500" >
   </rotate>

</set>

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

zoom.xml

<?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:fromXScale="0.5"
      android:toXScale="3.0"
      android:fromYScale="0.5"
      android:toYScale="3.0"
      android:duration="4000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>

   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromXScale="3.0"
      android:toXScale="0.5"
      android:fromYScale="3.0"
      android:toYScale="0.5"
      android:duration="4000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>

</set>

Step 4: Modify MainActivity.java

To perform animation in android, we have to call a static function loadAnimation() of the class AnimationUtils. We get the result in an instance of the Animation Object. Syntax to create animation object:

Animation object = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.ANIMATIONFILE);

To apply the above animation to an object(Let say in an image), we have to call the startAnimation() method of the object. Syntax to call the method:

ImageView image = findViewById(R.id.imageID); 

image.startAnimation(object);

Methods of animation class:

Method	Description
startAnimation(object)	Starts the animation
setDuration(long duration)	Sets the duration of animation
getDuration()	Gets the duration of animation
end()	Ends the animation
cancel()	Cancels the animation

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ImageView logo;
    Button blink, slide, rotate, zoom;

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

        // GFG logo
        logo = findViewById(R.id.imageView1);

        // blink button
        blink = findViewById(R.id.button1);

        // slide button
        slide = findViewById(R.id.button2);

        // rotate button
        rotate = findViewById(R.id.button3);

        // zoom button
        zoom = findViewById(R.id.button4);

        // blink button listener
        blink.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                // call a static function loadAnimation()
                // of the class AnimationUtils
                Animation object
                    = AnimationUtils
                          .loadAnimation(
                              getApplicationContext(),

                              // blink file is in anim folder
                              R.anim.blinks);
                // call the startAnimation method
                logo.startAnimation(object);
            }
        });
        // slide button listener
        slide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                // call a static function loadAnimation()
                // of the class AnimationUtils
                Animation object
                    = AnimationUtils
                          .loadAnimation(

                              getApplicationContext(),

                              // slide file is in anim folder
                              R.anim.slide);

                // call the startAnimation method
                logo.startAnimation(object);
            }
        });

        // rotate button listener
        rotate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                // call a static function loadAnimation()
                // of the class AnimationUtils
                Animation object
                    = AnimationUtils
                          .loadAnimation(
                              getApplicationContext(),

                              // rotate file is in anim folder
                              R.anim.rotate);

                // call the startAnimation method
                logo.startAnimation(object);
            }
        });

        // zoom button listener
        zoom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                // call a static function loadAnimation()
                // of the class AnimationUtils
                Animation object
                    = AnimationUtils
                          .loadAnimation(
                              getApplicationContext(),

                              // zoom file is in anim folder
                              R.anim.zoom);

                // call the startAnimation method
                logo.startAnimation(object);
            }
        });
    }
}

Output: Run on Emulator