PPB: Tugas 6 (Woof)

June 17, 2024

PPB: Tugas 6 (Woof)

Nama: Nayya Kamila Putri Yulianto
NRP: 5025211183
Kelas: PBB (B)

Aplikasi "Woof" adalah platform yang menyediakan berbagai fitur untuk membantu pemilik hewan peliharaan, khususnya anjing, dalam manajemen perawatan, interaksi sosial, pelatihan, pencarian layanan, dan pencocokan adopsi. Aplikasi ini menggabungkan jadwal perawatan, grup diskusi, tutorial pelatihan, pencarian layanan terdekat, dan fasilitasi adopsi hewan, dengan tujuan menjadi satu-satunya aplikasi yang diperlukan oleh pecinta hewan peliharaan untuk merawat dan terhubung dengan komunitas mereka.

Mempelajari kode awal

Buka kode awal di Android Studio.
Buka com.example.woof > data > Dog.kt. File ini berisi Dog data class yang akan digunakan untuk mewakili foto, nama, usia, dan hobi anjing. File ini juga berisi daftar anjing dan informasi yang akan Anda gunakan sebagai data di aplikasi Anda.
Buka res > drawable. File ini berisi semua aset gambar yang Anda butuhkan untuk project ini, termasuk ikon aplikasi, gambar anjing, dan ikon.
Buka res > values > strings.xml. File ini berisi string yang Anda gunakan dalam aplikasi ini, termasuk nama aplikasi, nama anjing, deskripsinya, dan lainnya.
Buka MainActivity.kt. File ini berisi kode untuk membuat daftar sederhana yang menampilkan foto anjing, nama anjing, dan usia anjing tersebut.
WoofApp() berisi LazyColumn yang menampilkan DogItem.
DogItem() berisi Row yang menampilkan foto anjing dan informasi tentangnya.
DogIcon() menampilkan foto anjing.
DogInformation() menampilkan nama dan usia anjing.
WoofPreview() memungkinkan Anda melihat pratinjau aplikasi di panel Design.

Berikut ini adalah tampilan awal code saat dijalankan

Memastikan Emulator/Perangkat Bertema Terang
Dalam pembuatan aplikasi Woof, akan menggunakan tema terang dan gelap, tetapi sebagian besar codelab ini menggunakan tema terang. Untuk melihat aplikasi dalam tema terang, di emulator atau perangkat fisik

Buka aplikasi Setelan di perangkat.
Telusuri Tema gelap dan klik di dalamnya.
Jika Tema gelap aktif, nonaktifkan.

Menambahkan Warna

Buka file Color.kt dan ganti konten dengan kode di bawah ini untuk menyalin dalam skema warna baru.
Buka file Theme.kt dan ganti konten dengan kode di bawah ini untuk menambahkan warna baru ke tema.
Melihat preview aplikasi.

Pemetaan Warna

Dalam fungsi composable DogItem(), gabungkan Row() dengan Card().
Karena Card kini merupakan composable turunan pertama di DogItem(), teruskan pengubah dari DogItem() ke Card, dan update pengubah Row ke instance baru Modifier
Lihat WoofPreview(). Item daftar sekarang telah otomatis berubah warna karena Composable Card. Warnanya terlihat bagus, tetapi tidak ada spasi di antara item daftar.

File Dimensi

Di WoofApp(), tambahkan modifier dengan padding_small dalam panggilan ke DogItem().
Lihat WoofPreview(), sekarang ada lebih banyak definisi di antara item daftar.

Tema Gelap

Di bagian WoofPreview(), buat fungsi baru bernama WoofDarkThemePreview() dan anotasikan dengan @Preview dan @Composable.
Di dalam DarkThemePreview(), tambahkan WoofTheme() tanpa menambahkan WoofTheme(), Tetapkan parameter darkTheme ke true.
Panggil WoofApp() di dalam WoofTheme().

Warna Dinamis

Untuk mengaktifkan warna dinamis, buka Theme.kt dan buka composable WoofTheme(), lalu setel parameter dynamicColor ke benar.
Codelab ini berfokus pada tema kustom, jadi nonaktifkan dynamicColor sebelum melanjutkan.
Melihat pratinjau aplikasi.

Menambahkan Bentuk

