I.

TUJUAN
A. Mahasiswa mengetahui apa itu Android RecyclerView dan apa saja yang
diperlukan untuk dapat membangun aplikasi Recyclerview.
B. Mahasiswa Mampu memahami tahapan dalam membangun aplikasi Android
dengan menggunakan Recyclerview.

II. ALAT DAN BAHAN

A. PC / Laptop
B. Aplikasi Android Studio
C. Modul Praktikum

III. TEORI DASAR

RecyclerView adalah sebuah komponen tampilan (widget) yang lebih canggih
ketimbang pendahulunya, yakni ListView. Gambar di bawah menunjukkan
perbedaan ListView dan RecyclerView, jika Anda menggunakan ListView objek
dari tiap item akan dibuat semuanya dari awal sampai akhir. Sedangkan jika Anda
menggunakan RecyclerView, objek yang dibuat hanya sebatas ukuran layar dan
beberapa di atas dan di bawahnya saja. Selanjutnya ia menggunakan kembali item
yang sudah tidak terlihat.
RecyclerView memiliki beberapa keunggulan dibandingkan dengan ListView,
termasuk performa yang lebih baik, kemampuan untuk menampilkan tata letak yang
lebih kompleks, dan fleksibilitas yang lebih besar dalam menangani tindakan
pengguna seperti ketukan dan gerakan.
Komponen Utama pada RecyclerView :
A. Adapter
Adapter adalah komponen inti dalam RecyclerView. Ini berfungsi sebagai
penghubung antara sumber data (biasanya dalam bentuk daftar atau array) dan
tampilan yang ditampilkan di RecyclerView. Adapter mengambil data dari
sumber dan memasukkannya ke dalam ViewHolder.
B. LayoutManager
LayoutManager mengatur tata letak item dalam RecyclerView. Android
menyediakan beberapa jenis LayoutManager, seperti LinearLayoutManager
(untuk daftar linier), GridLayoutManager (untuk daftar berkolom), dan
StaggeredGridLayoutManager (untuk daftar berkolom dengan tampilan yang
berbeda-beda dalam satu baris atau kolom).
C. ViewHolder
ViewHolder adalah objek yang digunakan untuk menyimpan referensi ke
elemen tampilan dalam satu item daftar. Ini membantu mengoptimalkan
kinerja dengan menghindari pemanggilan findViewById berulang-ulang.
Sebenarnya masalah pada ListView dapat diatasi dengan menggunakan
ViewHolder pattern, namun penggunaannya belum diharuskan di ListView.
Berbeda dengan RecyclerView yang mewajibkan menggunakan ViewHolder.
Berikut ini adalah beberapa kelebihan ketika kita menggunakan RecyclerView.
A. Memiliki memori yang ringan dan performa yang baik.
B. Secara default memiliki ViewHolder.
C. Mudah untuk memberikan animasi ketika menambahkan, memperbarui, atau
menghapus item dengan ItemAnimator.
D. Mendukung LayoutManager untuk mengubah tata letak.
E. Mendukung pengguliran (scrolling) secara vertikal dan horizontal.
F. Dapat digunakan bersama dengan DiffUtil.

Selanjutnya lihatlah gambar penerapan RecyclerView berikut ini:

 Berikut adalah beberapa bagian yang perlu Anda ketahui untuk menampilkan
data dengan RecyclerView.
A. RecyclerView: merupakan komponen ViewGroup yang perlu ditambahkan ke
dalam berkas XML.
B. LayoutManager: digunakan untuk mengatur tata letak item di dalam
RecyclerView. Berikut beberapa opsi yang bisa Anda pilih.

1. LinearLayoutManager: tampilan satu kolom secara linear.

2. GridLayoutManager: tampilan lebih dari satu kolom atau grid.
3. StaggeredLayoutManager: tampilan menyesuaikan tinggi setiap item.
C. Data source: sumber data yang akan ditampilkan ke dalam RecyclerView,
biasanya berupa List/ArrayList.
D. Layout item: berkas tampilan XML untuk setiap baris item.
E. RecyclerView.Adapter: class yang digunakan untuk menghubungkan data
source dengan RecyclerView. Di dalamnya terdapat beberapa fungsi berikut.
1. onCreateViewHolder(): digunakan untuk membuat ViewHolder baru
yang terhubung dengan layout item.
2. onBindViewHolder(): digunakan untuk menetapkan data source ke dalam
ViewHolder sesuai dengan posisinya.
3. getItemCount(): digunakan untuk menetapkan ukuran dari jumlah data
yang ingin ditampilkan.
F. RecyclerView.ViewHolder: digunakan untuk menentukan bagaimana data
ditampilkan ke dalam Layout Item
IV. LANGKAH KERJA
A. Codelab Recyclerview
1. Buat proyek baru dengan pilih “File → New → New Project pada “Android
Studio”.

