Introduction
Tween Animations in android are dependent on android.view.animation and they can be used to animate Views in android
The animation can be applied to any kind of View (e.g. ImageView, TextView, etc.).
The XML files for the animation are placed in res/anim/ folder. The root tags for the XML file include:
- <alpha> (fade in/out)
- <scale> (zoom)
- <translate> (move)
- <rotate> (rotate)
- <set> (combine multiple animations)
Examples of animation files
1. Fade in animation (res/anim/fade_in.xml)
It animates the View from alpha 0.0 to alpha 1.0 in 1 second.
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000" />
2. Fade out animation (res/anim/fade_out.xml)
It animates the View from alpha 1.0 to alpha 0.1 in 1 second.
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000" />
3. Move up animation (res/anim/move_up.xml)
It moves the View from Y delta 100% (bottom of View) to Y delta 0% (normal position) in 1 second.
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="100%"
android:toYDelta="0%"
android:duration="1000" />
4. Move down animation (res/anim/move_down.xml)
It moves the View from Y delta -100% (top of View) to Y delta 0% (normal position) in 1 second.
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="-100%"
android:toYDelta="0%"
android:duration="1000" />
5. Move right animation (res/anim/move_right.xml)
It moves the View from X delta 0% (normal position) to X delta 100% (right edge of View) in 1 second.
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="100%"
android:fromYDelta="0%"
android:toYDelta="0%"
android:duration="1000" />
6. Move left animation (res/anim/move_left.xml)
It moves the View from X delta 0% (normal position) to X delta -100% (left edge of View) in 1 second.
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="-100%"
android:fromYDelta="0%"
android:toYDelta="0%"
android:duration="1000" />
7. Zoom in animation (res/anim/zoom_in.xml)
It zooms the image from 0.5 x 0.5 of original size to 1.0 x 1.0 (original size) in 0.8 seconds.
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.5"
android:toXScale="1.0"
android:fromYScale="0.5"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="800" />
8. Zoom out animation (res/anim/zoom_out.xml)
It zooms out the image from 1.0 x 1.0 (original size) to 0.5 x 0.5 (half of original size) in 0.8 seconds.
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="800" />
9. Rotation animation (res/anim/rotate.xml)
It zooms out the image from 1.0 x 1.0 (original size) to 0.5 x 0.5 (half of original size) in 0.8 seconds.
<?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="1200"
android:repeatCount="infinite" />
10. Set animations (res/anim/set_animations.xml)
This example simultaneously applies zoom in, rotate and fade in animations to a View.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<scale
android:fromXScale="0.5"
android:toXScale="1.0"
android:fromYScale="0.5"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="700" />
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="700" />
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="700" />
</set>
Use in Activity
To use the animation xml file to animate an object, use codes in onCreate. The following code animates an ImageView imageview1 with fade_in animation.
Animation anim = AnimationUtils.loadAnimation(context, R.anim.fade_in); binding.imageview1.startAnimation(anim);