Scribd
Upload
28 views4 pages

Displaying Items in A List Using RecyclerView

RecyclerView

Uploaded by

Aaron Jude Pael
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views4 pages

Displaying Items in A List Using RecyclerView

RecyclerView

Uploaded by

Aaron Jude Pael
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You might also like