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,
- 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); } }); } } |
Contact Us