Pendahuluan
Bertemu lagi kita di blog yang membahas tentang teknologi informasi dan pemrograman komputer. kali ini kita akan membahas tentang satu komponen di anroid studio, yaitunya RecyclerView. Komponene ini merupa pengembangan dari ListView. Artinya dengan menggunakan komponen ini kita bisa merancang tampilan android dalam bentuk list.
RecyclerView sendiri merupakan pengembangan dari ListView yang lebih di sederhanakan guna menjawab permasalahan yang timbul di ListView. Jika pada listView semua data akan ditampilkan, berbeda pada RecyclerView. Hanya dua data sebelum dan dua data sesudah yang di tampilkan pada layout sehingga membuat proses pada tampilan android lebih mudah. Perhatikan Gambarnya:
Konsep membuat RecicylerView dapat dilihat pada skema berikut
Persiapan
Jalankan Android Studio anda dan buatlah sebuah projek baru dengan ketetapan seperti berikut:
Template : Empty Views Activaty
Nama projek :Buku
Language :Kotlin
Setelah persiapan selesai, saatnya kita masuk ke tahapan berikutnya.
Konfigurasi:
Sebelum kita memulai membuat projek android dengan metode recyclerView, terlebih dahulu kita tambahkan sebaris perintah. Perintah tersebut di tulis di buidl.gradle(module:app). Buka root Gradle Scripts dan tambahakn perintahnya:
plugins {
id("com.android.application")
id("org.jetbrains.kotlin.android")
id("kotlin-parcelize") => Tambahkan baris perintah ini
}
Setelah itu lakukan synron dengan mengklik sync Now yang terdapat pada bagian atas halaman utama. Tunggu beberapa saat hingga library selesai didownload. Pastikan anda terkoneksi ke internet. Baris perintah diatas berfungsi agar semua propertis di serialisasikan dalam bentuk konstructor nantinya. Karena data akan kita letakkan pada file string.xml
Sekarang buka layout activity_main.xml dan tambahkan komponen recyclerView di dalamnya. Komponen ini berguna sebagai list dari item-item yang akan dikirim nantinya. Dan kita bisa tambahkan sebuah komponen TextView sebagai judul/Title. Sedangkaan layout kita rubah dengan menggunakan LinearLayout. Perhatikan script seperti berikut ini:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="10dp"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="DAFTAR BUKU"
android:textAlignment="center"
android:padding="15dp"
android:textSize="18dp"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_buku"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
NB: Anda dapat memodivikasi tampilan sesuai dengan keinginan anda.
Nah sampai disini kita telah selesai membuat halaman utama dari projek kita. Selanjutnya kita akan membuat disain list buku.
Membuat List Item/Buku
List Item/Buku yang dimaksud disini adalah desain tampilan dari list yang akan di tampilkan pada activity_main.xml. Kita perlu membuat sebuah file layout satu buah. Masih pada root App=> Res=>Layout, klik kanan pada folder Layout, pilih New dan pilih Layout Resource File. Beri nama layout tersebut dengan nama "list_buku" dan klik OK.
Selanjutnya pada halaman list_buku.xml tulislah script berikut:
<?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:id="@+id/cv_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#f7f8f3"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">
<TextView
android:id="@+id/tv_judul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Judul Buku"
android:textSize="18dp"
android:padding="15dp"/>
</androidx.cardview.widget.CardView>
Desain layout untuk list buku kita buat menggunakan cardView. Kita gunakan sebuah TextView dengan ID tv_judul. Id ini nanti akan di panggil jadi pastikan anda mengingat id dari textview tersebut.
Membuat Data Array Pada String.xml
Data buku akan kita letakkan pada file string.xml. File ini nanti akan kita akses. File ini terletak pada root App=>Res=>values=>String.xml. Silahkan anda buka file tersebut. Kita akan melakukan penambahan item pada file tersebut.
<resources>
<string name="app_name">RecyclerView</string>
<string-array name="data_judul">
<item>Dasar-Dasar Android</item>
<item>Memahami Kotlin Dalam 10 Hari</item>
<item>Kotlin Vs Java</item>
</string-array>
</resources>
Perhatikan kita memiliki data array dengan nama data_judul yang mana di dalamnya terdapat 3 buah item. Nama string ini nanti akan kita panggil kembali.
Membuat Data Class
Data Class merupakan kumpulan variabel yang akan di panggil oleh adapter nantinya. Karena disini kita hanya memiliki 1 variable, yaitu title maka di data class kita akan membuat 1 variabel dengan nama title.
Masuk ke root App=>Java=>com.example.recyclerView. Klik kanan dan pilih New. Kemudian pilih Kotlin Class/File. Isi Name dengan nama "DataItem". Kemudian klik Data Class.
package com.example.buku
import android.os.Parcelable
import kotlinx.parcelize.Parcelize
@Parcelize
data class DataItem(
val judul: String
): ParcelableSelanjutnya lakukan langkah yang sama. Pilih root App=>Java=>com.example.recyclerView. Klik kanan dan pilih New. Kemudian pilih Kotlin Class/File. Isi Name dengan nama "ItemAdapter". Kemudian klik Class.
Lengkapi kode ItemAdapter seperti berikut:
class ItemAdapter(
private val listBuku : ArrayList<DataItem>
) : RecyclerView.Adapter<ItemAdapter.listViewHolder>()
Terdapat Error pada ItemAdapter dan ListViewHolderBukan. Jangan khawatir, kita akan memperbaikinya.
Pertama-tama kita perbaiki dulu listViewHolder. Perintah ini error karena kita belum membuat class. Jadi cara membuatnya letakkan cursor (Tampa di klik) pada "ListViewHolder" hingga muncul librarynya. Pilih Create Class ListViewHolder. Jika Muncul ItemAdapter klik saja. Nanti akan dibuat class baru di dalam class ItemAdapter. Dan tambahkan perintah view dan RecylerView.viewHolder(view) pada class tersebut. Perhatikan script nya:
class ItemAdapter(
private val listBuku : ArrayList<DataItem>
) : RecyclerView.Adapter<ItemAdapter.listViewHolder>() {
class listViewHolder: RecyclerView.ViewHolder() {
}
}
Masih Error juaga?. Klik RecyclerView.ViewHolder atau anda dapat menggunakan kombinasi ALT + ENTER. pilih Add Constructor Parameters Form ViewHolder(View) sehingga Script berubah seperti berikut:
import android.view.View
import androidx.recyclerview.widget.RecyclerView
class ItemAdapter(
private val listBuku : ArrayList<DataItem>
) : RecyclerView.Adapter<ItemAdapter.listViewHolder>() {
class listViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
}
}
Masih Error juga,? Sekarang arahkan cursor ke class ItemAdapter sehingga muncul library. pilih Implement Members sehingga muncul dialog Implement Member. Terdapat 3 class di dalam Dialog tersebut. Pilih ke 3 class tersebut dan klik OK.
Nah, code program anda akan berubah seperti berikut:
package com.example.recyclerview
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
class ItemAdapter(
private val listBuku : ArrayList<DataItem>
) : RecyclerView.Adapter<ItemAdapter.listViewHolder>() {
class listViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): listViewHolder {
TODO("Not yet implemented")
}
override fun getItemCount(): Int {
TODO("Not yet implemented")
}
override fun onBindViewHolder(holder: listViewHolder, position: Int) {
TODO("Not yet implemented")
}
}
Lengkapi script seperti berikut:
package com.example.bukuimport android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class ItemAdapter(
private val listBuku: ArrayList<DataItem> //DataItem adalah nama dataclass
) : RecyclerView.Adapter<ItemAdapter.ListViewHolder>() { //ItemAdapter adalah nama
class ListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val tvJudul: TextView = itemView.findViewById(R.id.tv_judul)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListViewHolder {
val view: View = LayoutInflater.from(parent.context).inflate(R.layout.list_buku, parent, false) // list_buku adalah nama file xml
return ListViewHolder(view)
}
override fun getItemCount(): Int = listBuku.size
override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
val (judul) = listBuku[position]
holder.tvJudul.text = judul
}
}
Sampai disini kita telah selesai membuat Class Adapter. Selanjutnya kita akan bermain-main di MainActivity.kt. Silahkan buka file MainActivity.kt:
package com.example.buku
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
private lateinit var rvBuku: RecyclerView
private val list = ArrayList<DataItem>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
rvBuku = findViewById(R.id.rv_buku) // id dari recyclerView
rvBuku.setHasFixedSize(true)
list.addAll(getListBuku())
showBuku()
}
private fun getListBuku():ArrayList<DataItem>{
val dataJudul = resources.getStringArray(R.array.data_judul)
val listBuku = ArrayList<DataItem>()
for (i in dataJudul.indices) {
val buku = DataItem(dataJudul[i])
listBuku.add(buku)
}
return listBuku
}
private fun showBuku(){
rvBuku.layoutManager = LinearLayoutManager(this)
val listItem = ItemAdapter(list)
rvBuku.adapter = listItem
}
}
Jalankan Projek Anda. Jika semua langkah anda lakukan secara benar, maka hasilnya akan seperti berikut ini:
Nah, sampai disini kita sudah selesai membuat RecyclerView.
Nah sekarang coba anda masuk ke string.xml dan lengkapi data_judul seperti berikut:
<item>Aplikasi Komputer</item>
<item>30 Menit Mahir Jaringan Komputer</item>
<item>Buku Mahir Web Programming</item>
<item>Jaringan Komputer Microtik</item>
<item>Pemrograman Strukturdata C</item>
<item>Buku Panduan Dasar Pemrograman Untuk Pemula</item>
<item>Buku Sakti Pemrograman Web</item>
<item>Pengantar Aplikasi Komputer</item>
</string-array>
Amati apa yang terjadi pada program anda. Anda akan dapat memahami bahwa data yang di tampilkan adalah data yang di buat di string.xml tersebut. Nah, Bagaimana dengan cara upload gambar. Akan kita bahas pada artikel selanjutnya.
