Create Floating Animation for RecyclerView Items in Android

In Android, a RecyclerView is a UI element that is used to display a type of layout items in the form of a list. This list is scrollable and each element of the list is clickable. You can find more information on creating RecyclerView in this article: RecyclerView in Android with Example. RecyclerView by default has no entry or exit animation. However, animations can be created and applied to a RecyclerView. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 

So in this article, we will show you how you could add an entry animation to a RecyclerView in Android. Follow the below steps once the IDE is ready, but first, it is important to understand the application that we created and explained in this article.

Understanding the application structure

The application recalls a basic RecyclerView in the activity_main.xml. The elements displayed in the RecyclerView are an array of strings generated in the main code. RecyclerView item layout is recycler_view_item_layout.xml and the RecyclerView adapter is MyAdapter.kt. The main code is the MainActivity.kt where the adapter is implemented to send the generated strings to the RecyclerView.

Animation i.e. right_to_left.xml and animation layout i.e.  layout_right_to_left.xml are created in the anim folder. To create anim folder, right-click on the res folder, select new, click on Android Resource Directory. A New Resource Directory window appears. Set Directory name as anim, Resource type as transition, and click OK. Once the anim folder is created, right-click on it, select new, and click on Animation Resource File. Set the File name as right_to_left and Root element to set and click OK. Repeat the same process for layout_right_to_left, name it and set Root element to layoutAnimation and click OK. Now both the animation and animation layout files are ready. Animation is programmed inside right_to_left.xml and animation layout in layout_right_to_left.xml. The animation would be statically called in the animation layout file and the animation layout file would be dynamically called in the main code to apply this layout to the RecyclerView.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Working on anim > right_to_left.xml

Sample right-to-left animation code is shown below. This animation would start and complete in 0.5 secs/ 500 milli-secs.

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://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>

Step 3: anim > layout_right_to_left.xml

A simple layout code is shown below. The above animation is added in the layout attributes. Delay is applied to next items so all the items don’t appear at once.

XML

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

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add a RecyclerView and a Floating Button as shown below. The RecyclerView would be used to display the strings and Button would be used to display the RecyclerView on-click.

XML

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floating_button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="20sp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20sp"/>

</RelativeLayout>

Step 5: recycler_view_item_layout.xml

The item layout code is shown below. It consists of a TextView to display a string.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2">

    <TextView
        android:id="@+id/text_view_rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30sp"
        android:layout_weight="1"/>

</LinearLayout>

Step 6: Working with the MyAdapter.kt file

The below code is for the RecyclerView adapter. Explanation of similar code is available at the article mentioned in the introduction of this article.

Kotlin

package org.geeksforgeeks.recyclerviewfloatanimation

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class MyAdapter(mData: ArrayList<String>): RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    private val mDataCopy = mData
    inner class ViewHolder(view: View): RecyclerView.ViewHolder(view), View.OnClickListener {

        val tvCard: TextView = view.findViewById(R.id.text_view_rv)

        override fun onClick(v: View?) {
            TODO("Not yet implemented")
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

        return ViewHolder(
            LayoutInflater.from(parent.context)
            .inflate(R.layout.recycler_view_item_layout, parent, false))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.tvCard.text = mDataCopy[position]
    }

    override fun getItemCount(): Int {
        return mDataCopy.size
    }
}

Step 7: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package org.geeksforgeeks.recyclerviewfloatanimation

import android.annotation.SuppressLint
import android.os.Bundle
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.floatingactionbutton.FloatingActionButton

class MainActivity : AppCompatActivity() {
    @SuppressLint("NotifyDataSetChanged")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Declaring and initializing the
        // RecyclerView from the layout file
        val mRecyclerView = findViewById<RecyclerView>(R.id.recycler_view_1)
        mRecyclerView.layoutManager = LinearLayoutManager(this)

        // Generating data (array of strings)
        val mDataArray = mGenerateData()

        // Initializing the adapter
        val mAdapter = MyAdapter(mDataArray)

        // Declaring and initializing the
        // Floating Button from the layout file
        val mFloatingButton = findViewById<FloatingActionButton>(R.id.floating_button_1)

        // When Button is clicked, animation is applied
        // to the RecyclerView and RecyclerView is displayed
        mFloatingButton.setOnClickListener{
            val controller = AnimationUtils.loadLayoutAnimation(this, R.anim.layout_right_to_left)
            mRecyclerView.layoutAnimation = controller
            mAdapter.notifyDataSetChanged()
            mRecyclerView.scheduleLayoutAnimation()
            mRecyclerView.adapter = mAdapter
        }
    }

    // Sample function to return array
    // of strings (Item 1, Item 2, Item 3,.....)
    private fun mGenerateData(): ArrayList<String> {
        val mArrayList = arrayListOf<String>()
        for (i in 0..10) {
            mArrayList.add("Item $i")
        }
        return mArrayList
    }
}

Output:

You can see that the animation is applied to the RecyclerView items on the Floating Button click.