Tugas 8: Membuat Image Scroll dengan menggunakan Desain Material

April 26, 2024

Tugas 8: Membuat Image Scroll dengan menggunakan Desain Material

Nama : Helsa Nesta Dhaifullah

NRP : 5025201005
Kelas : PPB I - 2024
Github : Link repository

Selamat datang kembali di Blog Catatan Kuliah! Kali ini, kita akan membahas tutorial yang menarik tentang bagaimana membuat aplikasi AffirmationsApp dengan menggunakan desain material. Dalam artikel ini, kita akan mempelajari cara membuat image scroll yang memukau, dilengkapi dengan caption di bawah gambar yang menginspirasi. Bersiaplah untuk merancang aplikasi yang tidak hanya memanjakan mata, tetapi juga memberikan semangat positif dalam setiap guliran layar. Mari kita mulai petualangan desain material kita!

TUTORIAL

Import Project Affirmations App
Pertama, yang harus kalian lakukan adalah mengunduh kode awal (codebase) yang akan digunakan untuk membangun AffirmationsApp melalui url github https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations dengan cabang starter.
Berikut merupakan beberapa langkahnya:
📌 Buka halaman repositori GitHub yang disediakan untuk project.
📌 Pastikan nama cabang cocok dengan nama cabang yang ditentukan dalam codelab. Pilih cabang starter.

📌 Di halaman GitHub project, klik tombol Code yang akan menampilkan pop-up.
📌 Pada pop-up, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.

📌 Extract hasil download tersebut dan import folder yang dihasilkan dengan memilih menu File>Open.
Membuat Model dan Datasource Affirmations App
Di aplikasi Android, daftar terdiri dari item daftar. Untuk data tunggal, ini bisa berupa hal sederhana seperti string atau bilangan bulat. Untuk item daftar yang memiliki beberapa data, seperti gambar dan teks, kalian memerlukan class yang berisi semua properti ini. Class data adalah jenis class yang hanya berisi properti. Class tersebut dapat menyediakan beberapa metode utilitas agar berfungsi dengan properti tersebut.

📌 Model Affirmation
Buat paket baru di bagian com.example.affirmations dan beri nama package baru tersebut dengan model. Paket model akan berisi model data yang akan direpresentasikan oleh class data. Class data akan terdiri dari properti yang mewakili informasi yang relevan dengan yang akan disebut "Affirmation", yang akan terdiri dari resource string dan resource gambar. Paket adalah direktori yang berisi beberapa class dan bahkan direktori lainnya.

Dalam package tersebut, tambahkan file kotlin berupa data class baru dan beri nama Affirmation.kt. Setiap Affirmation terdiri dari satu gambar dan satu string. Buat dua properti val di class data Affirmation. Salah satunya harus disebut stringResourceId dan yang lainnya imageResourceId. Keduanya harus berupa bilangan bulat. Anotasikan properti stringResourceId dengan anotasi @StringRes dan anotasikan imageResourceId dengan anotasi @DrawableRes. stringResourceId mewakili ID untuk teks afirmasi yang disimpan di resource string. imageResourceId mewakili ID untuk gambar afirmasi yang disimpan di resource drawable.

📌 Data Source Affirmation
Dalam paket com.example.affirmations.data, buka file Datasource.kt dan hapus tanda komentar pada dua pernyataan impor serta konten class Datasource. Metode loadAffirmations() mengumpulkan semua data yang diberikan dalam kode awal dan menampilkannya sebagai daftar. Kalian kan menggunakannya nanti untuk membuat daftar yang dapat di-scroll.
Mengatur UI Cards Affirmation
Buatlah fungsi baru bernama AffirmationCard() di bawah fungsi AffirmationsApp(). Fungsi ini akan menggunakan objek Affirmation sebagai parameter dan juga menerima parameter modifier dengan nilai default Modifier.

Dalam fungsi AffirmationCard(), gunakan composable Card dengan meneruskan parameter modifier. Di dalam Card, tambahkan composable Column untuk menyusun vertikal konten. Ini memungkinkan pengaturan gambar di atas teks.

Di dalam composable Column, tambahkan composable Image. Pastikan untuk memberikan resource dan deskripsi konten. Objek Modifier harus memiliki atribut fillMaxWidth dan tinggi 194.dp.

Setelah Image, tambahkan composable Text. Gunakan stringResource dari affirmation.stringResourceId sebagai teks. Berikan juga padding 16.dp dan gunakan MaterialTheme.typography.headlineSmall sebagai tema teks.
Testing Pratinjau Card
Buat fungsi private bernama AffirmationCardPreview(). Anotasikan metode dengan @Preview dan @Composable. Di dalam metode, panggil composable AffirmationCard, dan teruskan objek Affirmation baru dengan resource string R.string.affirmation1 dan resource drawable R.drawable.image1 yang diteruskan ke konstruktornya. Buka tab Split dan kalian akan melihat pratinjau AffirmationCard. Jika perlu, klik Build & Refresh di panel Design untuk menampilkan pratinjau.
Buat List Cards Affirmations
Komponen item daftar adalah bagian yang membentuk setiap entri dalam daftar. Setelahnya, Anda dapat menggunakan item daftar untuk membuat daftar itu sendiri.

Untuk membuat komponen daftar, buatlah fungsi AffirmationList() yang dianotasikan dengan @Composable. Fungsi ini akan menerima parameter List objek Affirmation dan sebuah modifier dengan nilai default Modifier.

Dalam Jetpack Compose, daftar yang dapat digulir dibuat dengan menggunakan composable LazyColumn. Perbedaan utama antara LazyColumn dan Column adalah bahwa LazyColumn cocok untuk daftar panjang dengan jumlah item yang tidak diketahui. LazyColumn menyediakan fitur scroll secara default.

Deklarasikan LazyColumn di dalam fungsi AffirmationList() dan teruskan parameter modifier. Dalam lambda dari LazyColumn, panggil metode items() dengan parameter affirmationList. Metode items() digunakan untuk menambahkan item ke LazyColumn.

Setiap panggilan metode items() memerlukan sebuah fungsi lambda. Dalam fungsi tersebut, terima parameter affirmation yang merepresentasikan satu item afirmasi dari affirmationList. Untuk setiap afirmasi dalam daftar, panggil composable AffirmationCard() dengan meneruskan affirmation dan Modifier dengan padding 8.dp.
Menampilkan Hasil Akhir Affirmations App
Di lambda fungsi AffirmationsApp(), panggil composable AffirmationList, lalu teruskan DataSource().loadAffirmations() ke parameter affirmationList. Class DataSource ditemukan dalam paket data di file DataSource.kt.

Terakhir, jalankan aplikasi Affirmations di perangkat atau emulator dan lihat produk yang sudah selesai. Berikut adalah hasil akhirnya.