Skip to content
Related Articles

Related Articles

Android Animations using Java

Improve Article
Save Article
Like Article
  • Difficulty Level : Hard
  • Last Updated : 23 Feb, 2021

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 ATTRIBUTESDESCRIPTION
android:idSets unique id of the view
android:durationUsed to specify the duration of the animation
android:fromDegreesStarting angular position (in degrees)
android:toDegreesEnding angular position (in degrees)
android:fromXScaleStarting X size offset
android:toXScaleEnding of X size offset
android:fromYScaleStarting Y size offset
android:toYScaleEnding of Y size offset
android:fromAlphaStarting alpha value for the animation
(1.0 means fully opaque and 0.0 means fully transparent)
android:toAlphaEnding alpha value
android:fromYDeltaChange in Y coordinate to be applied at the beginning of the animation
android:toYDeltaChange in Y coordinate to be applied at the end of the animation
android:pivotXRepresents the X-axis coordinates to zoom from the starting point
android:pivotYRepresents the Y-axis coordinates to zoom from the starting point
android:interpolatorIt defines the rate of change of an animation
android:startOffsetDelay 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: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"?>
   <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"?>
  
   <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"?>
   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"?>
  
   <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
 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!