MODUL 8

RECYCLER VIEW – GRID LAYOUT

Capaian pembelajaran

• Mahasiswa mampu membuat dan mengimplementasikan RecyclerView.

Dasar Teori

Praktek :

1. Buat folder Modul8-NPM di folder Mobile Computing

2. Buat Project baru dengan ketentuan seperti berikut:
Project Tempates: Empty Activity
Name: GridLayoutNPM
Save Location: D:\Mobile Computing\ GridLayoutNPM
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 LinearLayout
7. Tambahkan Object RecyclerView, ubah atrribute RecyclerView seperti berikut.
8. Buat File xml baru:
• Buka folder app > res > layout.
• Klik kanan layout, pilih New > Layout Resource File

• File name : grid_layout_list_item.xml

• Root element : androidx.cardview.widget.CardView.
• klik OK
9. klik object CardView di Palette Component Tree dan ubah atribut object CardView seperti berikut.

10. Tambahkan RelativeLayout di dalam object CardView. Caranya klik search di palette object ketikkan
RelativeLayout, kemudian drag n drop RelativeLayout ke Palette Component Tree letakkan dibawah
CardView. Setting atribut RelativeLayout seperti berikut.
11. Tambahkan object ImageView di dalam RelativeLayout dan ubah atribut ImageView seperti berikut.

12. Tambahkan object TextView di bawah image dan ubah atribut TextView seperti berikut.
13. Copy paste 5 gambar wisata Jayapura dari folder \\Wisata Jayapura\ ke folder \app\res\drawable\.
• Buka windows Explorer dan Copy lima gambar yang ada di folder \\Wisata Jayapura\
• Kembali ke Android Studio, klik kanan di folder \app\res\drawable\, pilih paste sehingga di folder
\app\res\drawable\ terdapat file seperti berikut.

14. Buat file DataModel.kt di folder \\app\java\com.example.gridlayoutnpm\.

Caranya Klik kanan di folder \\app\java\com.example.gridlayoutnpm\ dan pilih New > Kotlin
File/Class , beri nama file DataModel.
Kemudian tuliskan kode berikut di DataModel.kt
15. Buat file ImageAdapter.kt di folder \\app\java\com.example.gridlayoutnpm\.
Caranya Klik kanan di folder \\app\java\com.example.gridlayoutnpm\ dan pilih New > Kotlin
File/Class , beri nama file ImageAdapter.
Kemudian tambahkan kode berikut di ImageAdapter.kt
16. Letakkan kursor di class ImageAdapter tekan alt+enter, pilih Implement members, blok ke 3 methods
kemudian klik OK.

Maka ke 3 methods akan diimplementasikan di class ImageAdapter.

17. Edit kode dari ke 3 methods diatas seperti berikut.

18. Buat activity baru : DetailActivity. Caranya : klik kanan di folder \\app\java\ di struktur project, pilih
New > Activity > Empty Activity.
19. Buka activity_detail.xml dalam mode design.
• Kemudian sisipkan object ImageView dengan cara drag n drop ke layout.
• Di kotak dialog Pick a Resource pilih Sample data : avatars, klik OK.
sehingga tampilan layout menjadi seperti berikut.
20. Ubah attribute object ImageView melalui pallete attribute:
• id : _imageDetail, klik Refactor
• layout_width : match_parent
• layout_height : 200dp
• layout contraint : parent , dengan cara klik simbol di layout constaint widget.
Set nilai constrain = 16
• Scale type : centerCrop
21. Sisipkan object TextView ke layout dan ubah attribute-nya melalui Pallete attribute menjadi seperti
berikut.

22. Sisipkan object TextView dan ubah attribute-nya melalui pallete attribute menjadi seperti berikut.
23. Buka MainActivity.kt dan tambahkan kode berikut.
Variabel imageList merupakan sebuah array yang berisi gambar, judul gambar, dan deskripsi dari
gambar.
Parameter R.drawable.sentani adalah nama file gambar yang ditampilkan, parameter imageTitle
adalah judul gambar yang akan ditampilkan dan parameter imageDesc adalah isi deskripsi dari
gambar.

24. Copy paste teks contoh deskripsi.

• Buka file \\Wisata Jayapura\contoh_deskripsi.txt, copy isi teks.
• Kembali buka Android Studio, paste teks di parameter imageDesc di Main Activity.kt

• Copy paste isi dari variabel image list sebanyak 4x, sehingga menjadi seperti berikut.
 • Ubah parameter R.drawable.sentani dengan nama-nama file yang akan ditampilkan.

25. Copy paste isi dari variable imageList sebanyak 2x, sehingga isi val imageList ada 15 data gambar yang
akan ditampilkan. Gunakan koma (,) sebagai separator antar data gambar.

26. Di MainActivity.kt, tambahkan companion object dan variabel gridLayoutManager di

class MainActivity : AppCompatActivity() seperti berikut.
27. Di MainActivity.kt, tambahkan kode untuk mendeklarasikan recyclerView dan mengirim Intent
berikut dibawah array image ( val imageList = listOf<Image>)

28. Buka DetailActivity.kt, tambahkan kode untuk menerima Intent di

class DetailActivity : AppCompatActivity()

29. Run project di smartphone, rekam layar output dan simpan hasilnya dengan nama file
Modul8-NPM.mp4