How to make a RecyclerView
On this page you will learn to make a list view like the image below.
- Creating layout for listview items
- Define model for list item
- Implement recyclerview adapter
- Finally, enter the data into the listview
The first step you need to do is create a layout for each item in the list. For example, if you want to create a layout like the image above, here are the steps:
- In the main menu, select File > New > XML > Layout XML File
- name the file item_history
- Click Finish to create the layout
- Enter the below xml code into item_history.xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView android:id="@+id/notificationItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginHorizontal="20dp"
android:layout_marginVertical="10dp"
app:cardCornerRadius="10dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="Device id"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="@+id/frame4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginHorizontal="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3">
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hasil prediksi"
android:textSize="14sp" />
</FrameLayout>
<TextView
android:id="@+id/waktu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="5dp"
android:text="09:41, 2 Mei 2021"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/frame4"
android:layout_marginBottom="20dp"/>
<ImageView
android:id="@+id/panah"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_keyboard_arrow_right_black_18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>Before going to the next step make sure you have a model for the data in the listview. Make sure the model you create contains only the fields that are really needed in your listview items.
- In the main menu, select File -> New -> Kotlin File/Class
- Name it RegionHistoryMod and then press enter
- Enter the below kotlin code into RegionHistoryMod.kt
data class RegionHistoryMod(
var namaDevice: String,
var hasilPrediksi: String,
var time: String,
var idClip: String
)To display data from listview/recyclerview we need an adapter. This adapter determines how the data will be loaded into the listview.
- In the main menu, select File -> New -> Kotlin File/Class
- Name it RegionHistoryAdapter and then press enter
- Enter the below kotlin code into RegionHistoryAdapter.kt
class RegionHistoryAdapter(val Data: ArrayList<RegionHistoryMod>): RecyclerView.Adapter<RegionHistoryAdapter.ItemData_Holder>() {
var onItemClick: ((RegionHistoryMod) -> Unit)? = null
inner class ItemData_Holder(ItemLayout: View) : RecyclerView.ViewHolder(ItemLayout) {
var NamaDevice: TextView = ItemLayout.findViewById(R.id.textView3)
var HasilPrediksi: TextView = ItemLayout.findViewById(R.id.textView4)
var Waktu: TextView = ItemLayout.findViewById(R.id.waktu)
init {
itemView.setOnClickListener {
onItemClick?.invoke(Data[adapterPosition])
}
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemData_Holder {
val view: View =
LayoutInflater.from(parent.context).inflate(R.layout.item_history, parent, false)
return ItemData_Holder(view)
}
override fun onBindViewHolder(holder: ItemData_Holder, position: Int) {
val An_Item = Data[position]
holder.NamaDevice.text = An_Item.namaDevice
holder.HasilPrediksi.text = An_Item.hasilPrediksi
holder.Waktu.text = An_Item.time
}
override fun getItemCount(): Int {
return Data.size
}
}Create a list of type RegionHistoryMod(which you created in the previous step). You can fill this list in various ways. for example, make a request to the api or fill it manually. In this tutorial we will fill it manually. First, type this code in your activity/fragment to fill the list manually
val data = arrayListOf<RegionHistoryMod>()
data.add(RegionHistoryMod("device1", "kebakaran", "20 maret 2021", "001"))
data.add(RegionHistoryMod("device4", "tembakan", "21 maret 2021", "002"))
data.add(RegionHistoryMod("device2", "kebakaran", "22 maret 2021", "003"))
data.add(RegionHistoryMod("device1", "helikopter", "23 maret 2021", "004"))Now just enter the data that we have created into the listview. Under the code you wrote earlier, enter:
myRecyclerView.layoutManager = LinearLayoutManager(getActivity())
val ListAdapter = RegionHistoryAdapter(data) //arraylist berisi data
myRecyclerView.adapter = ListAdapter
ListAdapter.onItemClick = {
//here you can write the code to set what happens when this listview item is clicked
}