MODUL 4

RECYCLER VIEW

Capaian pembelajaran

• Mahasiswa mampu membuat dan mengimplementasikan RecyclerView.

Dasar Teori

Praktek Explicite Intent

1. Buat folder Modul6-NPM di folder Mobile Computing

2. Buat Project baru dengan ketentuan seperti berikut:
Project Tempates: Empty Activity
Name: Project RecyclerView NPM
Save Location: D:\Mobile Computing\Project RecyclerView NPM
Language: Kotlin.
Kemudian klik Finish.
3. Berikutnya adalah menambahkan plugin id 'kotlin-android-extensions' di file build.gradle (Module
ProjectShareMessage.app).
Kotlin Android Extensions: adalah extension yang digunakan untuk mempermudah kita dalam
memanggil ID dari layout yang sudah kita buat pada file xml kita. Untuk dapat menggunakan Kotlin
Android Extensions tersebut, maka kita perlu menambahkan plugin berikut pada file gradle kita.
Caranya:
o Klik root project dari aplikasi yang kita buat,
o kemudian double click pada build.gradle (Module ProjectShareMessage.app)
o tambahkan code berikut di bagian plugin
id 'kotlin-android-extensions'
o klik File > Sync Project with Gradle Files untuk mensinkronisasi file gradle yang baru saja
kita ubah dengan project kita.
o Close file build.gradle(:app)

4. Tambahkan beberapa dependencies yang akan kita gunakan di Project RecyclerView NPM pada
build.gradle (Module: app).
• Tambahkan kode berikut di build.gradle (Module: app).
 • Klik Sync Now

• Close build.gradle (Module: app).

5. Kembali ke activity_main.xml. Hapus teks Hello World!,

6. Ganti ConstaintLayout menjadi RelativeLayout
7. Tambahkan Object RecyclerView, ubah atrribute id RecyclerView : myRecyclerView

Tampilan kode xml seperti berikut:

8. Buat File xml baru:
• Buka folder app > res > layout.
• Klik kanan layout, pilih New > Layout Resource File

• File name : example_item.xml

• Root element : androidx.cardview.widget.CardView.
• klik OK
9. Tambahkan RelativeLayout di example_item.xml.

10. Buat file Vector Asset.

• Klik di folder app > res > drawable
• Pilih New > Vector asset

• Klik Clip Art untuk memilih gambar Vector Asset

• Ubah Name : ic_android
• Klik Next
 • Klik Finish

11. Ulangi langkah 9 untuk menambahkan 2 gambar Vector Asset berikut.

• ic_sun
• ic_audio

• sehingga di folder app > res > drawable terdapat 3 Vector Asset (ic_android, ic_sun, ic_audio)
12. Kembali ke activity_main.xml dan tambahkan beberapa object.
• Tambahkan ImageView di dalam RelativeLayout seperti berikut.

• Tambahkan TextView Name dan TextView Phone Number seperti berikut.

13. Edit tampilan CardView seperti berikut.

14. Buat file data class

• Klik kanan app > java > com.example.projectrecyclerviewnpm
• Pilih New > Kotlin/File Class

• Beri nama file : ExampleItem, double klik Class.

 • Tambahkan kode berikut di ExampleItem.kt

15. Kembali ke activity_main.xml dan tambahkan kode berikut untuk menampilkan item di
RecyclerView.
Buat kelas Adapter.

16. Buat kelas baru dengan nama ExampleAdapter.kt di folder

app > java > com.exampleprojectrecyclerviewnpm
• Klik kanan di folder com.exampleprojectrecyclerviewnpm, kemudian pilih
New > Kotlin file/Class

• Beri nama file ExampleAdapter, double klik Class

17. Tambahkan kode class ExampleAdapter berikut di ExampleAdapter.kt

18. Tambahkan/implementasikan 3 method berikut di dalam class ExampleAdaptor.

• override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ExampleViewHolder

• override fun getItemCount(): Int
• override fun onBindViewHolder(holder: ExampleViewHolder, position: Int)
caranya :
• letakkan kursor diatas class ExampleViewHolder, kemudian tekan Ctrl+i maka akan muncul
window Implement members seperti berikut. Blok ketiga method yang muncul. Klik Ok.
 • maka 3 metod diatas diimplementasikan di file ExampleAdapter.kt seperti berikut.

19. Ubah kode dari 3 method diatas seperti berikut dan tambahkan parameter di class ExampleAdapter.
20. Tambahkan fungsi private fun generateDataList , fungsi untuk mengenerate data yang ingin kita
tampilkan di RecyclerView di MainActivity.kt.
21. Tambahkan kode untuk menjalankan RecyclerView di MainActivity.kt

22. Run project di smatphone, rekam layar hasil run, simpan dengan nama file Modul6-NPM.mp4
kumpulkan ke asisten lab.