Displaying Items in a List using RecyclerView
This example will display a list of contacts with their names and phone numbers. We will include custom layouts
for each item in the list, and a click listener for each item.
1. Create the Layout for Each Item (item_contact.xml):
Create an XML layout file for individual items in the RecyclerView. This layout will contain a TextView
for the contact name and another TextView for the phone number.
<?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="vertical"
android:padding="16dp">
<TextView
android:id="@+id/contactName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@android:color/black"/>
<TextView
android:id="@+id/contactPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="@android:color/darker_gray"/>
</LinearLayout>
2. Create the Data Model (Contact.kt):
Create a data class to represent the contact information.
data class Contact(
val name: String,
val phone: String
)
3. Create the Adapter for RecyclerView (ContactAdapter.kt):
Create an adapter that will bind the contact data to the RecyclerView items.
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class ContactAdapter(
private val contactList: List<Contact>,
private val itemClickListener: OnItemClickListener
) : RecyclerView.Adapter<ContactAdapter.ContactViewHolder>() {
interface OnItemClickListener {
fun onItemClick(contact: Contact)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ContactViewHolder {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.item_contact, parent, false)
return ContactViewHolder(view)
}
override fun onBindViewHolder(holder: ContactViewHolder, position: Int) {
val contact = contactList[position]
holder.bind(contact, itemClickListener)
}
override fun getItemCount(): Int {
return contactList.size
}
class ContactViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
private val nameTextView: TextView = itemView.findViewById(R.id.contactName)
private val phoneTextView: TextView = itemView.findViewById(R.id.contactPhone)
fun bind(contact: Contact, clickListener: OnItemClickListener) {
nameTextView.text = contact.name
phoneTextView.text = contact.phone
itemView.setOnClickListener {
clickListener.onItemClick(contact)
}
}
}
}
4. Main Layout with RecyclerView (activity_main.xml):
Create the main activity layout that includes the RecyclerView.
<?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="match_parent"
android:orientation="vertical"
android:padding="16dp">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
5. Set Up RecyclerView in the Activity (MainActivity.kt):
Set up the RecyclerView in your activity, initialize the adapter, and handle item clicks.
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity(), ContactAdapter.OnItemClickListener {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val contacts = listOf(
Contact("John Doe", "+1234567890"),
Contact("Jane Smith", "+0987654321"),
Contact("Alice Johnson", "+1122334455"),
Contact("Bob Brown", "+6677889900")
)
val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = ContactAdapter(contacts, this)
}
override fun onItemClick(contact: Contact) {
Toast.makeText(this, "Clicked: ${contact.name}", Toast.LENGTH_SHORT).show()
}
}
Explanation:
Data Model (Contact.kt): A simple data class to represent each contact.
Adapter (ContactAdapter.kt): The adapter binds the data to the views within the
RecyclerView. It also handles item clicks via the OnItemClickListener interface.
ViewHolder: Manages the views for each item in the list. The bind method in ContactViewHolder
binds the data to the views and sets up the click listener.
Main Activity (MainActivity.kt): Sets up the RecyclerView with a linear layout manager and
connects it to the adapter. It also handles item click events, showing a Toast message with the contact
name.
XML Layouts: The layout files define the structure of the RecyclerView and the individual items.
