Tugas 8 Woof

     

Aplikasi Woof

Vito Febrian Ananta

5025211224
Pemrograman Perangkat Bergerak (D)

Kode: (Github Repository)

Pada tugas ke-8 ini, telah dibuat aplikasi yang menampilkan list anjing yang meengunakan Material Design. Untuk mengembangkan kemampuan secara teknis dan kreatifitas, saya mendalami aplikasi ini pada beberapa poin berikut:
1. Cara Menerapkan Tema Material ke Aplikasi Compose

2. Cara Menambahkan Palet Warna Kustom ke Aplikasi

3. Cara Menambahkan Font Kustom ke Aplikasi

4. Cara Menambahkan Bentuk Kustom ke Elemen di Aplikasi

5. Cara Menambahkan Panel Aplikasi Atas ke Aplikasi

Berikut adalah penjelasan detail dari kodenya:

1. Cara Menerapkan Tema Material ke Aplikasi Compose

Penerapan tema Material di Compose dilakukan dengan membuat fungsi tema kustom yang membungkus MaterialTheme . Fungsi ini menentukan skema warna berdasarkan mode gelap/terang dan versi Android, kemudian menggabungkan semua elemen desain (warna, bentuk, tipografi) dalam satu tema yang konsisten untuk seluruh aplikasi.

2. Cara Menambahkan Palet Warna Kustom ke Aplikasi

Palet warna kustom dibuat dengan mendefinisikan konstanta warna menggunakan nilai hex, kemudian mengorganisirnya dalam lightColorScheme dan darkColorScheme . Sistem ini mengikuti prinsip Material Design 3 dengan warna semantik yang memiliki peran spesifik seperti primary, secondary, dan surface untuk menciptakan hierarki visual yang jelas..

3. Cara Menambahkan Font Kustom ke Aplikasi

Font kustom diimplementasikan dengan menempatkan file font (.ttf) di folder res/font , kemudian membuat FontFamily yang mereferensikan file tersebut. Selanjutnya, font diterapkan dalam Typography dengan mendefinisikan berbagai gaya teks yang akan digunakan konsisten di seluruh aplikasi sesuai dengan hierarki tipografi Material Design.

4. Cara Menambahkan Bentuk Kustom ke Elemen di Aplikasi

Bentuk kustom didefinisikan dalam objek Shapes dengan berbagai ukuran (small, medium, large) menggunakan RoundedCornerShape atau bentuk lainnya. Bentuk ini kemudian dapat diterapkan pada komponen UI menggunakan modifier .clip() atau langsung melalui parameter shape pada komponen Material seperti Card atau Button.

5. Cara Menambahkan Panel Aplikasi Atas ke Aplikasi

Panel aplikasi atas (Top App Bar) diimplementasikan menggunakan CenterAlignedTopAppBar dari Material 3 yang menyediakan struktur standar dengan title di tengah. Komponen ini dapat dikustomisasi dengan menambahkan logo, ikon navigasi, atau action buttons, dan secara otomatis mengikuti tema Material Design yang telah didefinisikan dalam aplikasi.

Video Presentasi:

Tampilan Android Studio:

Tampilan Aplikasi:

1. Light Theme

2. Dark Theme