MODUL 7

RECYCLER VIEW dan INTENT

Capaian pembelajaran

• Mahasiswa mampu membuat dan mengimplementasikan RecyclerView dan Intent dalam suatu aplikasi
sederhana.

Dasar Teori

Praktek Explicite Intent

1. Buat folder Modul7-NPM di folder Mobile Computing

2. Buat Project baru dengan ketentuan seperti berikut:
Project Tempates: Empty Activity
Name: RecyclerView-Intent NPM
Save Location: D:\Mobile Computing\Modul7-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-Intent 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. Tambahkan RecyclerView ke layout dan beri id : imageRecyclerView.

7. Ubah attribute margin : 16dp melalui pallete attribute. Caranya klik search , ketikkan margin.
8. Buat activity baru : DetailActivity. Caranya : klik kanan di folder \\app\java\ di struktur project, pilih New >
Activity > Empty Activity. Sehingga di folder \\app\java\ terdapat 2 activity seperti berikut.

9. 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.
10. Ubah attribute object ImageView melalui pallete attribute:
• id : _imageDetail, klik Refactor
• layout_width : match_parent
• layout_heigh : 200dp
• layout contraint : parent , dengan cara klik simbol di layout constaint widget.
Set nilai constrain = 16
• Scale type : centerCrop
11. Sisipkan object TextView ke layout dan ubah attribute-nya melalui Pallete attribute menjadi seperti berikut.

12. Sisipkan object TextView dan ubah attribute-nya melalui pallete attribute menjadi seperti berikut.
13. Buat file kotlin Image.kt di folder \\app\java\com.example.recyclerview_intentnpm\
• Klik kanan di folder \\app\java\com.example.recyclerview_intentnpm\,
pilih New > Kotlin File/Class, beri nama file Image.kt

14. Buka file Image.kt, tambahkan kode berikut.

15. Buat file item_image.xml di folder \\app\res\layout\

• Klik kanan di folder \\app\res\layout\ pilih New > Layout resource file, ubah File name dan Root
element seperti berikut. Klik OK.
• Set attribute orientation : vertical.
16. Buka item_image.xml dan tambahkan RelativeLayout melalui pallete object.
• Klik search di pallete object ketikkan relative, drag n drop RelativeLayout ke layout.

17. Tambahkan ImageView di Relativelayout melalui Pallete object, ubah attribute object seperti berikut. (lihat
Component Tree, object Image ada di dalam object RelativeLayout)
 • Ubah atribute scaleType : centerDrop.

18. Tambahkan TextView di bawah image, dan ubah atribut TextView melalui Pallete attribute seperti berikut.

• ubah atribute layout_below : @id/_image

• Ubah atribute textSize : 18sp dan textStyle : Bold

• Ubah atribute gravity : centerHorizontal

• Ubah atribute layout_margin : 16dp

19. Klik CardView di ComponentTree, kemudian ubah atribute layout_marginBottom : 16dp

20. 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.
21. 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.

22. 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.

23. Buat file ImageAdapter.kt

• Klik kanan di folder \\app\java\com.example.recyclerview_intentnpm\
• Pilih New > Kotlin File/Class, beri nama file ImageAdapter, klik File
24. Buat class ImageAdapter di ImageAdapter.kt. Tuliskan kode berikut di ImageAdapter.kt
25. Letakkan kursor di teks class ImageAdapter, tekan Alt+Enter, pilih Implement members, blok ketiga
method di Implement members, klik OK, maka akan muncul 3 method tersebut di class ImageAdapter.
26. Edit ketiga method diatas menjadi seperti berikut.

27. Buka MainActivity.kt.

• Tambahkan sebuah companion object INTENT_PARCELABLE di class MainActivity :
AppCompatActivity()
 • Tambahkan kode untuk mendeklarasikan recyclerView dan mengirim Intent berikut dibawah array
image ( val imageList = listOf<Image> )

28. Tambahkan kode untuk menerima Intent di DetailActivity.kt.

29. Jalankan project di smartphone, lakukan rekam layar dan simpan hasilnya dengan nama file Modul7-
NPM.mp4