RecyclerView আইটেমগুলি স্ক্রিনে প্রদর্শনের সময় অ্যানিমেট করার পদ্ধতি

RecyclerView আইটেম অ্যানিমেশন: স্ক্রিনে উপস্থিত হওয়ার সাথে সাথে মোশন যোগ করুন

RecyclerView-এ ডেটা লোড হওয়ার সময় আইটেমগুলোর সৌন্দর্যपूर्ण অ্যানিমেশন যোগ করা ব্যবহারকারীর অভিজ্ঞতা অনেকটাই উন্নত করে। এই টিউটোরিয়ালে আমরা LayoutAnimationController ব্যবহার করে বিভিন্ন ধরনের অ্যানিমেশন ইমপ্লিমেন্ট করব।

প্রয়োজনীয় ধাপসমূহ

ধাপ ১: নতুন প্রজেক্ট তৈরি করুন

Android Studio-তে File → New Project নির্বাচন করে একটি নতুন প্রজেক্ট তৈরি করুন।

ধাপ ২: মেইন লেআউট ফাইল (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>

ধাপ ৩-৬: অ্যানিমেশন রিসোর্স ফাইল তৈরি করুন

res/anim/ ফোল্ডারে নিচের ৪টি অ্যানিমেশন ফাইল তৈরি করুন:

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>

left_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android" android:duration="500">
    <translate
        android:fromXDelta="-100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toXDelta="0" />
    <alpha
        android:fromAlpha="0.5"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
</set>

right_to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android" android:duration="500">
    <translate
        android:fromXDelta="100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toXDelta="0" />
    <alpha
        android:fromAlpha="0.5"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
</set>

up_to_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android" android:duration="500">
    <translate
        android:fromYDelta="-25%"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1" />
    <scale
        android:fromXScale="125%"
        android:fromYScale="125%"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="100%"
        android:toYScale="100%" />
</set>

ধাপ ৭-১০: লেআউট অ্যানিমেশন কন্ট্রোলার ফাইল

এখন res/anim/ ফোল্ডারে নিচের ৪টি layoutAnimation ফাইল তৈরি করুন:

layout_animation_down_to_up.xml

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

layout_animation_left_to_right.xml

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

layout_animation_right_to_left.xml

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

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%" />

ধাপ ১১: MainActivity.java-এ লজিক ইমপ্লিমেন্ট করুন

package com.journaldev.androidrecyclerviewlayoutanimation;

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 i = 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(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (i < animationList.length - 1) {
                    i++;
                } else {
                    i = 0;
                }
                runAnimationAgain();
            }
        });
    }

    private void populateData() {
        for (int i = 0; i < 12; i++) {
            arrayList.add("আইটেম " + i);
        }
    }

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

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

ধাপ ১২: RecyclerView Adapter ক্লাস তৈরি করুন

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
    private ArrayList<String> dataList;

    public RecyclerViewAdapter(ArrayList<String> dataList) {
        this.dataList = dataList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_1, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.textView.setText(dataList.get(position));
    }

    @Override
    public int getItemCount() {
        return dataList.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;
        public ViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(android.R.id.text1);
        }
    }
}

ধাপ ১৩: ম্যানিফেস্ট ফাইল

সাধারণ ম্যানিফেস্ট কনফিগারেশন ব্যবহার করুন।

ফলাফল যাচাই করুন

অ্যাপ্লিকেশনটি রান করুন। FAB বাটনে ক্লিক করলে RecyclerView আইটেমগুলোর অ্যানিমেশন স্টাইল পরিবর্তন হবে। উপরের দিকে থেকে নিচে, ডান থেকে বাম, নিচ থেকে উপরে, বাম থেকে ডান - এই ৪ ধরনের অ্যানিমেশন বारी বاري থেকে দেখাবে।