2. Pada bagian ini Pilih target “device” yang akan dibuat, pilih tipe “Empty
Views Activity”, lalu “Next” untuk melanjutkan.

3. Selanjutnya masukkan nama aplikasi dan nama “package” aplikasi.

Kemudian tentukan lokasi proyek yang akan dibuat. Setelah itu pilih tipe
“device” untuk aplikasi beserta target SDK yang akan digunakan. Lalu pilih
“Finish” untuk melanjutkan
4. mari kita unduh terlebih dahulu asset yang dibutuhkan untuk latihan kali
ini dalam Kumpulan Gambar Pahlawan. Setelah proses sync
project selesai, ekstraklah berkas zip tersebut, kemudian masukkan ke
dalam folder drawable:

Setelah itu Anda diminta untuk menentukan spesifikasi lokasi untuk berkas
tersebut. Silakan klik Refactor untuk menyetujuinya.

5. Oke, lanjut pada activity_main.xml. Untuk menambahkan RecyclerView,

silakan drag item RecyclerView ke dalam screen.
 Perhatikan, selain menambahkan RecyclerView, kita juga perlu mengatur
posisi dari Constraint Layout, serta menambahkan id dari RecyclerView
yakni rv_heroes.
6. Setelah menambahkan RecyclerView ke dalam screen, Anda bisa melihat
kodenya akan menjadi seperti ini

7. Oke, komponen RecyclerView sudah ditambahkan, kini saatnya kita

membuat sebuah item tampilan dalam bentuk berkas layout xml yang akan
ditampilkan di RecyclerView. Karena data pertama kali akan ditampilkan
dalam bentuk list, kita perlu membuat layout dengan cara klik kanan pada
direktori layout → new → layout resource file dan beri nama
item_row_hero. Pastikan Root element menggunakan ConstraintLayout
terlebih dahulu.
8. Setelah terbentuk, silakan buat desain untuk layout item seperti ini:

tools:text bisa kita gunakan untuk placeholder di dalam editor layout.

Atribut ini tidak akan terbawa saat run-time dan hanya akan nampak di
dalam preview editor saja.
9. Akan ada yang error pada bagian @string/heroes_name. Seperti pada modul
sebelumnya, Anda perlu masuk ke dalam res → values → strings.xml.
Tambahkan kode seperti berikut:

Hasilnya dapat dilihat menggunakan tab Split atau Design seperti ini:
10. Kemudian buat sebuah kelas model data bernama Hero dengan cara klik
kanan pada nama package → new → Java class. Class ini nantinya
digunakan untuk menampung property data yang akan ditampilkan :

Klik disini

Beri nama Hero dan pilih Class. Kemudian tekan Enter.

Untuk kelas Java, ada cara otomatis untuk membuat setter & getter.
Caranya, klik kanan pada text editor lalu pilih Generate dan pilih Getter and
Setter. Pilih semua variabel. Maka setter and getter akan ter-generate secara
otomatis.
11. Jangan lupa untuk menambahkan implementasi parcelable ke kelas Hero:

untuk Java menggunakan Add Parcelable Impementation.

12. Sekarang kita akan membuat sebuah adapter yang akan memformat
tampilan setiap elemen dari koleksi data. Buatlah kelas adapter secara
manual dengan klik kanan pada package utama → new → Kotlin/Java Class
dan beri nama ListHeroAdapter:

13. Setelah kelas adapter berhasil dibuat, lengkapi kodenya menjadi seperti
berikut

14. Kemudian muncul garis merah pada kode, begitu pun pada ListViewHolder.
Kita resolve satu per satu. Pertama adalah kita tekan alt+enter/klik tombol
merah pada ListViewHolder dan pilih Create class ListViewHolder,
kemudian pilih ListHeroAdapter karena kita akan membuat sebuah inner
class:

Kini, kodenya menjadi seperti berikut.

15. Masih ada garis merah. Arahkan kursor ke teks class ListHeroAdapter dan
lakukan lagi alt+enter / klik tombol merah, lalu pilih implement
methods(Java).
16. Kemudian pilih ketiga metode dari RecyclerView.Adapter:

Maka kode saat ini menjadi seperti ini.

17. Garis merahnya masih ada karena ListViewHolder seharusnya inherit ke

