Membuat Aplikasi Woof
PPB I - Tugas 9
Membuat Aplikasi Woof
Pada kesempatan ini, kita akan mengambil langkah pertama dalam menciptakan aplikasi Woof, yang bertujuan untuk menyajikan daftar anjing lengkap dengan gambar dan informasi terkait. Visi dari aplikasi ini adalah memberikan pengguna akses yang mudah dan menyenangkan untuk menjelajahi berbagai jenis anjing serta mendapatkan informasi yang relevan tentang masing-masing jenis tersebut. Melalui tutorial ini, kita akan mempelajari langkah-langkah untuk mengembangkan aplikasi tersebut, mulai dari desain hingga implementasi fungsionalitas.
Pada halaman tutorial, tersedia proyek awal yang berisi semua sumber daya yang dibutuhkan, termasuk gambar dan data informasi yang diperlukan untuk pengembangan aplikasi. Anda dapat mengunduhnya dari repositori GitHub ini, tepatnya pada cabang starter. Dengan menggunakan proyek awal ini, kita akan memulai proses modifikasi dan pengembangan aplikasi Woof kita. Ini memberikan landasan yang kokoh untuk memulai, memastikan bahwa kita memiliki semua komponen yang diperlukan sebelum kita memulai penyesuaian dan penambahan fitur.
Dalam menciptakan kombinasi warna yang tepat, kita dapat memanfaatkan bantuan dari situs website ini. Dalam proyek awal, file Color.kt sudah tersedia di dalam folder ui.theme. Tugas selanjutnya adalah mengubah kode dalam file tersebut sesuai dengan petunjuk yang diberikan. Adapun pengkodeannya dapat dilihat sebagai berikut.
Perlu diingat bahwa penamaan warna dimulai dengan nilai alpha, di mana 00 mengartikan opasitas minimum yang berarti transparan total, sementara ff menunjukkan opasitas maksimum atau solid penuh. Penentuan warna untuk masing-masing tema gelap dan terang dilakukan dalam file Color.kt ini. Dengan mengatur nilai alpha dengan cermat, kita dapat menciptakan efek transparansi yang sesuai dengan desain aplikasi kita, memastikan bahwa penggunaan warna dalam tema gelap dan terang berjalan dengan konsisten dan sesuai dengan kebutuhan visual aplikasi.
Pada file Theme.kt juga terdapat perubahan sebagai berikut.
Dalam file tersebut, kita menentukan variabel untuk menyimpan daftar warna yang akan digunakan dalam tema gelap dan terang. Di samping itu, juga terdapat metode composable bernama WoofTheme, yang bertanggung jawab atas pengaturan tema yang akan digunakan dalam aplikasi. Dalam kode ini, variabel dynamicColor menentukan apakah aplikasi akan mengikuti pengaturan tema gelap/terang yang ditetapkan oleh sistem Android atau menggunakan pengaturan yang telah kita buat sendiri. Jika nilainya TRUE, maka tema bawaan Android akan digunakan. Pada fungsi MaterialTheme, kita memanggil beberapa parameter yang telah kita definisikan sebelumnya, seperti colorScheme untuk warna, Shapes dari file Shapes.kt, dan Typography dari Type.kt. Informasi mengenai shape dan typography akan dijelaskan lebih lanjut pada bagian selanjutnya.
Terjadi perubahan pada file Shape.kt yang bertujuan untuk mengubah bentuk card anjing agar terlihat lebih estetis, yaitu dengan memberikan sudut yang rounded. Modifikasi tersebut juga mempengaruhi file MainActivity.kt untuk memperbarui tampilan card anjing sesuai dengan perubahan yang telah dilakukan. Dalam file Shape.kt, kode sumbernya mengalami penyesuaian untuk mencapai hasil yang diinginkan sebagai berikut.
Dalam file tersebut, terdapat definisi bentuk untuk tipe small dan medium yang akan digunakan dalam aplikasi. Variabel ini kemudian dapat dipanggil di DogIcon yang ada di MainActivity dengan menggunakan metode .clip(MaterialTheme.shapes.small). Dengan melakukan ini, kita dapat mengontrol tampilan dan bentuk ikon anjing dalam aplikasi, memberikan fleksibilitas dalam desain dan memastikan konsistensi antara berbagai bagian aplikasi.
Untuk mengatur gaya font dalam aplikasi, langkah pertama yang perlu dilakukan adalah mengunduh file font dari Google Font, khususnya Montserrat dan Abril Fatface. Kemudian, dari kedua font tersebut, kita memilih Bold dan Regular untuk Montserrat, serta Regular untuk Abril Fatface. Setelah mengunduh, kita perlu mengubah nama file sesuai dengan kebutuhan, misalnya montserrat_bold.ttf dan montserrat_regular.ttf untuk Montserrat, serta abril_fatface_regular.ttf untuk Abril Fatface. Selanjutnya, kita membuat folder baru dalam direktori res dengan nama font, yang nantinya akan digunakan untuk menyimpan file .ttf tersebut. Setelah membuat folder tersebut, kita memindahkan file .ttf yang telah diunduh ke dalamnya. Selanjutnya, kita perlu memodifikasi sumber kode dalam file Type.kt agar dapat menggunakan font yang telah kita pilih sebelumnya sebagai berikut.
Contoh penggunaan font pada kode Main terdapat pada MaterialTheme.typography.bodyLarge. Kemudian lakukan penambahan header dengan melakukan modifikasi pada kode MainActivity.kt sebagai berikut.
Dalam kode sumber, kita menambahkan sebuah metode bernama WoofTopAppBar yang berfungsi sebagai header untuk aplikasi. Untuk menciptakan header yang berada di tengah, kita menggunakan komponen CenterAlignedTopAppBar, dimana parameter title akan berisi komponen header kita, yang terdiri dari baris yang menampilkan gambar logo dan teks "Woof".
Adapun hasil dari aplikasi yang telah kita kerjakan dapat dilihat dalam cuplikan video berikut.
Komentar
Posting Komentar