Animation in Android with Example
Animation is the process of adding a motion effect to any view, image, or text. With the help of an animation, you can add motion or can change the shape of a specific view. Animation in Android is generally used to give your UI a rich look and feel. The animations are basically of three types as follows:
- Property Animation
- View Animation
- Drawable Animation
1. Property Animation
Property Animation is one of the robust frameworks which allows animation almost everything. This is one of the powerful and flexible animations which was introduced in Android 3.0. Property animation can be used to add any animation in the CheckBox, RadioButtons, and widgets other than any view.
2. View Animation
View Animation can be used to add animation to a specific view to perform tweened animation on views. Tweened animation calculates animation information such as size, rotation, start point, and endpoint. These animations are slower and less flexible. An example of View animation can be used if we want to expand a specific layout in that place we can use View Animation. The example of View Animation can be seen in Expandable RecyclerView.
3. Drawable Animation
Drawable Animation is used if you want to animate one image over another. The simple way to understand is to animate drawable is to load the series of drawable one after another to create an animation. A simple example of drawable animation can be seen in many apps Splash screen on apps logo animation.
Important Methods of Animation
Methods | Description |
|---|---|
| startAnimation() | This method will start the animation. |
| clearAnimation() | This method will clear the animation running on a specific view. |
Example of Implementation Android Animation
Now we will see the Simple Example to add animations to ImageView. Note that we are going to implement this project using the Java language.
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Working with the strings.xml file
Strings.xml can be found from the app > res > values > strings.xml.
Below is the snippet for the strings.xml file.
<resources>
<string name="app_name">GFG App</string>
<string name="blink">BLINK</string>
<string name="clockwise">ROTATE</string>
<string name="fade">FADE</string>
<string name="move">MOVE</string>
<string name="slide">SLIDE</string>
<string name="zoom">ZOOM</string>
<string name="stop_animation">STOP ANIMATION</string>
<string name="course_rating">Course Rating</string>
<string name="course_name">Course Name</string>
</resources>
Step 3: Working with the activity_main.xml file
Create ImageView in the activity_main.xml along with buttons that will add animation to the view. Navigate to the app > res > layout > activity_main.xml.
Below is the code for the activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageview"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:contentDescription="@string/app_name"
android:src="@drawable/gfgimage" />
<LinearLayout
android:id="@+id/linear1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/imageview"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:weightSum="3">
<!--To start the blink animation of the image-->
<Button
android:id="@+id/BTNblink"
style="@style/TextAppearance.AppCompat.Widget.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:padding="3dp"
android:text="@string/blink"
android:textColor="@color/white" />
<!--To start the rotate animation of the image-->
<Button
android:id="@+id/BTNrotate"
style="@style/TextAppearance.AppCompat.Widget.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:padding="3dp"
android:text="@string/clockwise"
android:textColor="@color/white" />
<!--To start the fading animation of the image-->
<Button
android:id="@+id/BTNfade"
style="@style/TextAppearance.AppCompat.Widget.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:padding="3dp"
android:text="@string/fade"
android:textColor="@color/white" />
</LinearLayout>
<LinearLayout
android:id="@+id/linear2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/linear1"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:weightSum="3">
<!--To start the move animation of the image-->
<Button
android:id="@+id/BTNmove"
style="@style/TextAppearance.AppCompat.Widget.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:padding="3dp"
android:text="@string/move"
android:textColor="@color/white" />
<!--To start the slide animation of the image-->
<Button
android:id="@+id/BTNslide"
style="@style/TextAppearance.AppCompat.Widget.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:padding="3dp"
android:text="@string/slide"
android:textColor="@color/white" />
<!--To start the zoom animation of the image-->
<Button
android:id="@+id/BTNzoom"
style="@style/TextAppearance.AppCompat.Widget.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:padding="3dp"
android:text="@string/zoom"
android:textColor="@color/white" />
</LinearLayout>
<!--To stop the animation of the image-->
<Button
android:id="@+id/BTNstop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/linear2"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:layout_marginRight="30dp"
android:text="@string/stop_animation" />
</RelativeLayout>
Step 4: Create 6 different types of animation for ImageView
To create new animations we have to create a new directory for storing all our animations. Navigate to the app > res > Right-Click on res >> New >> Directory >> Name your directory as “anim”. Inside this directory, we will create our animations. For creating a new anim right click on the anim directory >> Animation Resource file and give the name to your file. Below is the code snippet for 6 different animations.
1. Blink Animation
<?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="500"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>
2. Fade Animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<!-- duration is the time for which animation will work-->
<alpha
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1" />
<alpha
android:duration="1000"
android:fromAlpha="1"
android:startOffset="2000"
android:toAlpha="0" />
</set>
3. Move Animation
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="700" />
</set>
4. Rotate Animation
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="6000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<rotate
android:duration="6000"
android:fromDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="5000"
android:toDegrees="0" />
</set>
5. Slide Animation
<?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>
6. Zoom Animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
android:interpolator="@android:anim/linear_interpolator"
android:duration = "1000"
android:fromXScal = "1"
android:fromYScale = "1"
android:pivotX = "50%"
android:pivotY = "50%"
android:toXScale = "2"
android:toYScale = "2"/>
</set>
Step 5: Working with the MainActivity.java file
Add animation to the ImageView by clicking a specific Button. Navigate to the app > java > your apps package name >> MainActivity.java.
Below is the implementation of MainActivity file:
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 {
// Declare ImageView and Buttons
ImageView imageView;
Button blinkBTN, rotateBTN, fadeBTN, moveBTN, slideBTN, zoomBTN, stopBTN;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initialize ImageView and Buttons using their IDs
imageView = findViewById(R.id.imageview);
blinkBTN = findViewById(R.id.BTNblink);
rotateBTN = findViewById(R.id.BTNrotate);
fadeBTN = findViewById(R.id.BTNfade);
moveBTN = findViewById(R.id.BTNmove);
slideBTN = findViewById(R.id.BTNslide);
zoomBTN = findViewById(R.id.BTNzoom);
stopBTN = findViewById(R.id.BTNstop);
// Set up click listener for blink button to start blink animation
blinkBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Load blink animation and start it on the ImageView
Animation animation = AnimationUtils.loadAnimation(getApplicationContext()
, R.anim.blink_animation);
imageView.startAnimation(animation);
}
});
// Set up click listener for rotate button to start rotate animation
rotateBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Load rotate animation and start it on the ImageView
Animation animation = AnimationUtils.loadAnimation(getApplicationContext()
, R.anim.rotate_animation);
imageView.startAnimation(animation);
}
});
// Set up click listener for fade button to start fade animation
fadeBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Load fade animation and start it on the ImageView
Animation animation = AnimationUtils.loadAnimation(getApplicationContext()
, R.anim.fade_animation);
imageView.startAnimation(animation);
}
});
// Set up click listener for move button to start move animation
moveBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Load move animation and start it on the ImageView
Animation animation = AnimationUtils.loadAnimation(getApplicationContext()
, R.anim.move_animation);
imageView.startAnimation(animation);
}
});
// Set up click listener for slide button to start slide animation
slideBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Load slide animation and start it on the ImageView
Animation animation = AnimationUtils.loadAnimation(getApplicationContext()
, R.anim.slide_animation);
imageView.startAnimation(animation);
}
});
// Set up click listener for zoom button to start zoom animation
zoomBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Load zoom animation and start it on the ImageView
Animation animation = AnimationUtils.loadAnimation(getApplicationContext()
, R.anim.zoom_animation);
imageView.startAnimation(animation);
}
});
// Set up click listener for stop button to clear any ongoing animation
stopBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Clear the animation on the ImageView
imageView.clearAnimation();
}
});
}
}
package com.gfg.animation_android
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ImageView
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
// Declare variables for ImageView and Buttons
private lateinit var imageView: ImageView
private lateinit var blinkBTN: Button
private lateinit var rotateBTN: Button
private lateinit var fadeBTN: Button
private lateinit var moveBTN: Button
private lateinit var slideBTN: Button
private lateinit var zoomBTN: Button
private lateinit var stopBTN: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Initialize the ImageView and Buttons using their IDs
imageView = findViewById(R.id.imageview)
blinkBTN = findViewById(R.id.BTNblink)
rotateBTN = findViewById(R.id.BTNrotate)
fadeBTN = findViewById(R.id.BTNfade)
moveBTN = findViewById(R.id.BTNmove)
slideBTN = findViewById(R.id.BTNslide)
zoomBTN = findViewById(R.id.BTNzoom)
stopBTN = findViewById(R.id.BTNstop)
// Set up click listeners for each button to start corresponding animations
createAnimation(blinkBTN, R.anim.blink_animation)
createAnimation(rotateBTN, R.anim.rotate_animation)
createAnimation(fadeBTN, R.anim.fade_animation)
createAnimation(moveBTN, R.anim.move_animation)
createAnimation(slideBTN, R.anim.slide_animation)
createAnimation(zoomBTN, R.anim.zoom_animation)
// Set up click listener for stop button to clear any ongoing animation
stopBTN.setOnClickListener {
imageView.clearAnimation()
}
}
// Function to set up an animation for a given view and animation resource ID
private fun createAnimation(view: View, animationResId: Int) {
view.setOnClickListener {
// Load the animation from the specified resource ID
val animation = AnimationUtils.loadAnimation(this, animationResId)
// Start the animation on the ImageView
imageView.startAnimation(animation)
}
}
}
Note: Drawables and strings can be found in the drawable folder and strings.xml file. Drawables can be found from the app > res > drawable.
Output:
Note : To access the full android application using Pie chat check this repository: Animation in Android Application
Contact Us