25/11/2023, 10:44 Android - Animations

Menu Search tutorials, courses and ebooks...

Login

Home

Coding
HTML Ground
CSS Javascript SQL Python Java C C++

Jobs

Whiteboard
Android - Animations

Tools

Animation is the process of creating motion and shape change

Animation in android is possible from many ways. In this chapter we will

discuss one easy and widely used way of making animation called tweened
animation.

Tween Animation
Tween Animation takes some parameters such as start value , end value,
size , time duration , rotation angle e.t.c and perform the required animation
on that object. It can be applied to any type of object. So in order to use this
, android has provided us a class called Animation.

In order to perform animation in android , we are going to call a static

function loadAnimation() of the class AnimationUtils. We are going to receive
the result in an instance of Animation Object. Its syntax is as follows −

Animation animation = AnimationUtils.loadAnimation(getApplicationConte

R.anim.myanimation);

https://w w w .tutorialspoint.com/android/android_animations.htm 1/19

25/11/2023, 10:44 Android - Animations

Note the second parameter. It is the name of the our animation xml file. You
have to create a new folder called anim under res directory and make an xml
file under anim folder.

This animation class has many useful functions which are listed below −

Sr.No Method & Description

start()
1
This method starts the animation.

setDuration(long duration)
2
This method sets the duration of an animation.

getDuration()
3
This method gets the duration which is set by above method

end()
4
This method ends the animation.

cancel()
5
This method cancels the animation.

In order to apply this animation to an object , we will just call the

startAnimation() method of the object. Its syntax is −

ImageView image1 = (ImageView)findViewById(R.id.imageView1);

image.startAnimation(animation);

Example
The following example demonstrates the use of Animation in android. You
would be able to choose different type of animation from the menu and the
selected animation will be applied on an imageView on the screen.

To experiment with this example , you need to run this on an emulator or an

actual device.

Steps Description

https://w w w .tutorialspoint.com/android/android_animations.htm 2/19

25/11/2023, 10:44 Android - Animations

You will use Android studio IDE to create an Android application and
1 name it as My Application under a package
com.example.sairamkrishna.myapplication.

2 Modify src/MainActivity.java file to add animation code

Modify layout XML file res/layout/activity_main.xml add any GUI

3
component if required.

Create a new folder under res directory and call it anim. Confim it by
4
visiting res/anim

Right click on anim and click on new and select Android XML file You
5
have to create different files that are listed below.

Create files
6 myanimation.xml,clockwise.xml,fade.xml,move.xml,blink.xml,slide.xm
and add the XML code.

No need to change default string constants. Android studio takes car

7
of default constants at values/string.xml.

Run the application and choose a running android device and install
8
the application on it and verify the results.

Here is the modified code of MainActivity.java.

package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
https://w w w .tutorialspoint.com/android/android_animations.htm 3/19
25/11/2023, 10:44 Android - Animations

public void clockwise(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);
Animation animation = AnimationUtils.loadAnimation(getApplicatio
R.anim.myanimation);
image.startAnimation(animation);
}

public void zoom(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);
Animation animation1 = AnimationUtils.loadAnimation(getApplicati
R.anim.clockwise);
image.startAnimation(animation1);
}

public void fade(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);
Animation animation1 =
AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade);
image.startAnimation(animation1);
}

public void blink(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);
Animation animation1 =
AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.blink);
image.startAnimation(animation1);
}

public void move(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);
Animation animation1 =
AnimationUtils.loadAnimation(getApplicationContext(), R.anim.
image.startAnimation(animation1);
}

public void slide(View view){

https://w w w .tutorialspoint.com/android/android_animations.htm 4/19

25/11/2023, 10:44 Android - Animations

ImageView image = (ImageView)findViewById(R.id.imageView);

Animation animation1 =
AnimationUtils.loadAnimation(getApplicationContext(), R.anim.
image.startAnimation(animation1);
}
}

Here is the modified code of res/layout/activity_main.xml.

Here abc indicates about logo of tutorialspoint

<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"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:conte

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alert Dialog"
android:id="@+id/textView"
android:textSize="35dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tutorialspoint"
android:id="@+id/textView2"
android:textColor="#ff3eff0f"
android:textSize="35dp"
android:layout_below="@+id/textView"
https://w w w .tutorialspoint.com/android/android_animations.htm 5/19
25/11/2023, 10:44 Android - Animations

android:layout_centerHorizontal="true" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/abc"
android:layout_below="@+id/textView2"
android:layout_alignRight="@+id/textView2"
android:layout_alignEnd="@+id/textView2"
android:layout_alignLeft="@+id/textView"
android:layout_alignStart="@+id/textView"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="zoom"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="40dp"
android:onClick="clockwise"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="clockwise"
android:id="@+id/button2"
android:layout_alignTop="@+id/button"
android:layout_centerHorizontal="true"
android:onClick="zoom"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fade"
android:id="@+id/button3"
android:layout_alignTop="@+id/button2"
android:layout_alignParentRight="true"

