Create Floating Animation for RecyclerView Items in Android
Last Updated :
16 Feb, 2022
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"?>
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
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
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
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)
val mRecyclerView = findViewById<RecyclerView>(R.id.recycler_view_1)
mRecyclerView.layoutManager = LinearLayoutManager(this)
val mDataArray = mGenerateData()
val mAdapter = MyAdapter(mDataArray)
val mFloatingButton = findViewById<FloatingActionButton>(R.id.floating_button_1)
mFloatingButton.setOnClickListener{
val controller = AnimationUtils.loadLayoutAnimation(this, R.anim.layout_right_to_left)
mRecyclerView.layoutAnimation = controller
mAdapter.notifyDataSetChanged()
mRecyclerView.scheduleLayoutAnimation()
mRecyclerView.adapter = mAdapter
}
}
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...