Aplikasi Woof

 Membuat Aplikasi Woof

Pada kesempatan kali ini kita akan mencoba untuk membuat aplikasi woof, yakni aplikasi yang dapat menampilkan daftar anjing berisi gambar dan informasi lainnya. Ilustrasi dari hasil aplikasi yang akan dibuat seperti berikut. Yuk kita mulai mengikuti tutorial-nya.

Memulai dengan starter project

Pada halaman tutorial kita diberikan starter project dimana berisi resource-resource yang diperlukan, seperti gambar dan data informasi. Anda dapat mendownload pada github ini pada branch starter. dan kita akan mulai memodifikasi starter projek.

Menambahkan warna

Dalam menyusun warna yang baik, kita dapat menggunakan bantuan website ini. Pada starter projek kita sudah tersedia file Color.kt pada folder ui.theme. Ubah sumber kode menjadi berikut:

 

Perlu diingat, penamaan warna dimulai dengan nilai alpha, dimana 00 mengartikan opasitas minimum, yakni transparan total, sedangkan ff opasitas maksimum, yakni solid penuh. Pada file Color.kt ini lah kita menentukan warna untuk masing-masing tema gelap dan terang.

Pada file Theme.kt juga akan diubah menjadi berikut:

 

pada file ini kita mendefinisikan variable untuk menyimpan daftar warna untuk tema gelap dan terang. Selain itu, pada kode ini juga terdapat metode composable WoofTheme, dimana di sinilah penentuan penggunaan tema. variabel dynamicColor menentukan apakah aplikasi akan mengikuti setting tema gelap/terang dari android atau menggunakan setting yang kita custom sendiri. Apabila TRUE, maka akan menggunakan bawaan android. Pada fungsi MaterialTheme kita memanggil beberapa parameter yang telah kita definisikan colorScheme untuk warna, Shapes dari file Shapes.kt, Typography dari Type.kt. Untuk shape dan typography ada pada bagian berikutnya.

Menambahkan bentuk

Dilakukan perubahan pada file Shape.kt dan MainActivity,kt untuk merubah bentuk card anjing sehingga lebih enak dipandang, yakni dengan membuat tampilan sudut yang rounded. Pada Shape.kt sumber kode menjadi seperti ini:

 

Pada file ini kita mendefinisikan bentuk untuk tipe small dan medium. Variabel ini berikutnya dapat kita panggilpada DogIcon di MainActivity dengan cara berikut .clip(MaterialTheme.shapes.small).

Menambahkan tipografi

Kita perlu mendownload file font style pada google font dan mencari Montserrat dan Abril Fatface. Untuk montserrat kita menggunakan Bold dan Regular, ubah nama file menjadi montserrat_bold.ttf dan montserrat_regular.ttf. Sedangkan untuk Abril Faface menjadi abril_fatface_regular.ttf. Buatlah folder font pada folder res dengan cara berikut: klik kanan pada res, New, Anroid Resource Directory, lalu pilih 

Ubah nama direktori menjadi font, dan tipe resource menjadi font. klik OK.

Pindahkan file .ttf ke direktori font yang baru saja dibuat. Lalu kita memodifikasi sumber kode Type.kt untuk menggunakan font yang kita inginkan.

 

Contoh penggunaan font pada kode Main seperti ini MaterialTheme.typography.bodyLarge.

Menambahkan panel atas / header

Lakukan modifikasi sumber kode MainActivity.kt menjadi berikut:

 

Pada sumber kode kita membuat method WoofTopAppBar dimana merupakan header, komponen yang digunakan adalah CenterAlignedTopAppBar untuk membuat header align tengah, dengan parameter title berisi komponen header kita, yakni baris berisi gambar logo dan teks Woof. Terdapat perbedaan sumber kode dengan referensi, yakni pemanggilan OptIn sebelum pendefinisian Composable, seperti berikut:

 

Hasil

Hasil dari aplikasi yang kita buat seperti ini: