Custom ListView Android + User Interaction dengan Kotlin
Dalam tutorial yang saya tulis kali ini, kita akan membuat sebuah aplikasi android dimana terdapat ListView yang menampilkan gambar dan teks, dan apabila item pada ListView tersebut ditekan (click) maka akan berpindah ke activity yang akan menampilkan detail daripada item tersebut.
Dengan mempelajari tutorial ini, diharapkan anda dapat terbiasa dengan ListView, dan aplikasi yang akan kita buat kali ini adalah daftar mata kuliah, secara garis besar, kita akan mempelajari hal-hal berikut:
- Membuat data source (Sumber data)
- Membuat dan mengisi daftar pada ListView
- Menyesuaikan tata letak pada layout
- Cara mengoptimalkan kinerja dari ListView
Catatan: Versi android studio yang saya gunakan saat menulis tutorial ini adalah versi 4.1, anda bisa menggunakan android studio dengan versi yang sama seperti saya atau versi yang terbaru saat ini.
Memulai Lab
Mendownload Material Lab
Untuk memulai, anda bisa mendownload project yang sudah saya siapkan pada link berikut ini:
Catatan: Tutorial ini akan lebih mudah dipahami apabila dipraktikkan secara langsung menggunakan material diatas.
Membuka Project
Kemudian bukalah android studio versi 4.1 atau versi yang lebih tinggi. Pada tampilan dialog Welcome to Android Studio, silahkan pilih Open an Existing Project.
Pada tampilan dialog berikutnya, pilih projek direktori/folder yang sudah anda download tadi, lalu klik OK.
Menambah dependency
Buka file build.gradle (Pilih yang Module)
Lalu, tambahkan baris script berikut ke dalam blok dependencies{ … }
Glide adalah Library open-source Android yang populer untuk memuat gambar, video, dan GIF animasi. Dengan Glide, anda dapat memuat dan menampilkan media dari berbagai sumber, seperti server jarak jauh atau sistem file lokal.
Kemudian, sinkronisasikan projeknya dengan menekan sync now pada bagian atas kanan seperti berikut:
Tunggu proses sinkronisasi gradle sampai selesai.
Menyiapkan Data Source
Setelah projek sudah siap, hal pertama yang harus dipersiapkan adalah data source (Sumber Data). Buatlah kotlin class pada package lab.rosyidiz.customlistview.data dengan nama MataKuliah, lalu ubah class tersebut menjadi data class seperti berikut:
Data class merupakan class khusus yang digunakan untuk menampung data. Pada Kotlin, data class ditandai dengan keyword data.
Setelah selesai membuat data class, buka file object DataMataKuliah.kt pada package data, lalu tambahkan potongan kode berikut ke baris paling bawah:
Pada tahap ini kita telah selesai menyiapkan data source, kita sudah siap untuk melanjutkan tutorial ke tahap berikutnya.
Menambahkan ListView
Langkah selanjutnya adalah menambahkan ListView ke dalam layout MainActivity. Buka file activity_main.xml, kemudian tambahkan potongan kode berikut ke dalam tag LinearLayout.
Kemudian, buka class MainActivity, lalu tambahkan baris kode untuk membuat variabel baru:
Tambahkan juga baris kode berikut ini kedalam method onCreate():
Membuat Layout Baris
Pada tahap ini, kita akan membuat layout yang akan digunakan oleh ListView sebagai tampilan tiap barisnya. Berikut adalah layout yang akan kita buat:
Buatlah file dengan nama row_item di /res/layout/ , ubah kode pada layout tersebut menjadi seperti berikut:
Membuat Custom Adapter
Buatlah class dengan nama MatkulAdapter di package lab.rosyidiz.customlistview.ui.list, lalu ubah class tersebut menjadi seperti berikut:
Kita telah membuat kerangka adapter yang meng-extends class BaseAdapter(). Kita memerlukan beberapa method yang harus kita implementasikan ke dalam class tersebut. Sebelum masuk ke tahap tersebut, perbarui classnya menjadi seperti dibawah ini:
Disini, kita telah selesai menambahkan constructor dan juga variabel yang digunakan untuk menghubungkan layout dengan adapter.
Langkah selanjutnya adalah mengimplementasikan method adapter, menjadi seperti berikut:
Tips: gunakan fitur Quick Fixes dari android studio untuk memudahkan dalam pengkodean.
Penjelasan kode:
- method getCount(): memungkinkan agar ListView mengatahui berapa banyak item yang ditampilkan, atau dengan kata lain, method ini mengembalikan nilai banyaknya dari data source (sumber data).
- method getItem(): method ini mengembalikan Objek dari data source dengan posisi tertentu.
- method getItemId(): method ini mendefinisikan ID dari tiap baris yang ada pada ListView. Agar mudah, kita gunakan posisi sebagai ID-nya.
- Terakhir, method getView(): method ini membuat tampilan yang akan kita gunakan sebagai baris pada ListView. Dalam method ini, kita dapat mengatur informasi apa saja yang ingin ditampilkan dan dimana saja tata letaknya. Kita juga bisa menghubungkannya dengan layout XML yang telah kita buat sebelumnya di /res/layout/row_item.xml
Mengatur Layout Baris pada ListView
Yang harus kita lakukan sekarang adalah mengatur layout baris pada ListView agar dapat memuat data yang berasal dari data source kita.
Didalam method getView() tambahkan potongan kode berikut ini:
Kode tersebut akan mereferensikan tiap elemen yang ada pada layout baris.
Selanjutnya adalah mengisikan setiap elemen tersebut dengan data yang relevan. Silahkan tambahkan potongan kode berikut ini dibawah kode yang tadi kita tambahkan:
Penjelasan kode:
- Baris ke-3: mengambil data yang sesuai dengan posisinya,
- Baris ke-5: memanfaatkan Library Glide untuk pemuatan gambar ke elemen gambarIcon,
- Baris ke-11 dan 12: memperbarui teks yang ditampilkan dilayout baris sehingga menampilkan data mata kuliah.
Mengubah adapter dari ListView
Sebelum kita mengubah adapter dari ListView, kita panggil terlebih dahulu data source yang sudah kita buat. Buka class MainActivity, lalu tambahkan baris kode berikut:
Tambahkan juga kode berikut ke dalam method onCreated():
Setelah selesai menambahkan kode diatas, kita dapat melanjutkan untuk mengatur adapter dari ListView kita, kita dapat mengatur adapternya dengan menambahkan potongan kode berikut di MainActivity, tambahkan kode ini dibawah kode tadi:
Sekarang, apabila kita jalankan aplikasinya, maka kita akan melihat bahwa tampilan dari ListView sudah berubah, sesuai dengan data source yang ada.
Tetapi, apabila kita tekan item-item yang ada pada ListView tersebut, maka tidak akan terjadi apa-apa. Tentu saja, karena kita belum mengatur bagaimana interaksi dari user terhadap ListView yang kita buat. Tahap selanjutnya yang akan kita kerjakan adalah mengatur hal tersebut.
User Interaction
Untuk meningkatkan pengalaman pengguna, kita bisa menambahkan beberapa kode agar ketika user menekan salah satu baris pada ListView tersebut, maka akan menampilkan detail dari Mata Kuliah tersebut.
Disini kita akan memanfaatkan method onClickItemListener(), dan teknik passing data menggunakan intent.
Buat activity baru
Activity ini akan ditampilkan ketika user menekan salah satu item pada ListView.
Buat Empty Activity baru pada package lab.rosyidiz.customlistview.ui.detail , isikan activity name menjadi DetailActivity, dan biarkan kolom lain terisi secara otomatis, lalu cek apakah sudah seperti pada tampilan berikut ini atau belum:
Klik Finish.
Menambah Tombol Kembali di ActionBar
Buka AndroidManifest.xml difolder /app/manifests/ , lalu cari tag <activity> dengan atribut android:name=”.ui.detail.DetailActivity”, lalu ubahlah menjadi seperti berikut:
Mengubah Tampilan Layout DetailActivity
Buka /res/layout/activity_detail.xml , lalu ubah tampilan layoutnya menjadi seperti berikut ini:
Berikut adalah kode dari tampilan layout tersebut:
Membuat Fungsi Static untuk Membuat Intent Baru
Buka class DetailActivity, lalu tambahkan kode berikut:
Di Kotlin, apabila kita ingin menulis sebuah fungsi atau member variabel di suatu class agar bisa dipanggil tanpa melalui sebuah objek, kita bisa melakukannya dengan menulis member atau fungsi tersebut di dalam companion object suatu class.
Fungsi newIntent() mengembalikan intent untuk memulai DetailActivity, dan menyiapkan beberapa tambahan data ekstra dari mata kuliah.
Menambah Aksi pada ListView Agar Dapat Ditekan
Kembali ke MainActivity, lalu tambahkan kode berikut ke bagian paling bawah dari method onCreate():
Catatan: sebelum kita mendalami penjelasan kodenya, pastikan anda paham tentang empat argumen yang disediakan oleh onItemClickListener(), empat argumen tersebut adalah:
1. parent: tampilan tempat ketika aksi click/pemilihan terjadi, dalam kasus ini, itu parent tersebut adalah ListView.
2. view: Tampilan yang diclick (baris) dalam ListView.
3. position: posisi baris di adapter.
4. id: id baris dari item yang diclick.
Kita telah mengatur setOnClickListener(), lalu apa saja yang terjadi didalam blok tersebut? Berikut penjelasan kodenya:
- Data mata kuliah yang berada pada posisi baris tersebut akan ditampung ke variabel selectedMatkul
- Fungsi newIntent() yang ada pada class DetailActivity dipanggil, dan kemudian nilai yang dikembalikan oleh fungsi tersebut akan ditampung ke variabel detailIntent
- Dan terakhir, memulai activity DetailActivity yang telah ditentukan oleh detailIntent sebelumnya.
Sekarang, coba kita jalankan aplikasinya, apakah sudah benar, atau masih ada error di kodingan yang kita buat.
Apakah hasil running ditempat kalian juga sama seperti itu? Kalo tidak, berarti ada beberapa kode yang terlewati/error ditempat kalian. Coba cek kembali lagi langkah-langkah diatas 😅
Mengoptimalkan Kinerja dari ListView
“Padahalkan ListView nya udah jadi, interaksi dari user juga sudah berjalan dengan baik, kok masih ada tahapan lagi sih?”
Mungkin ada beberapa dari teman-teman yang bertanya tentang hal tersebut, nah, saya akan menjelaskan, kenapa kita perlu melakukan tahapan ini.
Jadi, setiap kali kita meng-scroll layar kebawah maupun keatas, method getView() pada adapter akan dipanggil untuk membuat baris dan menampilkannya dilayar.
Sekarang, jika kita lihat pada method getView(), kita akan melihat bahwa setiap kali method ini dipanggil, method ini melakukan pencarian untuk setiap layout per barisnya dengan menggunakan method findViewById().
Pemanggilan secara berulang ini dapat merusak kinerja ListView, apalagi jika aplikasi yang kita buat dijalankan pada perangkat yang sumber dayanya terbatas dan atau kita memiliki sumber data yang sangat banyak untuk ditampilkan.
Kita dapat mengatasi permasalahan ini dengan menggunakan View Holder Pattern. Lalu, bagaimana cara kita mengimplementasikannya?
Implementasi View Holder Pattern
Untuk mengimplementasikan View Holder Pattern, buka class MatkulAdapter, lalu tambahkan kode berikut dibaris paling bawah (masih didalam class MatkulAdapter):
Seperti yang kita lihat, kita membuat class ViewHolder untuk menampung kumpulan komponen yang ada pada layout barisnya (row_item.xml). Class ViewHolder akan menyimpan subview yang ada pada layout barisnya.
Artinya, kita bisa langsung mengakses subview yang sudah tersimpan tanpa perlu melakukan pencarian berulang kali.
Sekarang, kita ubah baris kode pada method getView() menjadi seperti berikut:
Sekarang coba jalankan kembali aplikasi yang sudah kita buat, apakah ada perubahan pada kinerjanya? Kemungkinan tidak, karena kita tidak bisa merasakan perbedaannya dikarenakan sumber data yang ditampilkan masih sedikit 😅.
Akhirnya, kita telah selesai dalam membuat Custom ListView dan ditambah dengan interaksi dari user. Bagaimana? apakah sulit? atau dirasa masih lumayan mudah? Silahkan, teman-teman bisa berkomentar atau memberikan masukan dalam tutorial yang saya buat ini.
Anda juga bisa melihat maupun mendownload projek yang sudah jadi melalui link berikut: https://github.com/rsdiz/Android-CustomListView-UserInteraction
Terima kasih, sampai berjumpa lagi ditulisan saya yang lain.. Hehe 😀
