Tugas 6 PPB - B

Nama : Tsabita Putri Ramadhany

NRP : 5025211130

Kelas : PPB - B


Tugas 6

Aplikasi Woof


Tugas : Membuat aplikasi woof

Petunjuk Tugas : https://kuliahppb.blogspot.com/2024/04/penerapan-tema-material-aplikasi-woof.htmlMembuat Aplikasi Woof di Android Studio

Pendahuluan

Dalam proyek ini, kita akan membuat aplikasi Woof yang akan menerapkan tema Material Design. Kita akan mengunduh kode proyek yang sudah disediakan, mengatur palet warna, bentuk, dan tipografi, serta menambahkan komponen-komponen penting pada aplikasi.

Mengunduh dan Menjalankan Kode Proyek

  1. Mengunduh Kode Proyek:
    • Unduh kode proyek Aplikasi Woof dari tautan ini.
    • Ekstrak kode yang telah diunduh dan buka di Android Studio.
    • Jalankan proyek untuk melihat tampilan awal aplikasi sebelum menerapkan tema material.

Menyiapkan Palet Warna

  1. Mengatur Palet Warna:

    • Untuk mendapatkan palet warna yang sesuai, kita akan menggunakan Material Theme Builder.
    • Masukkan Hexcode dari warna yang diinginkan pada menu Custom. Ganti warna Primary dengan Hexacode #006C4C sebagai warna utama.
    • Palet warna yang dihasilkan akan mencakup tema terang dan tema gelap.

  2. Penjelasan Palet Warna:

    • Warna Primer (Primary): Digunakan untuk komponen utama di seluruh UI.
    • Warna Sekunder (Secondary): Digunakan untuk komponen non-utama di UI.
    • Warna Tersier (Tertiary): Digunakan untuk akses kontras, menyeimbangkan warna primer dan sekunder, atau membawa perhatian pada elemen tertentu seperti kolom input.
    • Warna On: Warna yang muncul di atas warna lain dalam palet, terutama digunakan untuk teks, ikonografi, dan goresan. Misalnya, warna onSurface muncul di atas warna platform, dan warna onPrimary muncul di atas warna primer.

Mengatur Bentuk dan Tipografi

  1. Bentuk (Shapes):

    • Ada dua jenis bentuk yang digunakan dalam komponen di Compose:
      • Small: Mengubah komponen gambar menjadi bentuk lingkaran.
      • Medium: Membentuk komponen item daftar menjadi sebuah Card().

  2. Tipografi:

    • Gunakan tiga jenis font khusus yang dapat diunduh dari Google Fonts:
      • Abril Fatface
      • Poppins Bold
      • Poppins Regular
    • Unduh font tersebut, impor ke folder res, dan buat folder baru dengan nama font di dalamnya.

  3. Jenis Font dan Ukuran:

    • displayLarge: Digunakan sebagai gaya untuk nama aplikasi pada Top App Bar.
    • displayMedium: Digunakan untuk dogName karena merupakan informasi penting.
    • bodyLarge: Digunakan untuk dogAge dengan ukuran teks yang lebih kecil.

Inisialisasi Warna, Bentuk, dan Tipografi

  1. Menginisialisasi Elemen:

    • Inisialisasi palet warna, bentuk, dan tipografi dalam file berikut:
      • Color.kt: Untuk palet warna.
      • Shape.kt: Untuk bentuk komponen.
      • Type.kt: Untuk tipografi.
    • Terapkan ketiga elemen tersebut pada file Theme.kt.

  2. Menambahkan Top App Bar:

    • Tambahkan Top App Bar yang terdiri dari Image() dan Text() yang terbungkus oleh Row().
    • Desain Top App Bar dengan mengikuti rencana yang telah dibuat.

