Menerapkan Material Theming pada Aplikasi Woof

on

 Pendahuluan

    Pada pertemuan kesembilan mata kuliah Pemrograman Perangkat Bergerak kali ini kita telah mempelajari tentang penerapan Material Theming atau Tema Material dalam pengembangan aplikasi berbasis Android. Pada latihan pertemuan minggu ini kita diminta untuk membuat Aplikasi Woof, dimana aplikasi ini akan menampilkan daftar hewan anjing dengan menggunakan Tema Material untuk membuat pengalaman aplikasi yang menarik.

Membuat Aplikasi Woof

    Mirip dengan proyek sebelumnya, kita akan mengunduh kode proyek Aplikasi Woof yang sudah disediakan. Untuk mengunduh kode Aplikasi Woof kalian bisa mengunduhnya di sini Aplikasi Woof . Setelah berhasil mengunduh kode tersebut, kita akan ekstrak kode tersebut dan akan menjalankannya. Berikut adalah tampilan awal dari Aplikasi Woof sebelum menerapkan tema material.
    Selanjutnya kita akan menyiapkan palet warna, shapes/bentuk, dan tipografi yang akan digunakan pada tema Material aplikasi ini. Untuk mendapatkan palet warna di sini, kita akan menggunakan bantuan dari website Material Theme Builder. Untuk mendapatkan palet warna kita akan masukkan Hexcode dari warna yang kita inginkan pada menu Custom dan mengganti warna Primarynya dengan Hexacode kita, yaitu #006C4C sebagai warna primary (utama) kita. Setelah itu hasil dari palet warna kita akan muncul seperti berikut.

    Berikut adalah palet warna yang dihasilkan.
  • Terdapat 2 palet warna yang dihasilkan, yaitu tema terang dan tema gelap.
  • Warna Primer (utama) digunakan untuk komponen utama di seluruh UI.
  • Warna Sekunder digunakan untuk komponen yang bukan utama di UI.
  • Warna Tersier digunakan untuk akses kontras yang dapat digunakan untuk menyeimbangkan warna primer dan sekunder atau membawa perhatian yang 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.
    Selanjutnya untuk bentuk yang akan digunakan pada komponen di Compose, ada dua jenis, yaitu small yang digunakan untuk mengubah komponen gambar menjadi bentuk lingkaran, dan untuk medium digunakan untuk membentuk komponen item daftar menjadi sebuah Card(). Lalu untuk tipografi, kita akan menggunakan tiga font khusus, yaitu Abril Fatface, Poppins Bold, dan Poppins Regular. Ketiga font tersebut dapat kita unduh dari Google Fonts. Kemudian setelah mengunduh font tersebut kita akan impor font tersebut ke folder res dan membuat folder baru didalamnya dengan nama font. Berikut adalah tabel yang menampilkan jenis font, ketebalan, dan ukuran untuk setiap judul utama yang akan ditambahkan.

Berikut adalah penjelasan singkat untuk beberapa Type Role :
  • 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.
    Pada warna, bentuk, dan tipografi yang telah dipersiapkan ini, kemudian kita akan inisialiasi untuk masing-masing elemen pada file Color.kt, Shape.kt, dan Type.kt. Kemudian ketiganya akan diterapkan pada file Theme.kt. Selain itu kita juga akan menambahkan sebuah Top App Bar yang terdiri dari Image() dan Text() yang terbungkus oleh Row(), berikut adalah rencana dari Top App Bar yang akan dibuat.

Hasil Jadi



Kode Sumber Aplikasi Woof

Kode Color.kt :
Kode Shape.kt :
Kode Theme.kt :
Kode Type.kt :
  • 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 sendiri merupakan 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.
Kode MainActivity.kt :
    Berikut adalah penjelasan beberapa komponen pada file MainActivity.kt :
  • WoofApp merupakan komponen utama aplikasi yang menggunakan Scaffold sebagai kerangka layar dengan WoofTopAppBar sebagai bagian atasnya. Di dalam Scaffold, terdapat LazyColumn yang menampilkan daftar hewan anjing dari data dogs, dan setiap item daftar diwakili oleh DogItem.
  • WoofTopAppBar merupakan komponen yang menampilkan nama aplikasi dan logo di bagian atas layar menggunakan CenterAlignedTopAppBar.
  • DogItem adalah komponen yang menampilkan item daftar untuk setiap hewan anjing, berisi gambar hewan anjing dan informasinya menggunakan Card, DogIcon untuk menampilkan gambar hewan anjing, dan DogInformation untuk menampilkan nama dan usia hewan anjing.
  • Pada kode ini juga menyediakan fungsi WoofPreview yang menampilkan tampilan aplikasi untuk pratinjau tampilan UI dalam mode desain.

Referensi


Comments

Post a Comment