Add Custom Ripple Color to RecyclerView with RRutors
Published November 17, 2021In this Android Recyclerview tutorial example we will implement Ripple Effect on Recyclerview child items. We can also set Custom ripple effect color to the item click events
What we will cover
- Create Layout with RecyclerView
- Create RecyclerView Adapter with Custom View Holder
- Create Kotlin data class
- Read JSON file from assets folder
- Set Custom Ripple effect color
Let's create Android Project
Step 1: Create Android Project in Android studio
Step 2: Add Recyclerview in your xml file
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".recyclerview.RecycleRippleEffect"> <androidx.recyclerview.widget.RecyclerView android:layout_width="0dp" android:layout_height="0dp" android:id="@+id/recyclerView" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
Step 3: Here we are going to add List of Students data to Recyclerview, so let's create a Student Model class.
Here we create Student as Data class
package com.rrtutors.kotlinprograms.recyclerview data class Student(var name:String,var rollNo:String) { } |
Create a Sample Student Json file inside assets folder(In Original Project you will read data from APIs)
students.json
[ { "name": "Rakshak", "rollNo": "Schl01" }, { "name": "Ramakrishna", "rollNo": "Schl02" }, { "name": "David Miller", "rollNo": "Schl03" }, { "name": "Sachin Tendulkar", "rollNo": "Schl04" }, { "name": "Rahul", "rollNo": "Schl05" }, { "name": "Revath Modi", "rollNo": "Schl06" }, { "name": "Jeevan", "rollNo": "Schl07" } ] |
Step 4: To set data to Recyclerview we need Adapters, so let's create Recycler Adapter class and its layout file
To Have Ripple Effect Add android:background="?android:attr/selectableItemBackground" property
layout_ripple_child.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:paddingLeft="24dp" android:paddingRight="24dp" android:background="?android:attr/selectableItemBackground" android:layout_height="wrap_content"> <TextView android:id="@+id/st_name" android:textSize="22sp" android:text="Name" android:layout_width="0dp" android:padding="5dp" android:layout_height="wrap_content" android:textStyle="bold" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="24dp" /> <TextView android:id="@+id/st_number" android:textSize="18sp" android:text="No" android:padding="5dp" android:layout_width="0dp" android:layout_height="wrap_content" android:textStyle="italic" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@id/st_name" android:layout_marginTop="8dp" /> </androidx.constraintlayout.widget.ConstraintLayout> |
Now create Adapter class
class StudentAdapter(var list:ArrayList<Student>): RecyclerView.Adapter<StudentAdapter.ViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { } } |
In the above Adapter class we passed ViewHolder type, Let's Create ViewHolder class
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView){ } |
Now Bind layout to the Viewholder by
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { val layoutInflater = LayoutInflater.from(parent.context) return ViewHolder(layoutInflater.inflate(R.layout.layout_ripple_child, parent, false)) } |
Step 5: RecyclerView Item Click Listener
Inside our adapter class Create an Interface ClickListener and add abstract fun click which will takes two parameter : View and View position inside Recyclerview
Add setOnItemClickListener inside adapter class, here we will pass above created Interface listener instance
Implement ViewHolder class with View.OnClickListener and override onClick function
So Our Adapter class will be like below
package com.rrtutors.kotlinprograms.recyclerview import android.graphics.ColorSpace import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.TextView import androidx.recyclerview.widget.RecyclerView import com.rrtutors.kotlinprograms.R import java.util.ArrayList class StudentAdapter(var list:ArrayList<Student>): RecyclerView.Adapter<StudentAdapter.ViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { val layoutInflater = LayoutInflater.from(parent.context) return ViewHolder(layoutInflater.inflate(R.layout.layout_ripple_child, parent, false)) } override fun onBindViewHolder(holder: ViewHolder, position: Int) { (holder as ViewHolder).bind(list.get(position)); } override fun getItemCount(): Int { return list.size } fun setOnItemClickListener(aClickListener: ClickListener) { mClickListener = aClickListener } lateinit var mClickListener: ClickListener interface ClickListener { fun onClick(pos: Int, aView: View) } inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView), View.OnClickListener{ init { itemView.setOnClickListener(this) } val st_name=itemView.findViewById<TextView>(R.id.st_name) val st_number=itemView.findViewById<TextView>(R.id.st_number) fun bind(model: Student): Unit { st_number.text = model.name st_name.text = model.rollNo } override fun onClick(v: View?) { mClickListener.onClick(adapterPosition, itemView) } } } |
Step 6: Activity Class
- Read Students JSON data from assets folder and add into List
- Set Vertical Linear LayoutManager to RecyclerView.
- Create Instance of Adapter and set to recyclerView .
- Using adapter instance Call setOnItemClickListener , override onClick of StudentAdapter.ClickListener show toast message inside onclick function
recyclerView=findViewById<RecyclerView>(R.id.recyclerView) val modelList = readFromAsset(); val adapter = StudentAdapter(modelList as ArrayList<Student>) recyclerView.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false) recyclerView.adapter = adapter; adapter.setOnItemClickListener(object : StudentAdapter.ClickListener { override fun onClick(pos: Int, aView: View) { Toast.makeText(this@RecycleRippleEffect, modelList.get(pos).name, Toast.LENGTH_SHORT).show() } }) |
In the above code we need to read student json data from assets folder, Let's implement below function to How do we read json file from assets folder
private fun readFromAsset(): List<Student> { val modeList = mutableListOf<Student>() val bufferReader = application.assets.open("students.json").bufferedReader() val json_string = bufferReader.use { it.readText() } val jsonArray = JSONArray(json_string); for (i in 0..jsonArray.length() - 1) { val jsonObject: JSONObject = jsonArray.getJSONObject(i) val model = Student(jsonObject.getString("name"), jsonObject.getString("rollNo")) modeList.add(model) } return modeList } |
Step 7: Now Run application and tap on Recyclerview list items, you can see the ripple effect on each event
![]() |
Complete example code for Ripple Effect on Recyclerview item click
Activity code
package com.rrtutors.kotlinprograms.recyclerview import android.graphics.ColorSpace import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.View import android.widget.Toast import androidx.recyclerview.widget.LinearLayoutManager import androidx.recyclerview.widget.RecyclerView import com.rrtutors.kotlinprograms.R import org.json.JSONArray import org.json.JSONObject import java.util.ArrayList class RecycleRippleEffect : AppCompatActivity() { lateinit var recyclerView: RecyclerView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_recycle_ripple_effect) recyclerView=findViewById<RecyclerView>(R.id.recyclerView) val modelList = readFromAsset(); val adapter = StudentAdapter(modelList as ArrayList<Student>) recyclerView.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false) recyclerView.adapter = adapter; adapter.setOnItemClickListener(object : StudentAdapter.ClickListener { override fun onClick(pos: Int, aView: View) { Toast.makeText(this@RecycleRippleEffect, modelList.get(pos).name, Toast.LENGTH_SHORT).show() } }) } private fun readFromAsset(): List<Student> { val modeList = mutableListOf<Student>() val bufferReader = application.assets.open("students.json").bufferedReader() val json_string = bufferReader.use { it.readText() } val jsonArray = JSONArray(json_string); for (i in 0..jsonArray.length() - 1) { val jsonObject: JSONObject = jsonArray.getJSONObject(i) val model = Student(jsonObject.getString("name"), jsonObject.getString("rollNo")) modeList.add(model) } return modeList } } |
How do we set Custom Ripple Effect color to the Recyclerview child itesm.
To add custom ripple color effect we need to create a xml file inside drawable and add below code
ripple.xml
<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:color="@color/colorPrimary" tools:targetApi="lollipop"> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="@color/colorPrimary" /> <corners android:radius="30dp" /> </shape> </item> </ripple> |
Now set this drawable to the list item parent view
android:background="@drawable/ripple"
![]() |
Conclusion: In this Android Recyclerview example we covered how to create Custom ViewHolder to the Recyclerview with Ripple Effect and add Custom ripple color to the item click events
Article Contributed By :
|
|
|
|
3098 Views |