Implementasi Detil

  1. Mengatur Proyek di Android Studio:

    • Buka Android Studio, pilih "Empty Activity", beri nama proyek sebagai "WoofApp", dan pilih API level minimum 26 (Oreo).

  2. Modifikasi Template Proyek:

    • Hapus semua fungsi dengan anotasi @Composable dan isi dari setContent di MainActivity. Ini memberi kita ruang untuk menambahkan kode yang diperlukan untuk proyek ini.

  3. Membuat File Kotlin Baru:

    • Tambahkan file baru bernama WoofScreen.kt. Dalam file ini, kita akan membuat tampilan dan animasi untuk aplikasi Woof.
    • Buat fungsi WoofScreen() dengan parameter yang diperlukan untuk tampilan dan animasi.

  4. Penjelasan Parameter:

    • modifier: Digunakan untuk menentukan modifikasi visual untuk objek.
    • totalWaterAmount: Jumlah total air yang dapat ditampung oleh botol.
    • unit: Unit untuk mengukur jumlah air dalam botol, misalnya "ml" atau "L".
    • useWaterAmount: Jumlah air yang telah digunakan dari botol.
    • waterColor: Warna air dalam botol, defaultnya biru.
    • bottleColor: Warna botol air, defaultnya abu-abu muda.
    • capColor: Warna tutup botol air, defaultnya biru tua.

  5. Menggambar Tampilan Botol:

    • Gunakan Box() dengan ukuran 200.dp x 600.dp untuk menampung gambar botol.
    • Gunakan Canvas() untuk menggambar botol air di dalam Box.
    • Buat objek bottleBodyPath menggunakan Path(), dan gunakan fungsi moveTo(), lineTo(), dan quadraticBezierTo() untuk menggambar botol air.

  6. Fungsi-Fungsi Utama:

    • moveTo: Memindahkan titik awal tanpa menggambar garis.
    • lineTo: Menggambar garis lurus ke koordinat yang ditentukan.
    • quadraticBezierTo: Menggambar kurva bezier kuadratik dengan titik kontrol dan titik akhir.

  7. Membuat Animasi:

    • Gunakan AnimateFloatAsState() untuk animasi waterPercentage dengan parameter targetValue, label, dan animationSpec.
    • Gunakan AnimateIntAsState() untuk animasi usedWaterAmountAnimation dengan parameter yang sama.

  8. Menggambar Tampilan Air:

    • Gunakan Path() untuk membuat tampilan air, dan clipPath() untuk memastikan air berada dalam botol.
    • Beri nama objek air sebagai waterPath dan gunakan koordinat yang sesuai untuk menggambarnya.

  9. Menambahkan Tombol Interaksi:

    • Buat tombol di MainActivity untuk menambah jumlah air dalam botol sebesar 400ml ketika ditekan.
    • Buat variabel usedAmount dan totalWaterAmount untuk menyimpan jumlah air yang telah digunakan dan total air yang dapat ditampung oleh botol.
    • Tambahkan logika interaksi pada tombol menggunakan variabel usedAmount.

  10. Menggambar Tutup Botol:

    • Gunakan drawRoundRect() untuk menggambar tutup botol.
    • Tambahkan logika untuk menghitung persentase jumlah air dalam botol.

Langkah-langkah Detail:

  1. Mengunduh dan Menjalankan Kode Proyek:

    • Unduh kode proyek Aplikasi Woof dari sumber yang disediakan.
    • Ekstrak kode tersebut dan buka proyek di Android Studio.
    • Jalankan proyek untuk melihat tampilan awal aplikasi sebelum penyesuaian tema material.

  2. Mengatur Palet Warna:

    • Gunakan Material Theme Builder untuk mendapatkan palet warna yang diinginkan.
    • Masukkan Hexcode warna pada menu Custom, dan ubah warna Primary menjadi #006C4C.
    • Palet warna yang dihasilkan akan menampilkan tema terang dan gelap yang siap digunakan.

  3. Penjelasan Palet Warna:

    • Warna Primer digunakan untuk komponen utama di seluruh UI.
    • Warna Sekunder digunakan untuk komponen tambahan.
    • Warna Tersier digunakan untuk elemen kontras.
    • Warna On digunakan untuk teks dan ikonografi di atas warna lain.

  4. Mengatur Bentuk (Shapes):

    • Gunakan bentuk Small untuk membuat komponen gambar menjadi lingkaran.
    • Gunakan bentuk Medium untuk membuat item daftar menjadi Card().

  5. Mengatur Tipografi:

    • Unduh dan impor font Abril Fatface, Poppins Bold, dan Poppins Regular dari Google Fonts ke folder res/font.
    • Buat tabel yang menunjukkan jenis font, ketebalan, dan ukuran untuk setiap judul utama.

  6. Jenis Font dan Ukuran:

    • displayLarge: Untuk nama aplikasi di Top App Bar.
    • displayMedium: Untuk dogName sebagai informasi penting.
    • bodyLarge: Untuk dogAge dengan ukuran teks lebih kecil.

  7. Inisialisasi Warna, Bentuk, dan Tipografi:

    • Inisialisasi elemen warna di Color.kt, bentuk di Shape.kt, dan tipografi di Type.kt.
    • Terapkan inisialisasi tersebut di Theme.kt.

  8. Menambahkan Top App Bar:

    • Desain Top App Bar dengan Image() dan Text() dalam Row().
    • Gunakan elemen yang telah diinisialisasi untuk menerapkan tema material pada Top App Bar.