RecyclerView.ViewHolder. Untuk Java bisa juga dilakukan dengan cara
alt+enter/klik tombol merah dan pilih Make ListViewHolder extend
RecyclerView.ViewHolder :

Masih ada garis merah kita lakukan lagi alt+enter / klik tombol merah dan
pilih Add constructor paremeter from ViewHolder(View) atau Create
constructor matching super(Java).
18. Sehingga, kodenya menjadi seperti berikut.

19. Kemudian buatlah constructor untuk list seperti ini.

20. Setelah itu kita bisa melengkapi kode kode hasil dari turunan
RecyclerView.Adapter sehingga kode lengkap dari kelas ListHeroAdapter
adalah sebagai berikut:
21. Kemudian kita modifikasi berkas kelas MainActivity dan atur fixed size
RecyclerView yang sudah dibuat di activity_main.

22. Selanjutnya setelah diinisiasikan, kita akan panggil data yang sudah kita
buat di resource strings.xml.
 23. Jalankan aplikasi yang dibuat. Hasilnya kurang lebih akan seperti gambar di
bawah ini.

B. Codelab Latihan Onclick pada Item RecyclerView

1. Bukalah kelas ListHeroAdapter dan perhatikan kode berikut.

Pada bagian ini, kita bisa menambahkan fungsi onclick setiap itemnya
ditekan.Tambahkan kode baris berikut ke dalam fungsi onBindViewHolder.
Hasilnya akan menjadi seperti ini
2. Setelah itu, jalankan kembali dan pilih salah satu item.

3. Pertanyaan selanjutnya, bagaimana jika kita ingin agar fungsi onClick dapat
dipicu atau di-trigger dari kelas MainActivity? Silakan hapus fungsi onClick
yang telah Anda buat sebelumnya, kemudian tambahkan interface berikut
dan implementasikan onClickke kelas interface berikut.

4. Kemudian bukalah MainActivity dan tambahkan satu metode ini untuk

menandakan item mana yang dipilih.
 Kemudian tambahkan pada masing-masing metode di list seperti berikut.

5. Sekarang jalankan kembali aplikasinya. Klik salah satu item pada

RecyclerView. Seharusnya Toast masih bisa tampil ketika salah satu item
ditekan.

C. Codelab Latihan Mengubah Tampilan pada RecyclerView

1. Langkah pertama yang perlu Anda lakukan adalah mengubah tema bawaan
dari NoActionBar. Mengapa mengganti tema? Sebab, kita akan
menambahkan option menu pada halaman Activity. Bukalah berkas
themes.xml di res/values/themes, baik untuk mode siang dan malam.
Setelah itu, hapus bagian .NoActionBar pada tema utama aplikasi.

Pastikan Anda melakukan hal yang sama untuk berkas themes.xml (night).
2. Selanjutnya buat resource directory terkait. Resource directory menu secara
bawaan tidak disediakan. Kita harus membuatnya terlebih dahulu. Klik
kanan pada direktori res → new → Android Resource Directory.

3. Setelah muncul dialog box seperti di bawah ini, ganti Resource type menjadi
menu dan tekan OK.

4. Kemudian klik kanan pada folder menu → New → Menu Resource File.
5. Beri nama menu_main pada File name dan pilih OK.

Hasilnya akan terlihat seperti ini.

6. Setelah itu, tambahkan pilihan menu pada menu_main.xml seperti berikut.

 Jangan lupa juga untuk menambahkan String yang dibutuhkan pada
res/values/string.xml.

7. Setelah selesai, saatnya kita pasang menu tersebut di MainActivity dengan

menambahkan metode fungsi onCreateOptionsMenu. Untuk
menambahkannya, ketik onCreateOptionMenu di dalam MainActivity
sehingga snippet akan muncul untuk meng-override fungsi yang sesuai.
Tekan enter dan ubah kode di dalamnya menjadi seperti berikut.

Jalankan aplikasi dan lihatlah hasil menu yang tampil.

8. Saat ini belum ada perubahan ketika menu dipilih. Kita akan menambahkan
aksi dengan menambahkan fungsi onOptionsItemSelected pada
MainActivity seperti ini.
9. Alhasil, berikut adalah kode lengkap dari MainActivity untuk latihan ini.
 10. Kemudian jalankanlah aplikasinya. Anda akan mendapatkan tampilan dua
kolom ketika menu Grid dipilih.

V. HASIL PERCOBAAN
A. Tampilan awal RecyclerView
B. Tampilan CodeLab onClick pada item Recyclerview

C. Tampilan CodeLab mengubah tampilan Recyclerview (List & Grid)