RecylerView dan ListView
RecyclerView adalah sebuah komponen tampilan (widget) yang lebih canggih ketimbang pendahulunya listview. Gambar di bawah menunjukkan perbedaan ListView dan RecyclerView, jika Anda menggunakan ListView objek dari tiap item akan dibuat semuanya dari awal sampai akhir. Sedangkan jika Anda menggunakan RecyclerView, objek yang dibuat hanya sebatas ukuran layar dan beberapa di atas dan di bawahnya saja. Selanjutnya ia menggunakan kembali item yang sudah tidak
terlihat.
Apa dampaknya? Mungkin jika datanya sedikit tidak terasa, tetapi bagaimana jika datanya 1000? Tentu dengan menggunakan RecyclerView aplikasi akan menjadi lebih efisien dan tidak menghabiskan memori.
Sebenarnya masalah pada ListView dapat diatasi dengan menggunakan ViewHolder pattern., namun penggunaannya belum diharuskan di ListView. Berbeda dengan RecyclerView yang mewajibkan menggunakan ViewHolder.
Selanjutnya lihatlah gambar penerapan RecyclerView berikut ini:
Gambar di atas menerangkan beberapa komponen yang harus Anda ketahui sebelum
menggunakan recyclerview.
1. RecyclerView dan LayoutManager: Komponen antarmuka yang bertugas untuk
menampilkan data set yang dimiliki di dalamnya. Layoutmanager akan mengatur
posisi tampilan data baik itu secara list (vertikal), grid (baris dan kolom) atau
staggered grid (grid yang memiliki susunan tak seragam / tak beraturan).
2. Adapter: Komponen yang akan mengatur bagaimana menampilkan data set ke
dalam RecyclerView. Di sinilah terjadi proses pengisian tampilan (ViewInflate) dari
file layout xml untuk tiap elemen dari data yang sebelumnya terpasang (bind) ke
dalam RecyclerView.
3. Dataset: Kumpulan data yang dimiliki dan ingin ditampilkan. Bisa berupa array, list maupun obyek map.
4. Item Animator: Ini yang spesial. Kita bisa pasang animasi untuk tiap item di
dalamnya. Contoh animasi yang umum seperti penambahan (add) dan penghapusan
(removal) item. Kita akan mempelajari hal ini pada materi terpisah.
Menambahkan depencies
implementation ‘androidx.recyclerview:recyclerview:1.1.0’ implementation ‘androidx.cardview:cardview:1.0.0’
implementation ‘de.hdodenhof:circleimageview:3.1.0’ implementation ‘com.github.bumptech.glide:glide:4.11.0’
Membuat layout recyclerview
<?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:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.activity_menu”
android:background=”@color/colorblue”
android:orientation=”vertical”>
<androidx.cardview.widget.CardView
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_marginHorizontal=”20dp”
android:layout_marginTop=”100dp”
android:layout_marginBottom=”-12dp”
app:cardCornerRadius=”15dp”>
<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<androidx.recyclerview.widget.RecyclerView android:id=”@+id/recycler_view”
android:layout_width=”match_parent” android:layout_height=”match_parent”>
</androidx.recyclerview.widget.RecyclerView> </RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Membuat layout baru recycler_view_template
<?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:layout_margin=”8dp”
android:orientation=”horizontal”>
<ImageView
android:id=”@+id/img_view”
android:layout_width=”55dp”
android:layout_height=”55dp”
android:layout_marginRight=”8dp”
android:src=”@mipmap/ic_launcher”/>
<LinearLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”>
<TextView
android:id=”@+id/txt_judul”
android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”Judul”
android:textColor=”@color/black”
android:textSize=”18sp”/>
<TextView
android:id=”@+id/txt_desc”
android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”Desc”
android:textSize=”18sp”/>
</LinearLayout>
</LinearLayout>
Membuat dataclass asset media
package id.or.amcc.pelatihanpengurus
data class AsetMedia(val imgView:Int, val txtJudul: String, val txtDesc: String)
lalu copy asset ke drawable
lalu buat di menu activity
package id.or.amcc.pelatihanpengurus
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class activity_menu : AppCompatActivity() {
lateinit var recyclerView: RecyclerView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_menu)
init()
}
private fun init() {
recyclerView = findViewById(R.id.recycler_view)
var data = ArrayList<AsetMedia>()
data.add(AsetMedia(R.drawable.facebook, “Facebook”, “ini Facebook”))
data.add(AsetMedia(R.drawable.facebook, “Facebook”, “ini Facebook”))
data.add(AsetMedia(R.drawable.facebook, “Facebook”, “ini Facebook”))
}
}
selanjutnya membuat adapter
package id.or.amcc.pelatihanpengurus
import androidx.recyclerview.widget.RecyclerView
class MyAdapter (private val data: ArrayList<AsetMedia>): RecyclerView.Adapter() {
lalu membuat viewholder
package id.or.amcc.pelatihanpengurus
import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class ViewHolder (inflater: LayoutInflater, parent:ViewGroup) :
RecyclerView.ViewHolder(inflater.inflate(R.layout.recycler_view_temp late,parent, false)){
private var imgView: ImageView? = null
private var txtJudul: TextView? = null
private var txtDesc: TextView? = null
init {
imgView = itemView.findViewById(R.id.img_view)
txtJudul= itemView.findViewById(R.id.txt_judul)
txtDesc = itemView.findViewById(R.id.txt_desc)
}
fun bind(data: AsetMedia) {
imgView?.setImageResource(data.imgView)
txtJudul?.text = data.txtJudul
txtDesc?.text = data.txtDesc
}
}
lalu masuk ke myAdapter dan kita impementasi member
Akan jadi seperti ini
package id.or.amcc.pelatihanpengurus
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
class MyAdapter (private val data: ArrayList<AsetMedia>):
RecyclerView.Adapter<ViewHolder>() {
override fun getItemCount(): Int {
TODO(“Not yet implemented”)
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
TODO(“Not yet implemented”)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
TODO(“Not yet implemented”)
}
}
selanjutnya kita return bagian getItemCount
package id.or.amcc.pelatihanpengurus
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
class MyAdapter (private val data: ArrayList<AsetMedia>):
RecyclerView.Adapter<ViewHolder>() {
override fun getItemCount(): Int {
return data.size
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.bind(data[position])
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val inflater :LayoutInflater =
LayoutInflater.from(parent.context)
return ViewHolder(inflater,parent)
}
}
lalu masuk ke activity menu kita tambahkan lateinit var dan juga init
package id.or.amcc.pelatihanpengurus
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class activity_menu : AppCompatActivity() {
lateinit var recyclerView: RecyclerView
lateinit var adapter: MyAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_menu)
init()
recyclerView.layoutManager = LinearLayoutManager(this) recyclerView.adapter = adapter
}
private fun init() {
recyclerView = findViewById(R.id.recycler_view)
var data = ArrayList<AsetMedia>()
data.add(AsetMedia(R.drawable.facebook, “Facebook”, “ini Facebook”))
data.add(AsetMedia(R.drawable.facebook, “Facebook”, “ini Facebook”))
data.add(AsetMedia(R.drawable.facebook, “Facebook”, “ini Facebook”))
// set adapter
adapter = MyAdapter(data)
}
}
jika sudah, seharusnya aplikasi sudah bisa di jalankan dan menampilkan ListView dari Recycler View