Aplikasi Woof adalah aplikasi yang menampilkan daftar anjing dengan menggunakan Desain Material untuk membuat tampilan dan pengalaman aplikasi yang menarik.
Aplikasi ini dimaksudkan untuk menampilkan daftar afirmasi. Langkah pertama dalam mengonfigurasi UI untuk menampilkan daftar adalah membuat List Item. Setiap item terdiri dari gambar dan string. Data untuk setiap item ini dilengkapi dengan kode awal, dan Anda akan membuat komponen UI untuk menampilkan item tersebut.
Item akan terdiri dari composable Card, yang berisi Image dan composable Text.
Beberapa satuan dalam View
px, dp, sp
● px: actual pixels on the screen
● dp: density-independent pixel, based on pixel density of
the phone (e.g. 160 dpi vs 440 dpi)
○ Use this for view padding/margins/width/height
● sp: scale-independent pixels, scaled by user’s font
Material Design adalah sebuah gaya desain terbaru dari Google yang memiliki prinsip desain itu harus seperti sebuah kertas pada kenyataannya. Terus apa bedanya dengan kertas? Material design merupakan kertas ajaib yang bisa membesar, mengecil, membelah diri, berubah warna, dan bertransformasi menjadi berbagai bentuk. Sifat inilah yang disebut Tangible Surface.
Desain dengan Material Design pada prinsip nya bertujuan untuk memberikan fokus yang jelas kepada pengguna dengan menyediakan suatu struktur. Struktur disini lebih kepada menampilkan apa yang penting berada didepan daripada yang tidak penting.
Material Design dari segi layout, tipografi, dan gambar yang ditampilkan menyerupai majalah. Setiap huruf harus ditata dan dipilih dengan jelas mana yang judul, sub judul, quotes, dan huruf untuk isi dari artikelnya. Layout tiap aplikasi dengan gaya material design inipun harus menggunakan grid dan keylines.
Untuk jenis font, Google menyarankan untuk menggunakan jenis font Universal Character Set (UCS) Transformation Format-8-bit (UTF). Mengapa demikian? Hasil riset Google menyatakan bahwa font yang berjenis UTF lebih cepat di render (Ditampilkan dilayar device) dibandingkan dengan jenis True Type Font (TTF).
Ada 3 jenis warna yang digunakan pada Material Design:
Warna background, Terdapat 2 jenis warna yakni Light/dark (Putih/Hitam).
Warna Primer, Merupakan warna utama pada aplikasi, misalnya facebook memiliki warna primer biru, dan twitter memiliki warna primer biru muda. Warna primer juga digunakan pada huruf untuk menunjukan Judul atau nama Tab diaplikasi yang akan anda buat.
Warna aksen, merupakan warna kedua dari aplikasi anda yang biasanya bertabrakan atau komplementer (tergantung dari keinginan si desainer). Google sendiri menggunakan warna-warna yang komplementer alias saling melengkapi. Warna aksen biasanya digunakan untuk tombol bulet di kanan layar dan digunakan pada huruf untuk menunjukan hal yang penting pada dialog yang ditampilkan sebelum pengguna mengambil suatu keputusan.
