Tugas Pertemuan 8 PPB - Aplikasi Woof (Material Design)

- Mei 21, 2025

Nama	Akmal Sulthon Fathulloh
NRP	5025211047
Kelas	PPB - D

Pada pertemuan kali ini, kita diminta untuk membuat aplikasi Woof menggunakan Desain Material yang menampilkan daftar anjing dan informasinya. Dalam mengerjakan ini, saya mengacu pada modul Penerapan Tema Material dengan Jetpack Compose. Berikut adalah dokumentasi dan hasil pekerjaan yang telah dibuat.

Deskripsi Aplikasi

Aplikasi Woof adalah aplikasi Android berbasis Jetpack Compose yang dirancang untuk menampilkan daftar anjing beserta informasi terkait, seperti nama, usia, dan hobi mereka. Aplikasi ini menerapkan prinsip desain modern menggunakan Material 3 dan memanfaatkan fitur-fitur Compose seperti Scaffold, LazyColumn, dan Card untuk membangun antarmuka yang dinamis dan responsif.

Kelas utama MainActivity merupakan titik masuk aplikasi. Di dalamnya, fungsi setContent digunakan untuk menerapkan tema aplikasi (WoofTheme) dan menampilkan composable utama WoofApp. Composable WoofApp bertanggung jawab membangun struktur antarmuka aplikasi. Dengan menggunakan Scaffold, ia menyusun tampilan atas melalui WoofTopAppBar dan menampilkan daftar anjing dalam LazyColumn, dengan data yang diambil dari daftar statis dogs.

Setiap item dalam daftar anjing ditampilkan menggunakan composable DogItem. Composable ini menyusun tampilan ikon anjing, nama, usia, dan tombol ekspansi yang memungkinkan pengguna melihat informasi tambahan berupa hobi anjing tersebut. Animasi ekspansi dilakukan dengan animateContentSize untuk memberikan transisi yang halus saat konten berubah.

Tombol ekspansi dalam DogItem dibuat melalui composable DogItemButton, yang menampilkan ikon panah atas atau bawah tergantung dari status ekspansi. Tombol ini juga dilengkapi deskripsi konten (content description) untuk keperluan aksesibilitas. Sementara itu, DogIcon menampilkan foto anjing berdasarkan resource drawable ID yang diberikan. Ikon ini dipotong dan disesuaikan ukurannya agar tampil estetis.

Informasi dasar mengenai anjing seperti nama dan usia ditampilkan melalui composable DogInformation, dengan nama diambil dari string resource dan usia diformat dengan bantuan stringResource. Jika item diperluas, maka composable DogHobby akan ditampilkan, yang menyusun teks statis “About” serta hobi anjing tersebut dari string resource ID.

Untuk tampilan bagian atas aplikasi, WoofTopAppBar menampilkan nama aplikasi dan sebuah ikon dekoratif. Karena ikon ini hanya bersifat visual dan tidak penting untuk navigasi, contentDescription-nya disetel ke null agar dapat dilewati oleh layanan aksesibilitas seperti screen reader.

Aplikasi ini juga menyertakan dua fungsi preview, yaitu WoofPreview dan WoofDarkThemePreview, yang memungkinkan pengembang melihat tampilan antarmuka dalam mode terang dan gelap langsung dari Android Studio Design tab.

Secara keseluruhan, aplikasi Woof dirancang dengan arsitektur yang rapi, mendukung interaktivitas pengguna, serta menerapkan praktik terbaik untuk performa dan aksesibilitas. Kombinasi data statis, composable modular, dan dukungan tema menjadikannya contoh aplikasi Compose yang bersih dan dapat diperluas.

Berikut adalah hasil running aplikasi pada Android Virtual Device.