Hasil Aplikasi:


Source code : Github

Dokumentasi Saat mengerjakan :




Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 PPL - A

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPL - A Tugas 1 Dokumen Perancangan Perangkat Lunak Judul : Sistem Online untuk Dokumen Perancangan Perangkat Lunak bagi Perusahaan atau Tim Pengembang Link : Dokumen A. Deskripsi Dokumen Dokumen tersebut diharapkan dapat membantu tim pengembang software dengan membuat Sistem Online Untuk Dokumen Perancangan Perangkat Lunak Bagi Perusahaan/Tim Pengembang berbasis web yang dapat digunakan tim pengembang software untuk berkolaborasi dalam membuat perancangan maupun dalam pembuatan suatu sistem. Sistem ini dapat menyimpan seluruh requirementsuatu software hingga rancangan seperti Data Flow Diagram (DFD), Use Case Diagram (UCD), Activity Diagram, dan lain lain. B. Perancangan Arsitektur 1. Kebutuhan Perangkat Lunak a. Browser yang digunakan adalah Google Chrome dan Mozilla Firefox. Untuk Google Chrome minimum versi 67.0.3396.99 atau lebih tinggi dan untuk Mozilla Firefox minimum versi 59.0.2 atau lebih tinggi. b. Untuk sist...
Baca selengkapnya

Tugas 2 PPB - B

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPB - B Tugas 2 Aplikasi Happy Birthday Tugas : Menggunakan Jetpack Compose untuk membangun aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar. Petunjuk Tugas :  https://kuliahppb.blogspot.com/2024/03/mengenal-composable.html Saya telah membuat aplikasi yang mengucapkan Selamat Ulang Tahun menggunakan Andriod Studio. Jetpack Compose adalah toolkit modern untuk membangun UI Android. Ini mempermudah dan mempercepat pengembangan UI di Android dengan menggunakan lebih sedikit kode, alat yang canggih, dan API Kotlin yang intuitif. Antarmuka pengguna (UI) aplikasi adalah tampilan visual yang kita lihat di layar, seperti teks, gambar, tombol, dan berbagai jenis elemen lainnya. Fungsi composable adalah elemen dasar dalam Compose yang mendeskripsikan bagian-bagian dari UI kita. Fungsi composable dianotasi dengan @Composable, yang memberi tahu compiler Compose bahwa fungsi tersebut dimaksudkan untuk mengo...
Baca selengkapnya

Tugas 8 PPL - A

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPL - A Tugas 8 Estimasi Kapasitas System Tugas : Studi Kasus Estimasi Kapasitas System Petunjuk Tugas :  https://kuliahppl.blogspot.com/2024/05/estimasi-kapasistas-system.html Dokumen :  Dokumen Estimasi kapasitas sistem adalah proses kritis dalam perancangan dan pengembangan perangkat lunak untuk memastikan sistem dapat menangani beban kerja yang diharapkan dengan efisien dan efektif. Proses ini mencakup berbagai aspek seperti estimasi usaha, biaya, dan sumber daya yang diperlukan untuk mengembangkan perangkat lunak. Komponen Utama Estimasi Kapasitas Estimasi Usaha (Effort Estimation) : Proses untuk memprediksi jumlah waktu dan tenaga kerja yang diperlukan untuk menyelesaikan proyek perangkat lunak. Estimasi ini sering dilakukan menggunakan metode-metode seperti COCOMO (Constructive Cost Model), Function Point Analysis, dan Use Case Points (UCP). Metode UCP, misalnya, memperkirakan usaha berdasarkan jumlah d...
Baca selengkapnya