Kotlin Basic (2) : RecyclerView

Fatima Azzahro
Sep 16 · 4 min read

Pada artikel kali ini, kita akan membuat Aplikasi Android menggunakan Bahasa Kotlin untuk menampilkan sebuah halaman daftar (list) sederhana menggunakan RecyclerView. Artikel ini adalah kelanjutan dari artikel Kotlin Basic: Activity.

Ketika kita membuat project baru, kita memiliki halaman utama, terdiri dari Activity dan Layout yang masih kosong.

Activity untuk halaman utama yaitu MainActivity.kt dapat diakses di app/java/id.belanja.app/MainActivity.kt berisi baris kode berikut:

RecyclerView

Layout halaman utama dapat diakses di app/res/layout/activity_main.xml. Kita modifikasi layout tersebut dengan menambahkan komponen untuk menampung list berisi item — item yaitu RecyclerView.

RecyclerView Item Layout

RecyclerView akan menampilkan list yang berisi item — item. Item pada list tersebut dapat berupa sebuah layout yang dapat digunakan berkali — kali.

Oleh karena itu, kita perlu menambahkan Layout untuk RecyclerView Item melalui menu File > New > Android Resource File

Layout tersebut dapat diakses di app/res/layout/item_list_product.xml.

Kita tambahkan beberapa View komponen pada item_list_product.xml, agar dapat menghasilkan tampilan item seperti di atas, yaitu sebagai berikut:

Selanjutnya, kita tambahkan sedikit modifikasi, sehingga baris kodenya menjadi sebagai berikut:

RecyclerView in Main Layout

Selanjutnya, kita perlu modifikasi Layout halaman utama, yaitu activity_main.xml. Kita tampilkan pratinjau item di dalam RecyclerView, serta tambahkan Button di bagian bawahnya.

Hasil modifikasi layout halaman utama adalah sebagai berikut:

Data to Display

Kita membutuhkan data untuk ditampilkan oleh item — item di dalam list. Oleh karena itu, kita perlu menambahkan Model untuk menampung data yang diperlukan.

Pertama, kita buat Package atau folder baru di dalam folder project melalui menu New > Package. Selanjutnya, tambahkan dua kelas melalui menu New > Kotlin File/Class dengan nama Product dan ProductData.

Kita memiliki Data Class bernama Product yang berisi sebagai berikut:

Kita juga memiliki kelas ProductsData yang berisi sebagai berikut:

Kedua kelas tersebut akan digunakan untuk menampung data yang akan ditampilkan pada RecyclerView.

Adapter & ViewHolder

Untuk mengambil serta menampilkan list data pada RecyclerView, kita membutuhkan Adapter. Di dalam Adapter, kita membutuhkan ViewHolder untuk memasukkan data ke dalam View.

Langkah pertama, kita buat kelas Adapter dengan nama ListProductAdapter.kt sebagai berikut:

Kedua, kita implementasikan fungsi — fungsi yang dibutuhkan oleh Adapter, kemudian juga kita tambahkan fungsi di dalam ViewHolder. Sehingga ListProductAdapter menjadi seperti ini:

Showing List on Activity

Terakhir, saatnya kita menampilkan list di Activity. Mari kita buka lagi MainActivity.kt dan kita tambahkan baris kode sebagai berikut:

Running Project

Sebelum menjalankan project, pastikan konfigurasi Intent Filter pada file Android Manifest pada app/manifest/AndroidManifest.xml telah diatur sebagai berikut:

Ini untuk memastikan bahwa Main Activity adalah Activity yang ditampilkan pertama kali saat aplikasi dijalankan.

Internet Permission

Ketika kita menjalankan aplikasi, ImageView tidak dapat menampilkan gambar dengan baik, bahkan bisa memicu crash / aplikasi berhenti tiba — tiba.

Hal ini terjadi karena kita belum menambahkan izin kepada sistem Android untuk mengambil data gambar dari Internet. Oleh karena itu, kita perlu menambahkan Internet Permission pada file AndroidManifest.xml.

To Be Continued . . .

Artikel ini bersambung ke Kotlin Basic: Listener & Intent.

    Fatima Azzahro

    Written by

    Female developer who passionate in Information Technology. Love learning and sharing to others. Github: https://github.com/fatimazza

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade