Menerapkan Multitype View pada RecyclerView

Menerapkan Multitype View pada RecyclerView

Hallo teman-teman developer!

Akhirnya, setelah hampir sebulan tidak menulis, senang bisa berbagi lagi di blog Dicoding 🙂

Kali ini saya akan sedikit berbagi tutorial mengenai salah satu mekanisme yang bisa kita terapkan pada RecyclerView yaitu Multitype View.

Sebelum kita menerapkannya, mari kita ketahui terlebih dahulu apa itu yang dimaksud dengan Multitype View. Seperti namanya, Multitype View merupakan sebuah cara agar kita bisa menampilkan dua atau lebih tipe view di dalam sebuah RecyclerView. Nah, contoh penerapannya adalah seperti berikut:

Pada contoh aplikasi di atas terdapat 2 (dua) tipe view yang ditampilkan pada RecyclerView. Pertama, sebuah view yang hanya menampilkan TextView dan yang kedua adalah view yang menampilkan ImageView beserta beberapa TextView dan Button, Menarik bukan? Mari kita buat aplikasi seperti yang dicontohkan di atas.

Project baru dan persiapan

Oke, langsung saja buat project baru pada Android Studio. Setelah selesai, tambahkan dependensi RecyclerView dan Material seperti berikut:

Biar lebih mirip seperti pada contoh, ubahlah parent dari style AppTheme pada berkas styles.xml menjadi seperti berikut:

Maksud perubahan di atas  adalah untuk menghilangkan Toolbar bawaan. Lanjut, buka berkas colors.xml kemudian ubahlah beberapa nilai color-nya menjadi seperti berikut:

Terakhir, tambahkan komponen widget RecyclerView pada berkas activity_main.xml, sehingga kodenya akan menjadi seperti berikut:

Pembuatan Data Class

Sebelum membuat kelas ViewHolder dan Adapter yang menjadi bagian penting dari tutorial kali ini, mari kita buat terlebih dahulu data class MenuItem seperti berikut:

Pada data class tersebut terdapat beberapa properti yang akan menampung data yang nantinya akan ditampilkan pada RecyclerView. Selesai, mari kita lanjutkan ke pembuatan ViewHolder.

Pembuatan kelas ViewHolder

Karena kita akan membuat 2 (dua) tipe view, maka kita juga akan membuat 2 (dua) kelas ViewHolder. Tapi sebelumnya mari kita siapkan terlebih dahulu file layout untuk masing-masing ViewHolder tersebut. Buat layout baru dengan nama item_header.xml kemudian ubah menjadi seperti berikut:

Layout di atas akan kita gunakan untuk menampilkan teks Makanan dan Minuman seperti yang dicontohkan di awal. Lanjut, buat lagi layout baru dengan nama item_menu.xml. Kemudian ubahlah kode nya menjadi seperti berikut:

Kita akan melihat kode eror di attribute srcCompat pada widget ImageView. Yuk ganti dengan berkas gambar yang diinginkan. Jika mau disamakan, berkas gambarnya bisa kamu unduh di laman flat icon ini.

Selanjutnya, mari kita buat kelas ViewHolder. Langsung saja buat kelas baru dengan nama MenuHeaderHolder kemudian tambahkan beberapa baris kode di dalamnya sehingga menjadi seperti berikut:

Kelas ViewHolder di atas akan kita gunakan untuk menampilkan satu informasi, sehingga di dalamnya hanya terdapat satu TextView. Kemudian buat lagi kelas baru dengan nama MenuItemHolder yang akan kita gunakan sebagai ViewHolder lainnya. Buka, kemudian ubahlah menjadi seperti di bawah ini:

Sama seperti kelas ViewHolder sebelumnya, pada kelas ViewHolder di atas terdapat beberapa view dan satu fungsi yang akan kita gunakan untuk menetapkan nilai dari view yang sudah dideklarasikan.

Pembuatan kelas Adapter

Selanjutnya adalah pembuatan Adapter, tahap ini adalah fokus utama ketika kita ingin menerapkan Multitype View, karena disinilah kita akan mengatur view berdasarkan data yang ingin ditampilkan. Mari kita mulai dengan membuat kelas baru yang mewarisi kelas RecyclerView.Adapter seperti berikut:

Adapter di atas memiliki 1 (satu) properti pada constructor yaitu data dengan tipe List<Any>, kenapa menggunakan Any? Agar kita bisa memasukkan nilai dengan tipe apapun ketika ingin membuat instance dari adapter di atas, Lanjut, mari kita override beberapa fungsi yang menjadi bagian dari RecyclerView.Adapter seperti halnya ketika kita ingin membuat RecyclerView pada umumnya:

Kemudian tambahkan 2 (dua) variabel statis yang akan kita gunakan sebagai tag untuk membedakan view yang akan ditampilkan.

Selanjutnya, kita akan mengubah satu persatu fungsi yang sebelumnya sudah kita override. Dimulai dari fungsi getItemViewType, mari kita mengubahnya jadi seperti berikut:

Kondisi di dalam fungsi pada kode di atas bertujuan untuk mengecek instance dari tiap item berdasarkan posisinya, inilah kenapa kita menggunakan kelas Any sebagai tipe argumen pada tipe data List untuk properti data. Lanjut ke fungsi onCreateViewHolder, ubahlah menjadi seperti berikut:

Berbeda dengan fungsi sebelumnya yang menggunakan instance dari item yang akan digunakan sebagai ekspresi, pada fungsi di atas kita bisa langsung menggunakan tag yang sudah kita tambahkan di awal yang dikomparasi dengan parameter viewType sebagai ekspresi. Berikutnya fungsi onBindViewHolder. Ubahlah kode dari fungsi tersebut menjadi seperti berikut:

Fungsi di atas menggunakan ekspresi yang sama seperti pada fungsi sebelumnya dan di dalam setiap blok kondisi yang ada pada fungsi tersebut terdapat casting ViewHolder yang sebelumnya sudah kita buat, ini dimaksudkan agar kita tidak salah menampilkan konten pada RecyclerView. Terakhir, ubah fungsi getItemCount menjadi seperti berikut:

Sampai di sini kita sudah selesai dengan pembuatan adapter. Kode keseluruhan dari adapter yang sudah kita buat kurang lebih akan seperti berikut:

Inialisasi data

Sebelum memodifikasi kelas MainActivity, mari kita inisialisasi terlebih dahulu data yang nantinya akan kita tampilkan. Oke, buat kelas baru dengan nama Menu kemudian tambahkan beberapa baris kode di dalamnya seperti berikut:

Modifikasi MainActivity dan Menjalankan Aplikasi

Terakhir, mari kita modifikasi kelas MainActivity dengan menambahkan variabel dan mengubah kode pada fungsi onCreate seperti berikut:

Kode di atas terdapat penambah satu variabel dengan tipe List<Any>. Kemudian di dalam fungsi onCreate terdapat pembuatan instance dari kelas adapter dan inisialisasi beberapa properti untuk RecyclerView termasuk menetapkan adapter-nya.

Jika dirasa sudah selesai, kamu bisa coba menjalankannya pada emulator atau device. Jika tidak ada eror, hasilnya akan seperti berikut:

Kesimpulan

Multitype View adalah salah satu mekanisme yang dapat digunakan untuk meningkatkan performa aplikasi yang kita kembangkan. Kenapa? Karena di beberapa kasus yang sering ditemukan, untuk membuat aplikasi yang serupa, di dalam satu berkas layout bisa terdapat 2 (dua) atau lebih RecyclerView. Alhasil, aplikasi membutuhkan resource lebih untuk melakukan render dan tampil pada layar device. Kasus seperti ini tidak akan terlihat jika data yang ditampilkan sedikit. Namun jika data yang akan ditampilkan memiliki jumlah yang banyak, kita akan merasakan perbedaannya. Dengan data yang sedikit pun kita disarankan untuk menerapkan Multitype View daripada menggunakan 2 (dua) atau lebih RecyclerView di dalam sebuah berkas layout.

Jika masih belum terlalu familiar dengan RecyclerView, teman-teman bisa mempelajarinya di kelas Menjadi Android Developer Expert dan Memulai Pemrograman Dengan Kotlin untuk yang baru atau ingin memperdalam pengetahuan tentang Kotlin, bahasa yang kita gunakan pada tutorial kali ini.

Sampai disini dulu ya tutorial kali ini. Ada yang kurang jelas? Yuk tulis di kolom komentar. Untuk yang mau melihat kode sumber dari project yang sudah kita buat, silakan cek di laman Github ini.

Menerapkan Multitype View pada RecyclerView-end

Artikel Terkait Lainnya 

https://blog.dicoding.com/recyclerview-frequently-asked-question/

https://blog.dicoding.com/kenal-lebih-dekat-dengan-constraintlayout/

Suka dengan Materi ini?

Jika ya, ini merupakan salah satu materi fundamental yang mengantarmu ke kelas berikut ini:

Multityoe View

Multitype View

Multitype View

Belajar mengembangkan aplikasi atau game dengan kurikulum yang telah divalidasi langsung oleh industri dengan Dicoding Academy.

Belajar di Dicoding Sekarang →
Share this:

Code Reviewer Dicoding Indonesia