Membuat RecyclerView menggunakan Kotlin

Hafid Ali Mustaqim
3 min readSep 29, 2019

--

Assalamualaikum warahmatullohi wabarakatuh.

pada kesempatan kali ini saya akan membagikan tutorial singkat bagiamana cara membuat recyclerview pada kotlin. Recyclerview merupakan sebuah widget pada yang mana merupakan pengembangan dari listview jadi recyclerview lebih complex dan lebih banyak fiturnya. untuk contoh penerapan recylerview bisa lihat. gambar dibawah ini :

recyclerview menggunakan kotlin

recyclerview ini menampung item-item dalam bentuk list. langsung saja :

Menambahkan Library Ke Projek :

  1. Buka build.gradle file pada projek anda
  2. tambahkan kode berikut
implementation 'com.android.support:recyclerview-v7:28.0.0'

3. buat project baru beri nama Recyclerview Wisata

membuat project baru pada android studio
beri nama project recyclerview wisata

4. setelah project dibuat selanjutnya kita akan mengedit layoutnya terlebih dahulu, buka activity_main.xml, sesuaikan kode seperti dibawah ini :

<RelativeLayout 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=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/listWisata"
android:layout_width="match_parent"
android:layout_height="wrap_content" app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

</RelativeLayout>

sehingga akan tampil preview seperti ini :

gambar recyclerview

5. langkah selanjutnya kita akan membuat layout untuk menampilkan item-item tadi kedalam recyclerview, buat layout baru caranya klik kanan pada package layout->new->layout resource file sesuaikan kode seperti dibawah ini:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/itemImage"
android:src="@drawable/bali"
android:scaleType="fitXY"
android:contentDescription="@string/app_name" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-thin"
android:layout_alignParentBottom="true"
android:textAllCaps="true"
android:id="@+id/itemTitle"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="italic"
android:layout_marginStart="10dp"
android:layout_marginBottom="20dp"/>

</RelativeLayout>

Untuk asset gambar silahkan download disini :

https://drive.google.com/open?id=1UTV9E9Acnsx0-AgpOIfMskxldukYXEdr

setelah gambar di unduh pindahkan ke drawable.

6. tambahkan data nama, dan gambar pada MainActivity.kt seperti ini :

7. Buat adapter, adapter berfungsi untuk menjembatani antara layout item dengan view. beri nama WisataAdapterRecycler.kt

class WisataAdapterRecycler(var dataImage: Array<Int>, var dataTitle: Array<String>): RecyclerView.Adapter<WisataAdapterRecycler.MyHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.wisata_item, parent, false)
return MyHolder(view)
}

override fun getItemCount() = dataImage.size

override fun onBindViewHolder(holder: MyHolder, position: Int) {


holder.bind(dataTitle[position], dataImage[position])
}

class MyHolder(itemView: View) : RecyclerView.ViewHolder(itemView){
fun bind(dataTitle: String, dataImage: Int) {

itemView.itemImage.setImageResource(dataImage)
itemView.itemTitle.text = dataTitle
}

}
}

8. selanjutnya buka MainActivity.kt didalam onCreate tambahkan kode berikut :

val adapter = WisataAdapterRecycler(dataImage, dataTitle)
listWisata.adapter = adapter

sehingga MainActivity.kt menjadi seperti ini :

langkah terakhir kita run aplikasi nya :

Yeah!! Aplikasi berhasil dijalankan dengan baik, mungkin itu dulu yang bisa saya tulis, nantikan postinganku selanjutnya ya sob, thankss.

--

--