Membuat Image Scroll Menggunakan Desain Material

 

PPB I - Tugas 8

Membuat Image Scroll Menggunakan Desain Material

    Nama :Michael Ariel Manihuruk

    NRP : 5025201158

    Kelas : PPB-I

    Link Github : Tugas 8

    Pada kesempatan kali ini, kita akan membahas tentang pembuatan image scroll menggunakan desain material. Aplikasi yang telah dibuat diberi nama Affirmations, sebuah platform yang menawarkan beragam gambar dengan caption afirmatif. Dalam struktur aplikasi ini, pengguna dapat menikmati gambar-gambar tersebut yang disertai dengan pesan-pesan afirmatif melalui penggunaan komponen Compose seperti Image dan Text.

    Untuk memulai pembuatan aplikasi Affirmations, langkah pertama yang harus diambil adalah mendownload proyek awal dari GitHub, kemudian mengekstraknya dari file zip yang telah diunduh. Setelah itu, proyek tersebut dapat dibuka di Android Studio untuk memulai proses pengembangan. Langkah selanjutnya adalah membuat sebuah kelas data yang akan digunakan untuk daftar item dalam aplikasi. Hal ini dilakukan dengan membuat sebuah package baru di dalam direktori com.example.affirmation yang diberi nama model, di mana kemudian dibuat sebuah file Kotlin Data Class yang disebut Affirmation.kt. Setelah itu, file Datasource.kt juga dimodifikasi sesuai dengan kebutuhan proyek. Dengan langkah-langkah tersebut, aplikasi Affirmations siap untuk dikembangkan lebih lanjut, dengan kelas data yang telah disiapkan untuk menyimpan daftar item serta modifikasi pada file Datasource.kt untuk mengatur sumber data aplikasi.

    Kode di atas mendefinisikan dua kelas data yang menjadi tulang punggung aplikasi Affirmations. Pertama adalah kelas data Affirmation yang memiliki dua properti utama: stringResourceId yang merepresentasikan ID sumber daya dari teks yang akan ditampilkan, dan imageResourceId yang merepresentasikan ID sumber daya dari gambar yang akan muncul. Melalui kelas data ini, kita dapat membuat objek Affirmation yang berisi pasangan teks dan gambar untuk dipresentasikan dalam aplikasi Affirmations. Kedua, ada kelas Datasource yang mengandung satu metode, loadAffirmations, yang bertugas menghasilkan daftar objek Affirmation. Metode ini berfungsi mengembalikan daftar Affirmation yang telah diinisialisasi dan siap digunakan dalam aplikasi.

   Langkah berikutnya adalah menuliskan kode terkait antarmuka halaman aplikasi dengan memodifikasi file MainActivity.kt seperti sebagai berikut.

    AffirmationsApp adalah komponen inti dalam aplikasi yang bertugas menampilkan daftar afirmasi kepada pengguna. Komponen ini mengandalkan AffirmationList, sebuah fitur yang menggunakan LazyColumn untuk menampilkan daftar afirmasi secara efisien dengan menggunakan komponen AffirmationCard untuk setiap item yang ditampilkan. Dengan memanfaatkan struktur ini, pengguna dapat dengan mudah melihat dan membaca berbagai pesan afirmatif yang disediakan oleh aplikasi, sambil menjelajahi daftar dengan lancar menggunakan fitur LazyColumn yang dioptimalkan.

   AffirmationCard adalah komponen kunci dalam aplikasi yang bertanggung jawab untuk menampilkan setiap kartu afirmasi kepada pengguna. Komponen ini memanfaatkan Card dari Material3 library untuk mengatur tampilan kartu dengan baik. Di dalam setiap kartu, terdapat sebuah gambar yang diambil dari sumber daya menggunakan painterResource dengan ID gambar yang telah disediakan dalam objek Affirmation. Untuk tujuan aksesibilitas, deskripsi gambar diisi dengan teks dari resource string. Selain itu, efek gradien diterapkan pada bagian bawah gambar menggunakan background, menciptakan kesan transparansi yang menarik. Selanjutnya, teks afirmasi ditampilkan di bagian bawah kartu, diambil dari resource string, dan diberi warna putih serta ukuran font 16sp.

    Berikut adalah tampilan AffirmationCard pada menu preview:

   Berikut tampilan demo dari aplikasi: