How to add recyclerview item(s) remove animation

How to Add RecyclerView Item(s) Remove Animation

Introduction

RecyclerView is a powerful and flexible view in Android that allows you to efficiently display large datasets. Adding animations to RecyclerView item removal can enhance the user experience, making it more engaging and visually appealing. This article will guide you through the process of adding various remove item animations to your RecyclerView.

Steps to Implement Remove Item Animations

1. **Add the necessary dependencies:**
   Ensure you have the required dependencies for animations in your project’s build.gradle file (Module: app).

   implementation 'androidx.recyclerview:recyclerview:1.3.1'
   

2. **Create an ItemAnimator:**
   Extend the `RecyclerView.ItemAnimator` class to create your custom item animator.

   class CustomItemAnimator : RecyclerView.ItemAnimator() {
       override fun animateRemove(viewHolder: RecyclerView.ViewHolder): Boolean {
           // Implement remove animation logic
           return true
       }
   }
   

3. **Implement Animation Logic:**
   In the `animateRemove()` method, define the animation that should be applied to the removed item.
4. **Set ItemAnimator to RecyclerView:**
   Attach the created custom item animator to your RecyclerView instance.

   recyclerView.itemAnimator = CustomItemAnimator()
   

Common Remove Item Animations

Fade Out

override fun animateRemove(viewHolder: RecyclerView.ViewHolder): Boolean {
    viewHolder.itemView.animate()
        .alpha(0f)
        .setDuration(200)
        .setListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                dispatchRemoveFinished(viewHolder)
            }
        })
        .start()
    return true
}

Slide Out

override fun animateRemove(viewHolder: RecyclerView.ViewHolder): Boolean {
    viewHolder.itemView.animate()
        .translationX(-viewHolder.itemView.width.toFloat())
        .setDuration(200)
        .setListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                dispatchRemoveFinished(viewHolder)
            }
        })
        .start()
    return true
}

Scale Down

override fun animateRemove(viewHolder: RecyclerView.ViewHolder): Boolean {
    viewHolder.itemView.animate()
        .scaleX(0f)
        .scaleY(0f)
        .setDuration(200)
        .setListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                dispatchRemoveFinished(viewHolder)
            }
        })
        .start()
    return true
}

Rotate Out

override fun animateRemove(viewHolder: RecyclerView.ViewHolder): Boolean {
    viewHolder.itemView.animate()
        .rotation(180f)
        .setDuration(200)
        .setListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                dispatchRemoveFinished(viewHolder)
            }
        })
        .start()
    return true
}

Using Default ItemAnimator Animations

Android’s default ItemAnimator offers predefined animation effects for item removal. You can enable these animations by setting the `supportsChangeAnimations` flag to `true`.

recyclerView.itemAnimator?.supportsChangeAnimations = true

Comparison Table

Example Usage

“`java
import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import androidx.recyclerview.widget.RecyclerView

class CustomItemAnimator : RecyclerView.ItemAnimator() {

override fun animateRemove(viewHolder: RecyclerView.ViewHolder): Boolean {
viewHolder.itemView.animate()
.alpha(0f)
.setDuration(200)
.setListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
dispatchRemoveFinished(viewHolder)
}
})
.start()
return true
}

// … (Implement other animation methods)
}
“`
“`java
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.RecyclerView.ItemAnimator
import com.example.app.R

class MainActivity : AppCompatActivity() {
private lateinit var recyclerView: RecyclerView
private lateinit var adapter: MyAdapter // Replace with your adapter

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
recyclerView = findViewById(R.id.recyclerView)

recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = adapter

// Set custom item animator
recyclerView.itemAnimator = CustomItemAnimator()
}
}
“`

Conclusion

By incorporating remove item animations, you can significantly enhance the user experience of your Android applications. This article has demonstrated different ways to implement these animations, allowing you to choose the most suitable method for your project. Experiment with various animation styles and customize them to create a unique and visually appealing experience for your users.