https://w w w .tutorialspoint.com/android/android_animations.htm 6/19

25/11/2023, 10:44 Android - Animations

android:layout_alignParentEnd="true"
android:onClick="fade"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blink"
android:onClick="blink"
android:id="@+id/button4"
android:layout_below="@+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="move"
android:onClick="move"
android:id="@+id/button5"
android:layout_below="@+id/button2"
android:layout_alignRight="@+id/button2"
android:layout_alignEnd="@+id/button2"
android:layout_alignLeft="@+id/button2"
android:layout_alignStart="@+id/button2" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="slide"
android:onClick="slide"
android:id="@+id/button6"
android:layout_below="@+id/button3"
android:layout_toRightOf="@+id/textView"
android:layout_toEndOf="@+id/textView" />

</RelativeLayout>

Here is the code of res/anim/myanimation.xml.

https://w w w .tutorialspoint.com/android/android_animations.htm 7/19

25/11/2023, 10:44 Android - Animations

<?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="5000"
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="5000"
android:pivotX="50%"
android:pivotY="50%" >
</scale>

</set>

Here is the code of res/anim/clockwise.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="5000" >
</rotate>

https://w w w .tutorialspoint.com/android/android_animations.htm 8/19

25/11/2023, 10:44 Android - Animations

<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="5000" >
</rotate>

</set>

Here is the code of res/anim/fade.xml.

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator" >

<alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="2000" >
</alpha>

<alpha
android:startOffset="2000"
android:fromAlpha="1"
android:toAlpha="0"
android:duration="2000" >
</alpha>

</set>

Here is the code of res/anim/blink.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"

https://w w w .tutorialspoint.com/android/android_animations.htm 9/19

25/11/2023, 10:44 Android - Animations

android:duration="600"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>

Here is the code of res/anim/move.xml.

<?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="800" />
</set>

Here is the code of res/anim/slide.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>

Here is the modified code of res/values/string.xml.

<resources>
<string name="app_name">My Application</string>

https://w w w .tutorialspoint.com/android/android_animations.htm 10/19

25/11/2023, 10:44 Android - Animations

</resources>

Here is the default code of AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.sairamkrishna.myapplication" >

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >

<activity
android:name="com.example.animation.MainActivity"
android:label="@string/app_name" >

<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER"
</intent-filter>

</activity>

</application>
</manifest>

Let's try to run your application. I assume you have connected your actual
Android Mobile device with your computer. To run the app from Android
studio, open one of your project's activity files and click Run

icon from the toolbar. Android studio will display following images

https://w w w .tutorialspoint.com/android/android_animations.htm 11/19

25/11/2023, 10:44 Android - Animations

Select zoom button, it will display following screen −

https://w w w .tutorialspoint.com/android/android_animations.htm 12/19

25/11/2023, 10:44 Android - Animations

Now select slide button, it will display following screen

https://w w w .tutorialspoint.com/android/android_animations.htm 13/19

25/11/2023, 10:44 Android - Animations

Now select move button, it will display following screen

https://w w w .tutorialspoint.com/android/android_animations.htm 14/19

25/11/2023, 10:44 Android - Animations

Now the clockwise button, it will display following screen

https://w w w .tutorialspoint.com/android/android_animations.htm 15/19

25/11/2023, 10:44 Android - Animations

Now Fade button, it will display following screen

https://w w w .tutorialspoint.com/android/android_animations.htm 16/19

25/11/2023, 10:44 Android - Animations

Note − If you run it in emulator , you may not experience smooth animation
effect. You have to run it in your android mobile in order to experience the
smooth animation.

Kickstart Your Career

Get certified by completing the course

Get Started

https://w w w .tutorialspoint.com/android/android_animations.htm 17/19

25/11/2023, 10:44 Android - Animations

Print Page Previous Next

Advertisements
AD

Tutorials Point is a leading Ed Tech

company striving to provide the best
learning material on technical and non-
technical subjects.

https://w w w .tutorialspoint.com/android/android_animations.htm 18/19

25/11/2023, 10:44 Android - Animations

About us Terms Our Products

Company Terms of use Free Library

Our Team Privacy Policy Articles

Careers Refund Policy Coding Ground

Jobs Cookies Policy Certifications

Become a Teacher FAQ's Courses

Affiliates eBooks

Contact Us Corporate Training

Free Web Graphics

Contact Us
Tutorials Point India Private Limited, Incor9
Building, Kavuri Hills, Madhapur,
Hyderabad, Telangana - 500081, INDIA

© Copyright 2023. All Rights Reserved.

https://w w w .tutorialspoint.com/android/android_animations.htm 19/19