Tạo animation trượt trái/phải (Slide Left/Right) trong Android

Giới thiệu

Ví dụ này minh họa cách tạo hiệu ứng trượt (slide animation) cho View từ trái sang phải và ngược lại sử dụng TransitionManager và Slide transition (API 19+).

Các bước thực hiện

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

Android Studio → File → New Project → Empty Activity.

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:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnSlideLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="Trượt từ Trái" />

    <Button
        android:id="@+id/btnSlideRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btnSlideLeft"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="Trượt từ Phải" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Cristiano Ronaldo là cầu thủ tốt nhất thế giới"
        android:textSize="16sp"
        android:textStyle="bold"
        android:visibility="invisible" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_centerInParent="true"
        android:text="Messi là cầu thủ tốt nhất thế giới"
        android:textSize="16sp"
        android:textStyle="bold"
        android:visibility="invisible" />

</RelativeLayout>

Bước 3: Code MainActivity (src/MainActivity.java)

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Slide;
import android.transition.TransitionManager;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    Button btnSlideLeft, btnSlideRight;
    TextView textView, textView1;
    RelativeLayout relativeLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);
        textView1 = findViewById(R.id.textView1);
        btnSlideLeft = findViewById(R.id.btnSlideLeft);
        btnSlideRight = findViewById(R.id.btnSlideRight);
        relativeLayout = findViewById(R.id.relativeLayout);

        // Nút "Trượt từ Trái" -> Hiện textView trượt từ trái (Gravity.START)
        btnSlideLeft.setOnClickListener(v -> {
            Slide slide = new Slide();
            slide.setSlideEdge(Gravity.START); // Trái
            TransitionManager.beginDelayedTransition(relativeLayout, slide);
            textView.setVisibility(View.VISIBLE);
        });

        // Nút "Trượt từ Phải" -> Hiện textView1 trượt từ phải (Gravity.END)
        btnSlideRight.setOnClickListener(v -> {
            Slide slide = new Slide();
            slide.setSlideEdge(Gravity.END); // Phải
            TransitionManager.beginDelayedTransition(relativeLayout, slide);
            textView1.setVisibility(View.VISIBLE);
        });
    }
}

Bước 4: Manifest (androidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

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

    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. Nhấn nút để xem TextView trượt vào màn hình từ trái hoặc phải.

Giải thích kỹ thuật

• TransitionManager.beginDelayedTransition(ViewGroup, Transition): Tự động tính toán và animate sự thay đổi trạng thái (visibility, layout params...) của các child view trong ViewGroup.
• Slide: Transition con cụ thể cho hiệu ứng trượt. setSlideEdge(Gravity.START/END/TOP/BOTTOM) xác định hướng trượt.
• Gravity.START/END: Tự động đảo hướng cho RTL (ngôn ngữ viết từ phải sang trái như Arabic).

Mở rộng: Các Transition khác

Transition giữa 2 Activity/Fragment (Shared Element Transition)

Để animation chuyển màn hình mượt mà (ví dụ: click item RecyclerView → Detail Activity với ảnh shared element):

1. Theme: <item name="android:windowActivityTransitions">true</item>
2. Layout: android:transitionName="shared_image" trên cả 2 View.
3. Code: ActivityOptionsCompat.makeSceneTransitionAnimation(activity, view, "shared_image").