Tugas 6 - PPB B

Nama : I Gusti Agung Ngurah Adhi Sanjaya

NRP : 5025211056
Kelas : Pemrograman Perangkat Bergerak B
Dosen : Fajar Baskoro

Penerapan Tema Material
Aplikasi Woof

    Woof App hadir sebagai platform inovatif yang memudahkan pemilik hewan peliharaan, khususnya anjing, dalam mengelola perawatan, interaksi sosial, pelatihan, serta mencari layanan dan adopsi. Dengan menyatukan jadwal perawatan, forum diskusi, tutorial pelatihan, pencarian layanan terdekat, dan fasilitasi adopsi, Woof menjadi pendamping utama bagi para pecinta binatang peliharaan. Fokusnya pada implementasi tema material menyoroti pentingnya pengalaman pengguna yang konsisten dan intuitif, baik dalam mode terang maupun gelap. Melalui pendekatan ini, Woof merancang antarmuka yang modern, mudah dipahami, dan menghibur, menciptakan lingkungan yang menarik bagi pengguna.
 
Berikut merupakan tahapan dalam pembuatan aplikasi ini :

1. Color
    Pertama tama kita harus tambahkan color pallete yang di sediakan di modul developer android. Tambahkan pada pada file Color.kt


Setelah color pallete masuk, lalu tambahkan tema yang berisi 2 jenis yaitu, light mode dan dark mode pada file Theme.kt


Lalu buatkan fungsi supaya pada settingan device jika light mode, app ini akan switch ke tema light mode, begitu juga pada dark mode.



2. Bentuk card

    Setelah warna di configurasi, saatnya card dari masing masing list Dog kita modifikasi bentuknya. Kita bisa akses file Shape.kt untuk merubah bentuk card.


Dengan configurasi ini, card dari masing2 list dog akan berbentuk seperti ini :

3. Typography
    Lalu langkah selanjutnya kita akan mengkonfigurasi text atau konfigurasinya supaya berbentuk lebih menarik dengan type role dan size yang menyesuaikan kebutuhan.

Berikut merupakan aturan yang akan digunakan pada pembuatan typography ini :


Lalu kita import masing2 font yang bisa di download di google font.


Buatkan folder font pada folder res dan import font yang sudah di download.

Sesuaikan dengan kebutuhan dan kesukaan masing masing jenis typography

Berikut perbedaan sebelum di berikan typography dan sesudah :


Sebelum


Sesudah

Terlihat sangat atraktif jika diberikan typography dan lebih jelas.

4. Simple navbar

Tambahkan composable bernama WoofTopAppBar pada file MainActivity.kt. Gunakan scaffold untuk mengisi konten pada navbar.
Lalu Tambahkan image yang sudah di sediakan dan buat alignment nya menjadi vertical.

Tampilannya akan seperti ini :




5. Tampilan Akhir

Berikut merupakan tampilan akhir dari wolf app ini dengan 2 tema :


Light Mode




Dark Mode

Semua sumber dan referensi dalam pembuatan tugas ini diambil dari Developer Android Code Labs dengan modifikasi dari beberapa struktur saya.

Source Code dari codingan saya dapat di akses pada GitHub


Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 5 - PPB B

Gambar
  Nama : I Gusti Agung Ngurah Adhi Sanjaya NRP : 5025211056 Kelas : Pemrograman Perangkat Bergerak B Dosen : Fajar Baskoro TUGAS 5 Pada tugas ke 5 kali ini, saya akan membuat sebuah aplikasi sederhana yang dimana akan berisi sebuah animasi boto yang berisi air dimana air tersebut bisa di isikan dengan menekan sebuah tombol dan botol tersebut memiliki jumlah air yang bisa di isi. Penerapan materi kali ini adalah Material Design yang dimana bisa dibilang ada hubungan dengan design dan UI karena dari tugas yang di buat, mengharuskan saya membuat sebuah bentuk/shape botol yang berisi warna yang akan drink  jika sebuah tombol di tekan. Berikut merupakan tampilan dari aplikasi yang sudah saya buat : Ini merupakan tampilan awal dari botol (sebelum di tekan tombol), default value 100ml Tampilan setelah tombol di tekan, akan menambahkan 200ml Tampilan jika tombol terus di tekan sampai 2500ml Amount yang di tambahkan menggunakan kelipatan 200 ml dengan default value 100 ml. Referensi ya...
Baca selengkapnya

Tugas 4 - PPB B

Gambar
Nama : I Gusti Agung Ngurah Adhi Sanjaya NRP : 5025211056 Kelas : Pemrograman Perangkat Bergerak B Dosen : Fajar Baskoro TUGAS 4 Pada tugas ke 4 kali ini, saya akan mencoba untuk membuat halaman login dengan design UI yang sederhana. Tugas ini akan menerapkan metode seperti composable, dan beberapa hal sederhana untuk membuat UI login yang sederhana juga. Berikut merupakan hasil aplikasi yang sudah saya buat : Gambar ini menunjukan bahwa, text field email dan password bisa di interaksikan dengan mengisi value email, dan password yang di hide Gambar ini menunjukan UI full login yang belum di interaksi sama sekali oleh user, terlihat bahwa pada text field email dan password berisi place holder yang bertuliskan "Email" dan "Password Kesimpulan dari tugas ini : Dapat mendesign UI dengan design yang sudah di tentukan Dapat mengimport gambar dengan ukuran yang di inginkan Dapat mmebuat gambar menjadi clickable Dapat membuat text field agar bisa di interaksikan oleh user Dapat ...
Baca selengkapnya

Tugas 3 - PPB B

Gambar
Nama : I Gusti Agung Ngurah Adhi Sanjaya NRP : 5025211056 Kelas : Pemrograman Perangkat Bergerak B Dosen : Fajar Baskoro Tugas 3 Pada tugas 3 kali ini, saya akan menerapkan fitur komponen button dengan interaksi dice roller. Aplikasi ini hanya berisikan tombol yang berisi tulisan "roll" dan terdapat ilustrasi dadu yang berisi dot angka 1 sampai 6. Jika tombol roll di tekan, dadu akan mengacak nilai yang akan keluar secara vertikal. Berikut merupakan hasil aplikasi yang sudah saya buat : Gambar ini saat tombol roll belum di tekan Gambar ini saat tombol roll sudah di tekan Bisa kita lihat, bahwa dadu yang awalnya salah satu bagian (atas) awal berniali 5, lalu setelah menekan roll nilainya berubah menjadi 1 Kesimpulan dari tugas ini : Menentukan fungsi composable Membuat tata letak dengan Komposisi. Membuat tombol dengan composable  Button . Mengimpor resource  drawable . Menampilkan gambar dengan composable  Image . Membuat UI interaktif dengan composable. Menggunakan compo...
Baca selengkapnya