Penerapan Tema Material - Membuat Aplikasi Woof
Pada pertemuan minggu ke-9 perkuliahan mata kuliah Pemrograman Perangkat Bergerak, kami membahas tentang Penerapan Tema Material dalam pengembangan aplikasi perangkat lunak berbasis Android. Sebagai tugas latihan, kami diminta membuat aplikasi Woof. Aplikasi ini akan menampilkan daftar anjing dan menggunakan tema Material untuk membuat pengalaman aplikasi yang menarik.
.png)
Untuk membuat aplikasi Woof, langkah pertama yang dilakukan adalah mendownload proyek awal dari GitHub, kemudian mengekstraknya dari zip. Setelah itu, buka proyek tersebut di Android Studio dan jalankan aplikasi. Berikut tampilan awal aplikasi pada menu preview sebelum diterapkan tema Material:
Langkah selanjutnya adalah menyiapkan warna, bentuk, dan tipografi yang akan digunakan pada tema Material. Untuk menghasilkan palet warna, dapat menggunakan bantuan Material Theme Builder dengan memasukkan warna dasar #006C4C sebagai Primary Color. Ini akan menghasilkan palet warna sebagai berikut:
- Terdapat 2 palet warna yang dihasilkan, yaitu untuk tema terang dan gelap.
- Warna primer digunakan untuk komponen utama di seluruh UI.
- Warna sekunder digunakan untuk komponen yang bukan utama di UI.
- Warna tersier digunakan untuk aksen kontras yang dapat digunakan untuk menyeimbangkan warna primer dan sekunder atau membawa perhatian tinggi pada elemen, seperti kolom input.
- Elemen warna on muncul di atas warna lain pada palet, dan terutama diterapkan pada teks, ikonografi, dan goresan. Pada palet warna, terdapat warna onSurface, yang muncul di atas warna platform, dan warna onPrimary, yang muncul di atas warna primer.
Untuk bentuk yang akan digunakan pada komponen di Compose, ada dua jenis, yaitu small untuk mengubah komponen gambar menjadi bentuk lingkaran, dan medium untuk membentuk komponen item daftar menjadi sebuah Card. Kemudian untuk tipografi, akan digunakan tiga font khusus: Abril Fatface, Montserrat Bold, dan Montserrat Regular. Font-font tersebut dapat diunduh dari Google Fonts dan diimpor ke dalam direktori res/font. Di bawah ini adalah tabel yang menampilkan jenis font, ketebalan, dan ukuran dari setiap judul utama yang akan ditambahkan.
- displayLarge digunakan sebagai gaya untuk nama aplikasi pada Top App Bar.
- displayMedium digunakan sebagai gaya untuk dogName karena merupakan informasi singkat yang penting.
- bodyLarge sebagai gaya untuk dogAge karena berfungsi cukup baik dengan ukuran teks yang lebih kecil.
Warna, bentuk, dan tipografi yang telah disiapkan kemudian diinisialisasi masing-masing pada Color.kt, Shape.kt, dan Type.kt. Kemudian ketiganya diterapkan pada Theme.kt. Berikut ini adalah hasil kode yang dihasilkan:
- DarkColorScheme dan LightColorScheme adalah dua objek yang mewakili skema warna untuk tema gelap dan terang dalam aplikasi. Masing-masing objek ini mengatur warna untuk berbagai elemen UI seperti primer, sekunder, dan latar belakang, serta memberikan aksen dan kontras yang sesuai.
- WoofTheme adalah fungsi Composable yang digunakan untuk menerapkan tema visual ke seluruh aplikasi. Fungsi ini mengambil parameter seperti darkTheme untuk menentukan apakah tema yang akan diterapkan adalah tema gelap atau terang, dan dynamicColor untuk menentukan apakah warna tema dapat berubah secara dinamis. Di dalamnya, WoofTheme menggunakan MaterialTheme untuk menerapkan skema warna, tipografi, dan bentuk yang telah disiapkan sebelumnya.
Setelah menyiapkan hal-hal yang diperlukan untuk tema Material, langkah berikutnya adalah menerapkan tema tersebut pada komponen Composable aplikasi. Ini dapat dilakukan dengan memodifikasi file MainActivity.kt sebagai berikut:
- WoofApp adalah komponen utama aplikasi yang menggunakan Scaffold sebagai kerangka layar dengan WoofTopAppBar sebagai bagian atasnya. Di dalam Scaffold, terdapat LazyColumn yang menampilkan daftar anjing dari data dogs, dan setiap item daftar diwakili oleh DogItem.
- WoofTopAppBar adalah komponen yang menampilkan nama aplikasi dan logo di bagian atas layar menggunakan CenterAlignedTopAppBar.
- DogItem adalah komponen yang menampilkan item daftar untuk setiap anjing, berisi gambar anjing dan informasinya menggunakan Card, DogIcon untuk menampilkan gambar anjing, dan DogInformation untuk menampilkan nama dan usia anjing.
- Kode tersebut juga menyediakan fungsi WoofPreview yang menampilkan tampilan aplikasi untuk pratinjau tampilan UI dalam mode desain.
Terakhir, kita dapat menjalankan aplikasi. Berikut adalah tampilan akhir aplikasi Woof dalam mode terang, gelap, dan dynamic color pada menu preview:
Dan berikut adalah tampilan aplikasi pada perangkat Android:
Komentar
Posting Komentar