Android Animation
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 animating 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
Description
startAnimation() This method will start the animation.
clearAnimation() This method will clear the animation running on a specific view.
Example
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.
Source: [Link] Page 1 of 12
Android Animation
Step 2: Working with the [Link] file
[Link] can be found from the app > res > values > [Link]. Below is the snippet for
the [Link] 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 4: 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="[Link]
xmlns:tools="[Link]
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"
Source: [Link] Page 2 of 12
Android Animation
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/[Link]"
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/[Link]"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
Source: [Link] Page 3 of 12
Android Animation
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/[Link]"
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/[Link]"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
Source: [Link] Page 4 of 12
Android Animation
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/[Link]"
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/[Link]"
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>
Source: [Link] Page 5 of 12
Android Animation
<!--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 5: 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="[Link]
<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>
Source: [Link] Page 6 of 12
Android Animation
2) Fade Animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="[Link]
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="[Link]
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="700" />
</set>
Source: [Link] Page 7 of 12
Android Animation
4) Rotate Animation
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="[Link]
<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="[Link]
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>
Source: [Link] Page 8 of 12
Android Animation
6) Zoom Animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="[Link]
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>
Step 6: Working with the [Link] file
Add animation to the ImageView by clicking a specific Button. Navigate to the app > java >
your apps package name >> [Link].
public class MainActivity extends AppCompatActivity {
ImageView imageView;
Button blinkBTN, rotateBTN, fadeBTN, moveBTN, slideBTN, zoomBTN,
stopBTN;
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
imageView = findViewById([Link]);
blinkBTN = findViewById([Link]);
rotateBTN = findViewById([Link]);
fadeBTN = findViewById([Link]);
moveBTN = findViewById([Link]);
slideBTN = findViewById([Link]);
Source: [Link] Page 9 of 12
Android Animation
zoomBTN = findViewById([Link]);
stopBTN = findViewById([Link]);
[Link](new [Link]() {
@Override
public void onClick(View v) {
// To add blink animation
Animation animation =
[Link](getApplicationContext(),
[Link].blink_animation);
[Link](animation);
}
});
[Link](new [Link]() {
@Override
public void onClick(View v) {
// To add rotate animation
Animation animation =
[Link](getApplicationContext(),
[Link].rotate_animation);
[Link](animation);
}
});
[Link](new [Link]() {
@Override
public void onClick(View v) {
// To add fade animation
Animation animation =
[Link](getApplicationContext(),
[Link].fade_animation);
[Link](animation);
}
});
[Link](new [Link]() {
Source: [Link] Page 10 of 12
Android Animation
@Override
public void onClick(View v) {
// To add move animation
Animation animation =
[Link](getApplicationContext(),
[Link].move_animation);
[Link](animation);
}
});
[Link](new [Link]() {
@Override
public void onClick(View v) {
// To add slide animation
Animation animation =
[Link](getApplicationContext(),
[Link].slide_animation);
[Link](animation);
}
});
[Link](new [Link]() {
@Override
public void onClick(View v) {
// To add zoom animation
Animation animation =
[Link](getApplicationContext(),
[Link].zoom_animation);
[Link](animation);
}
});
Source: [Link] Page 11 of 12
Android Animation
[Link](new [Link]() {
@Override
public void onClick(View v) {
// To stop the animation going on imageview
[Link]();
}
});
}
}
Note: Drawables and strings can be found in the drawable folder and [Link] file.
Drawables can be found from the app > res > drawable.
Click to view the working of project:
[Link]
Source: [Link] Page 12 of 12