RecyclerView

• Lab 1:
Developing an Android application that uses a RecyclerView to display a list of
animals with their names, and shows additional details (ID, name, description) when
an item is clicked.

1
Step 1: Create project
- File > New > New project > Empty Views Activity > Click Next
- Enter Project name, location, language (Kotlin), min SDK, Kotlin DSL -> Click
Finish
- Add a new Activity: MainActivity2

Step 2: Add RecyclerView to MainActivity:

- activity_main.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"

2
 android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Create a layout for Item view:

Right click on res/layout > New > Layout resource file > Name: item_animal
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardElevation="4dp"
app:cardCornerRadius="8dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">

<TextView
android:id="@+id/nameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>

3
Step 4: Create model class to represent the data:
- Right click on package folder > Data class file > Name: Animal

- Animal.kt:
data class Animal(
val id: Int,
val name: String,
val description: String
)

Step 5: Create Adapter class and ViewHolder class, with Constructor and override
methods:
- Right click on package folder > Kotlin class file > Name: AnimalAdapter > OK

4
- AnimalAdapter.kt:
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class AnimalAdapter(
private val animals: List<Animal>,
private val clickListener: (Animal) -> Unit
) : RecyclerView.Adapter<AnimalAdapter.AnimalViewHolder>() {

inner class AnimalViewHolder(itemView: View) :

RecyclerView.ViewHolder(itemView) {
val nameTextView: TextView =
itemView.findViewById(R.id.nameTextView)

init {
itemView.setOnClickListener {
clickListener(animals[adapterPosition])
}
}
}

override fun onCreateViewHolder(parent: ViewGroup, viewType:

5
Int): AnimalViewHolder {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.item_animal, parent, false)
return AnimalViewHolder(view)
}

override fun onBindViewHolder(holder: AnimalViewHolder,

position: Int) {
holder.nameTextView.text = animals[position].name
}

override fun getItemCount(): Int = animals.size

}

Step 6: MainActivity:
import android.content.Intent
import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

private lateinit var recyclerView: RecyclerView
private lateinit var animalAdapter: AnimalAdapter

private val animals = listOf(

Animal(1, "Lion", "A large wild cat."),
Animal(2, "Tiger", "The largest cat species."),
Animal(3, "Elephant", "The largest land animal."),
Animal(4, "Giraffe", "Tallest land animal."),
Animal(5, "Zebra", "Striped horse-like animal.")
)

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_main)

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main
)) { v, insets ->
val systemBars =
insets.getInsets(WindowInsetsCompat.Type.systemBars())

6
 v.setPadding(systemBars.left, systemBars.top,
systemBars.right, systemBars.bottom)
insets
}

recyclerView = findViewById(R.id.recyclerView)
recyclerView.layoutManager = LinearLayoutManager(this)

animalAdapter = AnimalAdapter(animals) { animal ->

showAnimalDetails(animal)
}
recyclerView.adapter = animalAdapter
}

private fun showAnimalDetails(animal: Animal) {

val intent = Intent(this, MainActivity2::class.java)
intent.putExtra("ANIMAL_ID", animal.id)
intent.putExtra("ANIMAL_NAME", animal.name)
intent.putExtra("ANIMAL_DESCRIPTION",
animal.description)
startActivity(intent)
}
}

Step 8: MainActivity2:
- activity_main2.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity2">

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
app:cardElevation="4dp"
app:cardCornerRadius="8dp">

<LinearLayout

7
 android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">

<TextView
android:id="@+id/idTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="bold"
android:paddingBottom="8dp" />

<TextView
android:id="@+id/nameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textStyle="bold" />

<TextView
android:id="@+id/descriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_marginTop="8dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>

</LinearLayout>
- MainActivity2:
import android.os.Bundle
import android.widget.TextView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity2 : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_main2)

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main
)) { v, insets ->

8
 val systemBars =
insets.getInsets(WindowInsetsCompat.Type.systemBars())
v.setPadding(systemBars.left, systemBars.top,
systemBars.right, systemBars.bottom)
insets
}

val id = intent.getIntExtra("ANIMAL_ID", 0)
val name = intent.getStringExtra("ANIMAL_NAME") ?:
"Unknown"
val description =
intent.getStringExtra("ANIMAL_DESCRIPTION") ?: "No description
available"

val idTextView: TextView = findViewById(R.id.idTextView)

val nameTextView: TextView =
findViewById(R.id.nameTextView)
val descriptionTextView: TextView =
findViewById(R.id.descriptionTextView)

idTextView.text = "ID: $id"

nameTextView.text = "Name: $name"
descriptionTextView.text = "Description: $description"
}
}

• Lab 2:
Use RecyclerView to show list of products in HomeActivity. Click an Item, show
DetailActivity.

9
*Read more:
https://www.geeksforgeeks.org/android-recyclerview-in-kotlin/
Jetpack Compose:
https://developer.android.com/develop/ui/compose/migrate/migration-scenarios/recycler-
view?hl=vi

10