Buka file Shape.kt dan perhatikan bahwa parameter kecil ditetapkan ke RoundedCornerShape(50.dp). Ini akan digunakan untuk membentuk gambar menjadi lingkaran.
Buka MainActivity.kt. Di DogIcon(), tambahkan atribut clip ke modifier dari Image; tindakan ini akan memotong gambar menjadi sebuah bentuk. Teruskan MaterialTheme.shapes.small.

Saat melihat pratinjau aplikasi, maka akan melihat ikon gambar anjing tersebut menjadi lingkaran. Namun, beberapa foto terpotong di bagian samping dan tidak muncul sebagai lingkaran sepenuhnya.
Untuk membuat semua foto menjadi lingkaran, tambahkan atribut ContentScale dan Crop; tindakan ini akan memangkas gambar agar sesuai. Perlu diketahui bahwa contentScale adalah atribut dari Image, dan bukan bagian dari modifier.
Sekarang di WoofPreview(), ikon berbentuk lingkaran.

Menambahkan Bentuk Ke Item Dasar

Buka file Shape.kt. Card adalah komponen media, sehingga Anda menambahkan parameter media objek Shapes. Untuk aplikasi ini, pojok kanan atas dan kiri bawah item daftar, tetapi tidak membentuk lingkaran penuh. Untuk mencapainya, teruskan 16.dp ke atribut medium.

Menambahkan Tipografi

Di tampilan project Android Studio, klik kanan folder res.
Pilih New > Android Resource Directory.
Beri nama Direktori font, setel jenis Resource sebagai font, dan klik OK.
Buka direktori resource font baru yang terletak di res > font.

Mendownload Font Kustom

Buka https://fonts.google.com/.
Telusuri Montserrat, lalu klik Download family.
Buka file zip.
Buka folder Montserrat yang didownload. Di folder static, temukan Montserrat-Bold.ttf dan Montserrat-Regular.ttf (ttf adalah singkatan dari TrueType Font dan merupakan format untuk file font). Pilih kedua font dan tarik ke direktori resource font dalam project Anda di Android Studio.
Di folder font, ganti nama Montserrat-Bold.ttf menjadi montserrat_bold.ttf dan ganti nama Montserrat-Regular.ttf menjadi montserrat_regular.ttf.
Telusuri Abril Fatface dan klik Download family.
Buka folder Abril_Fatface yang telah didownload. Pilih AbrilFatface-Regular.ttf, lalu tarik ke direktori resource font.
Di folder font, ganti nama Abril_Fatface_Regular.ttf menjadi abril_fatface_regular.ttf.

Melakukan Inisialisasi Font

Di jendela project, buka ui.theme > Type.kt. Lakukan inisialisasi font yang didownload di bawah pernyataan impor dan di atas Typography val. Pertama, lakukan inisialisasi Abril Fatface dengan menyetelnya sama dengan FontFamily dan meneruskan Font dengan file font abril_fatface_regular.
Lakukan inisialisasi Montserrat, di bawah Abril Fatface, dengan menyetelnya sama dengan FontFamily dan meneruskan Font dengan file font montserrat_regular. Untuk montserrat_bold, sertakan juga FontWeight.Bold. Meskipun Anda meneruskan file font versi cetak tebal, Compose tidak mengetahui bahwa file tersebut dicetak tebal, jadi Anda perlu menautkan file secara eksplisit ke FontWeight.Bold.
Untuk atribut displayLarge, tetapkan sama dengan TextStyle, lalu isi fontFamily, fontWeight, dan fontSize dengan informasi dari tabel di atas. Artinya, semua teks yang ditetapkan ke displayLarge akan memiliki Abril Fatface sebagai font, dengan ketebalan font normal, dan fontSize 36.sp.

Menambahkan Tipografi Ke Teks Aplikasi

Tambahkan displayMedium sebagai gaya untuk dogName karena merupakan informasi singkat yang penting. Tambahkan bodyLarge sebagai gaya untuk dogAge karena berfungsi cukup baik dengan ukuran teks yang lebih kecil.
Sekarang di WoofPreview(), nama anjing akan menampilkan font Montserrat tebal dalam 20.sp, dan usia anjing menampilkan font Montserrat normal dalam 14.sp.