Cách tạo hiệu ứng animation cho RecyclerView khi xuất hiện trên màn hình

Giới thiệu

Bài viết này minh họa cách áp dụng các hiệu ứng animation (chuyển động) cho các item trong RecyclerView khi chúng xuất hiện trên màn hình, giúp giao diện trở nên sống động và chuyên nghiệp hơn.

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

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

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Layout chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layoutAnimation="@anim/layout_animation_up_to_down"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:src="@android:drawable/ic_media_next"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 3-6: Tạo các file animation cơ bản (res/anim/)

Tạo 4 file animation cho các hiệu ứng chuyển động đơn lẻ:

• down_to_up.xml: Di chuyển từ dưới lên + fade in
• left_to_right.xml: Di chuyển từ trái sang phải + fade in
• right_to_left.xml: Di chuyển từ phải sang trái + fade in
• up_to_down.xml: Di chuyển từ trên xuống + scale + fade in

<!-- Ví dụ: down_to_up.xml -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromYDelta="50%p"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
</set>

Bước 7-10: Tạo layout animation (res/anim/)

Tạo 4 file layout animation áp dụng các animation trên cho toàn bộ RecyclerView:

• layout_animation_down_to_up.xml
• layout_animation_left_to_right.xml
• layout_animation_right_to_left.xml
• layout_animation_up_to_down.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
    android:animation="@anim/up_to_down"
    android:animationOrder="normal"
    android:delay="15%" />

Bước 11: Code Java chính (src/MainActivity.java)

package com.example.recyclerviewanimation;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    RecyclerView recyclerView;
    RecyclerViewAdapter recyclerViewAdapter;
    ArrayList<String> arrayList = new ArrayList<>();
    int[] animationList = {
        R.anim.layout_animation_up_to_down,
        R.anim.layout_animation_right_to_left,
        R.anim.layout_animation_down_to_up,
        R.anim.layout_animation_left_to_right
    };
    int currentAnimationIndex = 0;

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

        fab = findViewById(R.id.fab);
        recyclerView = findViewById(R.id.recyclerView);

        populateData();
        initAdapter();

        fab.setOnClickListener(v -> {
            currentAnimationIndex = (currentAnimationIndex + 1) % animationList.length;
            runAnimationAgain();
        });
    }

    private void populateData() {
        for (int i = 0; i < 12; i++) {
            arrayList.add("Item " + i);
        }
    }

    private void initAdapter() {
        recyclerViewAdapter = new RecyclerViewAdapter(arrayList);
        recyclerView.setAdapter(recyclerViewAdapter);
    }

    private void runAnimationAgain() {
        LayoutAnimationController controller = AnimationUtils.loadLayoutAnimation(this, animationList[currentAnimationIndex]);
        recyclerView.setLayoutAnimation(controller);
        recyclerViewAdapter.notifyDataSetChanged();
        recyclerView.scheduleLayoutAnimation();
    }
}

Bước 12: Cấu hình Manifest

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

    <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ị Android, nhấn Run trong Android Studio. Mỗi lần nhấn FloatingActionButton sẽ chuyển đổi qua 4 hiệu ứng animation khác nhau cho RecyclerView.