Android Animations using Java

0 0 4 minutes read

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,

Blink – Hides the object for 0.6 to 1 second.
Slide – Move the object either vertically or horizontally to its axis.
Rotate – Rotate the object either clockwise or anti-clockwise.
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);
            }
        });
    }
}