Cách animate text chuyển đổi giữa 2 TextView trong Android

Giới thiệu

Ví dụ này minh họa cách tạo hiệu ứng chuyển đổi văn bản giữa 2 trạng thái trong TextView kèm animation slide up.

Bước 1: Tạo dự án mới

Android Studio → File → New Project.

Bước 2: Giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/parent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/text"
                android:textSize="30dp"
                android:textAlignment="center"
                android:layout_width="match_parent"
                android:textColor="#FF4500"
                android:layout_height="wrap_content"
                android:singleLine="true" />

        </LinearLayout>

        <Button
            android:id="@+id/animate"
            android:text="Animate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</RelativeLayout>

Bước 3: Animation XML (res/anim/slide_up.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromYDelta="0%"
        android:toYDelta="-100%"/>
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

Bước 4: Logic (src/MainActivity.java)

package com.example.andy.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView view = findViewById(R.id.text);
        final LinearLayout parent = findViewById(R.id.parent);
        view.setText("1+2");

        Button animate = findViewById(R.id.animate);
        animate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation slideUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
                slideUp.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) { }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        view.setText("3"); // Cập nhật text sau khi animation kết thúc
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) { }
                });
                parent.startAnimation(slideUp);
            }
        });
    }
}

Giải thích luồng thực thi

1. Ban đầu TextView hiển thị "1+2"
2. Nhấn Button → Chạy animation slide_up trên LinearLayout cha
3. Animation kết thúc (onAnimationEnd) → Cập nhật TextView thành "3"

Chạy ứng dụng

Chạy app → Hiển thị "1+2". Nhấn "Animate" → TextView trượt lên và mờ dần → Khi animation xong, nội dung đổi thành "3".

Cách hiện đại (MotionLayout / Jetpack Compose)

Android hiện đại khuyến nghị dùng MotionLayout (XML) hoặc AnimatedContent (Compose) cho các chuyển đổi phức tạp hơn.