TUGAS 6 PPB

Penerapan Tema Material

Aplikasi Woof

Deskripsi Singkat Aplikasi

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. Dengan menggabungkan jadwal perawatan, grup diskusi, tutorial pelatihan, pencarian layanan terdekat, dan fasilitasi adopsi hewan, Woof bertujuan untuk menjadi satu-satunya aplikasi yang diperlukan oleh pecinta hewan peliharaan untuk merawat dan menghubungkan dengan komunitas hewan peliharaan mereka. Pada pembahasan kali ini, mata kuliah pembelajaran Pemrograman Perangkat Bergerak Aplikasi ini menjelaskan terkait penerapan tema material pada aplikasi Woof, dimana terdapat 2 penerapan tema material, yakni penerapan ketika tema terang dan tema gelap yang pada prinsipnya bertujuan untuk meningkatkan pengalaman pengguna dengan memberikan desain antarmuka yang konsisten, menarik, dan intuitif dalam aplikasi Android. Penerapan tema material dapat membantu menciptakan aplikasi yang terasa modern, mudah dipahami, dan menyenangkan untuk digunakan. Berikut merupakan langkah-langkah penerapan pembuatan aplikasi Woof.  

Mempelajari Kode Awal

1. Buka kode di Android Studio.
2. Buka com.example.woof > data > Dog.kt berisi Dog data class yang akan digunakan untuk mewakili foto, nama, usia, dan hobi anjing serta berisi daftar anjing dan informasi yang akan digunakan sebagai data di aplikasi.
3. Buka res > drawable. File ini berisi semua aset gambar yang dibutuhkan untuk aplikasi "Woof", termasuk ikon aplikasi, gambar anjing, dan ikon.
4. Buka res > values > strings.xml. File ini berisi string yang digunakan dalam aplikasi ini, termasuk nama aplikasi, nama anjing, deskripsinya, dan lainnya.
5. Buka MainActivity.kt. File ini berisi kode untuk membuat daftar sederhana yang menampilkan foto anjing, nama anjing, dan usia anjing tersebut.
6. WoofApp() berisi LazyColumn yang menampilkan DogItem.
7. DogItem() berisi Row yang menampilkan foto anjing dan informasi tentangnya.
8. DogIcon() menampilkan foto anjing.
9. DogInformation() menampilkan nama dan usia anjing.
10. WoofPreview() memungkinkan melihat pratinjau aplikasi di panel Design.

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 :

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

Menambahkan Warna

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

Pemetaan Warna

1. Dalam fungsi composable DogItem(), gabungkan Row() dengan Card(). 
   
   
   
2. Karena Card kini merupakan composable turunan pertama di DogItem(), teruskan pengubah dari DogItem() ke Card, dan update pengubah Row ke instance baru Modifier.
   
   
   
3. 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

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

Tema Gelap

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

Warna Dinamis

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

perbedaan tampilan dengan penerapan tema yang berbeda

Menambahkan Bentuk 

1. Buka file Shape.kt dan perhatikan bahwa parameter kecil ditetapkan ke RoundedCornerShape(50.dp). Ini akan digunakan untuk membentuk gambar menjadi lingkaran.
   
   
   
2. 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.
   
   
   
3. 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.
   
4. Sekarang di WoofPreview(), ikon berbentuk lingkaran.
   
   
   

Menambahkan Bentuk Ke Item Dasar

1. 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

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

Mendownload Font Kustom

1. Buka https://fonts.google.com/.
2. Telusuri  Montserrat, lalu klik Download family.
3. Buka file zip.
4. 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.
5. Di folder font, ganti nama Montserrat-Bold.ttf menjadi montserrat_bold.ttf dan ganti nama Montserrat-Regular.ttf menjadi montserrat_regular.ttf.
6. Telusuri Abril Fatface dan klik Download family.
7. Buka folder Abril_Fatface yang telah didownload. Pilih AbrilFatface-Regular.ttf, lalu tarik ke direktori resource font.
8. Di folder font, ganti nama Abril_Fatface_Regular.ttf menjadi abril_fatface_regular.ttf.
   
   
   
   
   
   
   
   
   

Melakukan Inisialisasi Font

1. 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. 
   
2. 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.
   
3. 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

1. 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.
   
   
   
2. Sekarang di WoofPreview(), nama anjing akan menampilkan font Montserrat tebal dalam 20.sp, dan usia anjing menampilkan font Montserrat normal dalam 14.sp.
   
   
   

Menambahkan Panel Atas

Di MainActivity.kt, buat composable bernama WoofTopAppBar().

Hasil

Penerapan tema terang

Penerapan tema gelap

Link Github 

https://github.com/valenfajri18/PPB.git