Membuat Adapter ListView dan RecyclerView dengan Mudah pada Kotlin

Syahrizal Akbar
Udacoding
Published in
5 min readOct 7, 2019

Bismillah, pada postingan kali ini kita akan belajar bagaiman membuat sebuah adapter baik untuk ListView dan RecyclerView dengan mudah.

Custom Adapter ListView

Sebelum itu kita harus membuat dua buah resource layout terlebih dahulu, satu untuk ListViewnya, satu lagi untuk item dari ListViewnya :

pada activity_main.xml, kita edit menjadi seperti berikut :

<?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"
tools:context=".MainActivity"
>

<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:listitem="@layout/item_listview"
/>

</LinearLayout>

lalu kita tambahkan item_listview.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
>

<TextView
android:id="@+id/nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama"
/>
<TextView
android:id="@+id/nomor_telepon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="No Telp"
/>

</RelativeLayout>

Ini hasil previewnya

Selanjutnya kita buat sebuah data dummy terlebih dahulu di MainActivity untuk ditampilkan di listviewnya :

Edit dan tambahkan variable nama dan notelp seperti berikut di MainActivity :

Jika sudah kita tinggal membuat adapternya, caranya yaitu bua sebuah dengan nama class bebas lalu ketikkan seperti berikut :

Selanjutnya kita tekan ALT + Enter pada tulisan class ListViewAdapter yang merah, dan kita implement semuanya :

Jika sudah maka hasilnya menjadi seperti berikut (hapus TODO …) :

Lalu edit constructornya dan tambahkan parameter dari data yang akan dikirimkan seperti berikut :

Selanjutnya kita isi dari masing2 fungsinya, ikuti langkah-langkah berikut :

getView()

getCount()

kita return total dari data yang kita tampilkan

getItem() dan getItemId()

kita kosongkan saja dengan mereturn nilai 0

Langkah terakhir tinggal kita setadapternya menggunakan adapter yang telah kita buat :

Run dan hasilnya :

Custom Adapter RecyclerView

Sekarang kita akan buat adapter untuk recyclerview, pada recyclerview ini sebagai contoh kita akan tambahkan gambar, agar berbeda dari listview yang sebelumnya kita buat:

Download gambar apa saja diinternet, atau bisa download gambar yang ini :

https://drive.google.com/open?id=1_MxLWibmcJxLki6xCBVlScgTmqdRPWRw

Jika sudah kita paste didalam folder drawable, seperti berikut :

Lalu kita buat data dummy di MainActivity.kt

Jika sudah kita buat dua buah layout, satu untuk recyclerview itu sendiri, satu lagi untuk item dari recyclerview :

kita buat item_recyclerview.xml, lalu kita buat seperti berikut

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
>

<ImageView
android:id="@+id/gambar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/apple"
/>

<TextView
android:id="@+id/nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:padding="16dp"
android:textSize="32sp"
android:textStyle="bold"
android:textColor="@android:color/white"
android:text="Nama"
/>

</RelativeLayout>

Pada activity_main.xml, edit dan tambahkan recyclerview, dan jangan lupa layoutManagernya ditambahkan:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"
>

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

</RelativeLayout>

Langkah selanjutnya kita buat class RecyclerViewAdapter (nama bebas), dan ketikkan seperti berikut :

lalu pada MyHolder yang merah kita ALT + Enter, pilih Create class ‘MyHolder’

lalu pilih yang RecyclerViewAdapter agar berada di inner class

class MyHolder yang telah kita buat, tinggal ditambahkan seperti berikut :

lalu ALT + Enter pada RecyclerView.ViewHoldernya, pilih Add constructor parameters from ViewHolder(view)

hasilnya

lalu kita implement RecyclerViewAdapter, dengan cara ALT + Enter apda RecyclerViewAdapter, dan pilih Implement members :

pilih semuanya lalu ok :

hasilnya (bersihkan TODO) :

isikan parameter dari constructor dengan data yang akan ditampilkan

onCreateViewHolder()

kita buat seperti berikut :

getItemCount()

kita return panjang baris yang akan ditampilkan

MyHolder()

kita ambil viewnya

onBindViewHolder()

lalu kita set isinya

terakhir kita set adapternya pada MainActivity

run dan hasilnya seperti berikut :

Sekian mudah-mudahan artikel ini bermanfaat untuk pembaca :D

--

--