Tween Animation Activity in Android

In this tutorial, we implement a Tween Animation Activity that demonstrates different animation effects like Alpha, Rotate, Scale, and Translate in Android.

XML Layout (activity_tween_animation.xml)

<LinearLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="100"
    android:background="#87CEEB"
    tools:context=".TweenAnimationActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="90"
        android:gravity="center">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Animation Demo"
            android:textSize="35sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10">
        <Button android:id="@+id/alpha" android:text="Alpha"/>
        <Button android:id="@+id/rotate" android:text="Rotate"/>
        <Button android:id="@+id/scale" android:text="Scale"/>
        <Button android:id="@+id/translate" android:text="Translate"/>
    </LinearLayout>
</LinearLayout>
        

Java Code (TweenAnimationActivity.java)

package com.vipul.p6;

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.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class TweenAnimationActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tween_animation);
        
        TextView textView = findViewById(R.id.textView);
        Button alpha = findViewById(R.id.alpha);
        Button rotate = findViewById(R.id.rotate);
        Button scale = findViewById(R.id.scale);
        Button translate = findViewById(R.id.translate);

        alpha.setOnClickListener(v -> {
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
            textView.startAnimation(animation);
        });

        rotate.setOnClickListener(v -> {
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
            textView.startAnimation(animation);
        });

        scale.setOnClickListener(v -> {
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
            textView.startAnimation(animation);
        });

        translate.setOnClickListener(v -> {
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
            textView.startAnimation(animation);
        });
    }
}
        

How to Create Animations in Android Studio

Step-by-step instructions:

• In your project, go to the res folder.
• Right-click on the res folder.
• Select New > Directory.
• Name the new directory as anim.
• Inside the anim folder, create animation resource files:
• Right-click on anim > New > Animation Resource File.
• Give your file a name like alpha.xml, rotate.xml, scale.xml, or translate.xml.

Example Animation XML Files:

alpha.xml (Fade In Animation)

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true">

    <alpha
        android:duration="1000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />

</set>
    

rotate.xml (Rotation Animation)

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true">

    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

</set>
    

scale.xml (Zoom Animation)

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true">

    <scale
        android:fromYScale="1"
        android:fromXScale="1"
        android:pivotY="50%"
        android:pivotX="50%"
        android:toYScale="1.5"
        android:toXScale="1.5" />

</set>
    

translate.xml (Move Animation)

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true">

    <translate
        android:fromXDelta="0"
        android:toXDelta="100"
        android:toYDelta="100" />

</set>
    

Explanation

In this activity, we demonstrate four types of tween animations:

• Alpha Animation: Changes the transparency of the TextView.
• Rotate Animation: Rotates the TextView around its pivot point.
• Scale Animation: Enlarges or shrinks the TextView.
• Translate Animation: Moves the TextView from one position to another.

Each animation is loaded using AnimationUtils.loadAnimation() and applied to the TextView when a button is clicked.

Watch the Demo

Check out the video demonstration below: