RecyclerView आइटम्स को स्क्रीन पर आने पर एनिमेट कैसे करें

RecyclerView आइटम्स के लिए लेआउट एनिमेशन लागू करना

RecyclerView में आइटम्स को स्क्रीन पर आने पर आकर्षक एनिमेशन देना यूजर एक्सपीरियंस को बेहतर बनाता है। यह उदाहरण विभिन्न दिशाओं (ऊपर से नीचे, नीचे से ऊपर, बाएं से दाएं, दाएं से बाएं) में एनिमेशन लागू करना सिखाता है।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में File → New Project चुनें और आवश्यक विवरण भरें।

चरण 2: मुख्य लेआउट में RecyclerView जोड़ें

res/layout/activity_main.xml में RecyclerView और FAB जोड़ें:

<?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="16dp"
        android:src="@android:drawable/ic_media_next"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

चरण 3-6: अलग-अलग एनिमेशन XML फ़ाइलें बनाएं

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:toYDelta="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator" />
</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:toXDelta="0"
        android:interpolator="@android:anim/decelerate_interpolator" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator" />
</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:toXDelta="0"
        android:interpolator="@android:anim/decelerate_interpolator" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator" />
</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:toYDelta="0"
        android:interpolator="@android:anim/decelerate_interpolator" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/decelerate_interpolator" />
    <scale
        android:fromXScale="125%"
        android:fromYScale="125%"
        android:toXScale="100%"
        android:toYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:interpolator="@android:anim/decelerate_interpolator" />
</set>

चरण 7-10: लेआउट एनिमेशन कंट्रोलर XML फ़ाइलें

ये फ़ाइलें एनिमेशन के क्रम और देरी को नियंत्रित करती हैं:

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

चरण 11: MainActivity में एनिमेशन लॉजिक

package com.journaldev.androidrecyclerviewlayoutanimation;

import android.os.Bundle;
import android.util.Log;
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();
    }
}

चरण 12: RecyclerView एडाप्टर क्लास

एक अलग RecyclerViewAdapter.java फ़ाइल बनाएं:

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();
    }

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

ऐप चलाएं और टेस्ट करें

ऐप चलाएं। FAB पर क्लिक करने पर हर बार अलग-अलग दिशा में एनिमेशन चलेगा। आप चार अलग-अलग एनिमेशन प्रभाव देख पाएंगे।

महत्वपूर्ण: आधुनिक एंड्रॉइड विकास के लिए androidx लाइब्रेरी का उपयोग किया गया है। पुराने android.support पैकेज अब डिप्रिकेटेड हैं।