Tugas 8 - Membuat Image Scroll Dengan Menggunakan Desain Material

 Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      :  MainActivity.kt, Datasource.kt, Affirmation.kt

Tugas 8 - Membuat Image Scroll Dengan Menggunakan Desain Material

Pada tugas ini, dibuat aplikasi image scroll berisi daftar afirmasi yaitu gambar dengan kalimat-kalimat motivasi. Aplikasi memungkinkan gambar dan teks pada composable Card menjadi daftar yang dapat di-scroll. Pembuatan aplikasi menggunakan referensi Google Codelab - Menambahkan daftar yang dapat di-scroll.

1. Inisiasi Proyek

Pertama-tama buka link https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations yang merupakan kode awal aplikasi, kemudian download ZIP dari branch starter. Ekstrak file .zip yang telah terdownload, pindahkan isi folder hasil ekstrak ke lokasi yang diinginkan, lalu buka Android Studio.

Klik Open pada bagian kanan atas lalu pilih folder project yang sudah di-extract lalu pilih OK. Kemudian tunggu hingga building model Gradle selesai.

Jika project template sudah berhasil terbuild, maka ketika dirun akan terlihat layar kosong seperti gambar di atas.

2. Buat package model dan Data Class Affirmation

Selanjutnya buat package bernama model pada com.example.affirmations, lalu buat file Affirmation.kt yang merupakan data class. Class Affirmation.kt akan memiliki stringResourceId yang berisi ID dari string affirmation dan imageResourceId yang berisi ID dari gambar affirmation.

3. Uncomment Datasource.kt Pada package data

Selanjutnya, uncomment import module dan fungsi loadAffirmations pada Datasource.kt yang sudah tersedia pada template code yang ada. Fungsi ini akan digunakan untuk mengambil resource string dan gambar agar dapat digunakan pada program.

4. Tambahkan Fungsi AffirmationCard Pada MainActivity.kt

Tambahkan import com.example.affirmations.model.Affirmation agar MainActivity.kt dapat memanggil data class Affirmation.kt, kemudian buat fungsi baru yaitu AffirmationCard. AffirmationApp akan AffirmationCard akan berisi composable column yang berisi image dan text affirmation. Tambahkan juga AffirmationCardPreview dan ubah mode tab android studio ke Split sehingga tampilan card akan terlihat.

5. Tambahkan Fungsi AffirmationList Pada MainActivity.kt

Selanjutnya, buat fungsi AffirmationList yang akan digunakan untuk membuat daftar item AffirmationCard yang telah dibuat. composable LazyColumn dapat digunakan karena item hanya terload ketika dibutuhkan pada tampilan sehingga lebih cocok ketika daftar berukuran panjang dan jumlah itemnya tidak diketahui.

6. Panggil AffirmationList Pada AffirmationApp

Selanjutnya, isi AffirmationApp dari template MainActivity.kt sehingga memanggil fungsi AffirmationList yang telah dibuat. Affirmation akan diload dari class Datasource.

7. Hasil Implementasi

Berikut adalah hasil ketika program di-run. Terlihat LazyColumn yang berisi Affirmation Card yang telah dibuat ddapat di-scroll.

Berikut adalah isi code MainActivity.kt, Affirmation.kt, dan Datasource.kt:

MainActivity.kt

Affirmation.kt

Datasource.kt

Referensi

https://kuliahppb.blogspot.com/2024/04/membuat-image-scroll-dengan-menggunakan.html

https://developer.android.com/codelabs/basic-android-kotlin-compose-training-add-scrollable-list?hl=id#0