Tugas 9 - Pemrograman Perangkat Bergerak

-

  Hesekiel Nainggolan

5025201054

PPB I

Material Design - Aplikasi Woof

Pada pertemuan kita kali ini akan membuat Woof, yaitu aplikasi yang menampilkan daftar anjing dan menggunakan Desain Material untuk membuat pengalaman aplikasi yang menarik. Sama seperti pertemuan sebelumnya, pada kesempatan ini kita akan membuat aplikasi woof dalam bentuk image scroling. Adapun aplikasi woofnya dapat kita dowload melalui Github ini.

1. Membuat New Project

Sama seperti pertemuan-pertemuan sebelumnya, tahapan awal dalam membuat aplikasi yaitu membuat sebuah project baru. untuk kesempatan ini kita akan membuat aplikasi woof, kita bebas untuk membuat penamaan aplikasinya

2. Menambahan Skema Warna

Skema warna adalah kombinasi warna yang digunakan aplikasi Anda. Kombinasi warna yang berbeda membangkitkan suasana hati yang berbeda, yang memengaruhi perasaan orang saat menggunakan aplikasi Anda.

Warna, dalam sistem Android, diwakili oleh nilai warna heksadesimal (hex). Kode warna heksadesimal dimulai dengan tanda pagar (#), dan diikuti dengan enam huruf dan/atau angka yang mewakili komponen merah, hijau, dan biru (RGB) dari warna tersebut. Dua huruf/angka pertama merujuk ke warna merah, dua huruf berikutnya berwarna hijau, dan dua huruf terakhir mengacu pada warna biru

Di halaman Material Theme Builder, ada opsi untuk mengklik tombol Export guna mendownload file Color.kt dan file Theme.kt dengan tema kustom yang Anda buat di Theme Builder.

Tombol ini akan bekerja untuk menambahkan tema kustom yang telah kita buat ke aplikasi. Namun, karena file Theme.kt yang dihasilkan tidak menyertakan kode untuk warna dinamis yang akan kita bahas nanti di codelab, salin file tersebut.

Dikode kita, WoofTheme(), colorScheme val menggunakan pernyataan when
  • Jika dynamicColor bernilai benar dan versi build adalah S atau yang lebih tinggi, perangkat akan diperiksa apakah menggunakan darkTheme atau tidak.
  • Jika temanya gelap, colorScheme akan disetel ke dynamicDarkColorScheme.
  • Jika tidak dalam tema gelap, warna akan disetel ke dynamicLightColorScheme.
  • Jika aplikasi tidak menggunakan dynamicColorScheme, aplikasi akan diperiksa apakah menggunakan darkTheme. Jika demikian, colorScheme akan ditetapkan ke DarkColors.
  • Jika tidak ada yang benar, colorScheme akan ditetapkan ke LightColors.


Color.kt


Theme.kt


3. Menambahkan Bentuk

Menerapkan bentuk akan sangat memengaruhi tampilan dan nuansa composable. Bentuk mampu menarik perhatian, mengidentifikasi komponen, mengomunikasikan status, dan mengekspresikan merek.

Banyak bentuk ditentukan menggunakan RoundedCornerShape, yang menggambarkan persegi panjang dengan sudut membulat. Angka yang diteruskan menentukan kebulatan sudut. Jika RoundedCornerShape(0.dp) digunakan, persegi panjang tidak memiliki sudut membulat; jika RoundedCornerShape(50.dp) digunakan, sudut akan membulat sepenuhnya.

4. Menambahkan Tipografi

Jenis huruf adalah pilihan gaya font yang dapat digunakan di seluruh aplikasi dan memastikan gaya yang fleksibel namun konsisten. Jenis huruf Desain Material mencakup lima belas gaya font yang didukung oleh sistem jenis. Penamaan dan pengelompokannya telah disederhanakan untuk: tampilan, judul utama, judul, isi, dan label, dengan ukuran besar, sedang, dan kecil untuk masing-masing. Anda hanya perlu menggunakan pilihan ini jika ingin menyesuaikan aplikasi. Jika Anda tidak tahu apa yang harus ditetapkan untuk setiap kategori jenis huruf, ada skala tipografi default yang dapat Anda gunakan. Kemudian kita akan melakukan inisialisasi font:

Kemudian kita akan menambahkan jenis judul utama ke setiap instance teks di aplikasi. Kita menambahkan displayMedium sebagai gaya untuk dogName karena merupakan informasi singkat yang penting. Tambahkan bodyLarge sebagai gaya untuk dogAge karena berfungsi cukup baik dengan ukuran teks yang lebih kecil:


5. Menambahkan Panel Atas

Scaffold adalah tata letak yang menyediakan slot untuk berbagai komponen dan elemen layar, seperti Image, Row, atau Column. Scaffold juga menyediakan slot untuk TopAppBar, yang akan Anda gunakan di bagian ini.

TopAppBar dapat digunakan untuk berbagai tujuan, tetapi dalam hal ini, Anda akan menggunakannya untuk branding dan memberikan karakteristik pada aplikasi. Ada empat jenis TopAppBar: tengah, kecil, sedang, dan besar. Dalam code ini kita akan menerapkan panel aplikasi atas di tengah. Kita akan membuat composable yang terlihat seperti screenshot di bawah, dan memasukkannya ke bagian topBar dari Scaffold.


Hasil :

 








Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 11 - Pemrograman Perangkat Bergerak

-
Gambar
Hesekiel Nainggolan 5025201054 PPB I UNSCRAMBLE WORDS Pada pertemuan kali ini, kita akan mencoba membuat aplikasi Unscramble Words.  Aplikasi Unscramble adalah game pengacak ejaan kata untuk satu pemain. Aplikasi menampilkan kata acak, dan pemain harus menebak kata tersebut menggunakan semua huruf yang ditampilkan. Pemain akan mendapatkan poin jika kata tersebut benar. Jika tidak, pemain dapat mencoba menebak kata sebanyak-banyaknya. Aplikasi ini juga memiliki opsi untuk melewati kata saat ini. Di pojok kanan atas, aplikasi menampilkan jumlah kata, yaitu jumlah kata acak yang dimainkan dalam game saat ini. Ada 10 kata acak per game. Kita dapat menggunakan sumber code dari  Github . Tahapan awal dari aplikasi ini adalah Buka project dengan kode awal di Android Studio, Jalankan aplikasi di perangkat Android atau di emulator, dan Ketuk tombol Submit dan Skip untuk menguji aplikasi. Panduan Kode WordsData.kt  :  File ini berisi daftar kata yang digunakan dalam game, kons...
Baca selengkapnya

Tugas 13 - Pemrograman Perangkat Bergerak

-
Gambar
 Hesekiel Nainggolan 5025201054 PPB I FLUTTER - MUSIC APPLICATION (MyArtist) Pada pertemuan kali ini kita akan membuat sebuah aplikasi musik, MyArtist, sebuah aplikasi pemutar musik tempat penggemar dapat terus mengikuti kabar terbaru dari artis favoritnya. Bagian ini membahas cara memodifikasi desain aplikasi Anda agar terlihat bagus di berbagai platform. Code program dapat kita lihat pada link  Github . Sebenarnya aplikasi ini sudah jadi dalam bentuk web dan windows, namun dalam bentuk android, bentuk dari aplikasi ini masih tidak bagus. Jadi pada pertemuan ini, kita akan coba memperbaiki tampilan aplikasinya dalam bentuk android. Menerapkan Kode Buka lib/src/features/home/view/home_screen.dart , yang berisi hal berikut: File ini mengimpor material.dart dan menerapkan widget stateful menggunakan dua class: Pernyataan import akan menyediakan Komponen Material. Class HomeScreen merepresentasikan seluruh halaman yang ditampilkan. Metode build() class _HomeScreenState akan me...
Baca selengkapnya

Tugas 12 - Pemrograman Perangkat Bergerak

-
Gambar
 Hesekiel Nainggolan 5025201054 PPB I FRAMEWORK FLUTTER 1 -  NAMER Halo, pada pertemuan kali ini, kita akan membahas mengenai framework flutter.  Flutter adalah toolkit UI Google untuk membangun aplikasi untuk perangkat seluler, web, dan desktop dari codebase tunggal. Untuk implementasi kali ini, kita akan membuat aplikasi Namer.  Aplikasi ini menghasilkan nama yang terkesan keren, seperti "newstay", "lightstream", "mainbrake", atau "graypine". Pengguna dapat meminta nama berikutnya, memfavoritkan nama saat ini, dan meninjau daftar nama yang difavoritkan di halaman terpisah. Aplikasi ini responsif terhadap berbagai ukuran layar: Sebelum kita melakukan pembuatan aplikasinya, pertama sekali kita harus menyiapkan beberapa tools yang diperlukan: Visual Studio Code Android Studio Visual Studio Instalasi SDK flutter yang digunakan Untuk detail dari instalasi nya dapat menonton melalui halaman link  Youtobe . Selanjutnya, kita akan mulai membuat aplikas...
Baca selengkapnya