Thursday Code : RecyclerView Dengan Data Binding
Hallo semuanyaa..
Selamat datang pada serial Thursday Code. Serial ini rilis tiap hari kamis yang berisikan tentang tutorial atau pengetahuan tentang development Android dari beginner sampai advance. Kali ini Thurday Code akan membahas tentang RecyclerView dengan Data Binding.
Apa itu RecyclerView ?
RecyclerView merupakan library Android untuk menampilkan data dengan jumlah banyak dan bersifat dinamis. RecyclerView merupakan pengembangan dari ListView yang bersifat statis dan RecyclerView bisa kita modifikasi sesuai keinginan dan kebutuhan kita. Kedua hal tersebut membuat RecyclerView lebih superior.
Implementasi
Kali ini kita akan membuat list siswa dengan data yang ditampilkan adalah nama dan kelas. Data memang tidak bersifat dinamis tapi untuk latihan kita menggunakan data statis.
Pertama, tambahkan library Data Binding terlebih dahulu. Jika kalian masih belum mengetahui Data Binding dan penggunaannya, kalian bisa membaca di serial Thursday Code kemarin.
Tambahkan library RecyclerView pada gradle tingkat module atau tambahkan secara otomatis dengan memilih recyclerview pada palette editor xml.
Setelah itu tambah satu layout untuk menjadi layout per item RecyclerView. Sesuai dengan namanya, layout ini berfungsi untuk mengatur tampilan item di RecyclerView atau bisa dibilang container dari data yang kita tampilkan.
Klik kanan pada layout di folder res. pilih New -> Layout Resource File dan ubah layout menjadi seperti ini.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_margin="8dp">
<TextView
android:id="@+id/tv_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Nama Siswa"
android:layout_marginBottom="8dp"/>
<TextView
android:id="@+id/tv_kelas"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Kelas Siswa" />
</LinearLayout>
</layout>
Setelah itu kembali ke layout main activity dan ubah menjadi seperti dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_siswa"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="@layout/item_siswa"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
tools:listitem digunakan untuk menampilkan per item recyclerview kita dengan layout item yang telah kita buat.
Tambahkan satu file kotlin untuk tipe data siswa.
data class Siswa (
val nama : String,
val kelas : String
)
Tambahkan satu file kotlin lagi untuk membuat adapter RecyclerView kita.
class MovieAllAdapter(val context: Context, val clickListener : (Movie) -> Unit) : RecyclerView.Adapter<MovieAllAdapter.MovieViewHolder>() {
var listData : List<Movie> = mutableListOf()
set(value) {
field = value
notifyDataSetChanged()
}
inner class MovieViewHolder(val binding: ItemMovieBinding) : RecyclerView.ViewHolder(binding.root){
fun bind(data : Movie){
binding.root.setOnClickListener { clickListener(data) }
binding.tvTitle.text = data.original_title
binding.tvOverview.text = data.overview
Glide.with(context)
.load(Constanta.imagePath+data.poster_path)
.override(150, 150)
.into(binding.imgPoster)
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) : MovieViewHolder = MovieViewHolder(
DataBindingUtil.inflate(
LayoutInflater.from(parent.context), R.layout.item_movie, parent, false)
)
override fun getItemCount(): Int = listData.size
override fun onBindViewHolder(holder: MovieViewHolder, position: Int) {
holder.bind(listData[position])
}
}
Extends kelasnya sesuai dengan yang diatas untuk menerapkan adapter RecyclerView. Buatlah variable penampung list data siswa dan tambahkan setter untuk list tersebut.
Class SiswaViewHolder merupakan proses dimana kita menset data kita ke layout yang telah disediakan. onCreateViewHolder merupakan method inisial layout kita yang menggunakan Data Binding.
getItemCount merupakan inisial jumlah item yang ditampilkan ke RecyclerView dan onBindViewHolder merupakan proses pengambilan data pada list data kita.
Dan perlu diingat! Ini merupakan class adapter yang sering saya gunakan jadi kalian bisa memodifikasi sesuai keinginan kalian.
Terakhir kita tinggal menghubungkan class adapter kita dengan RecyclerView pada Main Activity kita.
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
val listSiswa = mutableListOf<Siswa>()
listSiswa.add(Siswa("Ade Resie Muchorobbi Setiawan","MIA 5"))
listSiswa.add(Siswa("Teguh Arik Ardiansyah","MIA 5"))
listSiswa.add(Siswa("Linda Sri Rahayu","MIA 5"))
listSiswa.add(Siswa("Nanang Wahyudi","IIS 1"))
listSiswa.add(Siswa("Lukman Hari Prasetyo","IIS 1"))
listSiswa.add(Siswa("Prasetyo Nugroho","IIS 4"))
binding.rvSiswa.apply {
this.adapter = MyAdapter().apply {
this.listData = listSiswa
}
this.layoutManager = LinearLayoutManager(this@MainActivity)
}
}
}
Setelah itu coba jalankan project kalian. Jika terjadi error maka cek ulang apakah tag layout fragment sudah ada atau belum atau kesalahan penulisan code pada kelas adapter maupun main activity.
Untuk project artikel ini bisa kalian lihat pada link github dibawah ini.
Sekian dari Thurday Code kali ini dengan tema RecyclerView pada Android. Pantengin terus hari kamis pada Medium kami Chevalier Lab atau media sosial kami untuk update selanjutnya. Dan jangan lupa kritik dan saran buat Thurday Code agar semakin baik lagi. Sekian dari saya, Terima kasih.
Have a Nice Day!!!