Tugas-6 PPB

 Nama : Layyinatul Fuadah

NRP    : 5025211207

Kelas  : Pemrograman Perangkat Bergerak (B)


Membuat Aplikasi Woof


Aplikasi Woof adalah sebuah platform yang menyediakan katalog lengkap mengenai berbagai jenis anjing, lengkap dengan informasi terperinci mengenai setiap jenisnya. Dengan fokus pada Desain Material, platform ini dirancang untuk memberikan pengalaman pengguna yang menarik. Setiap entri dalam katalog dapat diperluas untuk mengungkapkan kegemaran unik masing-masing anjing. Pengguna akan disuguhkan dengan animasi dinamis dan perubahan warna pada setiap kartu, menciptakan pengalaman visual yang memikat saat mereka menjelajahi setiap entri untuk mempelajari lebih lanjut mengenai kegemaran para anjing tersebut.

Mempelajari kode awal

  1. Buka kode awal di Android Studio.
  2. Buka com.example.woof > data > Dog.kt. File ini berisi Dog data class yang akan digunakan untuk mewakili foto, nama, usia, dan hobi anjing. File ini juga berisi daftar anjing dan informasi yang akan Anda gunakan sebagai data di aplikasi Anda.
  3. Buka res > drawable. File ini berisi semua aset gambar yang Anda butuhkan untuk project ini, termasuk ikon aplikasi, gambar anjing, dan ikon.
  4. Buka res > values > strings.xml. File ini berisi string yang Anda gunakan dalam aplikasi ini, termasuk nama aplikasi, nama anjing, deskripsinya, dan lainnya.
  5. Buka MainActivity.kt. File ini berisi kode untuk membuat daftar sederhana yang menampilkan foto anjing, nama anjing, dan usia anjing tersebut.
  6. WoofApp() berisi LazyColumn yang menampilkan DogItem.
  7. DogItem() berisi Row yang menampilkan foto anjing dan informasi tentangnya.
  8. DogIcon() menampilkan foto anjing.
  9. DogInformation() menampilkan nama dan usia anjing.
  10. WoofPreview() memungkinkan Anda melihat pratinjau aplikasi di panel Design.

Memastikan emulator/perangkat bertema terang

Untuk melihat aplikasi dalam tema terang, di emulator atau perangkat fisik:

  1. Buka aplikasi Setelan di perangkat.
  2. Telusuri Tema gelap dan klik di dalamnya.
  3. Jika Tema gelap aktif, nonaktifkan.
Jalankan kode awal untuk melihat titik awal, yaitu daftar yang menampilkan anjing beserta foto, nama, dan usianya.




Menambahkan warna

Pertama-tama, dalam mengubah aplikasi Woof, fokus utama adalah pada skema warna. Skema warna adalah kombinasi warna yang diterapkan dalam aplikasi. Dalam konteks Android, warna direpresentasikan dalam format heksadesimal (hex), yang dimulai dengan tanda pagar (#) dan terdiri dari enam karakter, mewakili komponen RGB (merah, hijau, biru). Dua karakter pertama mewakili warna merah, dua karakter berikutnya hijau, dan dua karakter terakhir biru. Dengan memodifikasi skema warna, kita dapat menciptakan pengalaman pengguna yang lebih menyenangkan dan sesuai dengan tujuan aplikasi.

Sebelumnya, dalam website Material Theme Builder, ganti warna primary dari Core Colors  dengan warna dengan kode #006C4C. Di halaman website tersebut, ada opsi untuk mengklik tombol Export guna mendownload file Color.kt dan file Theme.kt dengan tema kustom yang telah dibuat di Theme Builder.
  1. Buka file Color.kt dan ganti konten dengan kode berikut.
  2. Buka file Theme.kt dan ganti konten dengan kode berikut.

Pemetaan warna

Di bagian ini, kita akan menggabungkan Row yang berisi DogIcon() dan DogInformation() dengan Card untuk membedakan warna item daftar dengan latar belakang.
  1. Dalam fungsi composable DogItem(), gabungkan Row() dengan Card().
  2. Karena Card kini merupakan composable turunan pertama di DogItem(), teruskan pengubah dari DogItem() ke Card, dan update pengubah Row ke instance baru Modifier.
  3. Lihat WoofPreview(). Item daftar sekarang telah otomatis berubah warna karena Composable Card. Warnanya terlihat bagus, tetapi tidak ada spasi di antara item daftar.


File dimensi

Buka app > res > values > dimens.xml dan lihat file. Fungsi ini menyimpan nilai dimensi untuk padding_small, padding_medium, dan image_size.

Di WoofApp(), tambahkan modifier dengan padding_small dalam panggilan ke DogItem().

@Composable
fun WoofApp() {
    Scaffold { it ->
        LazyColumn(contentPadding = it) {
            items(dogs) {
                DogItem(
                    dog = it,
                    modifier = Modifier.padding(dimensionResource(R.dimen.padding_small))
                )
            }
        }
    }
}

Tampilan sekarang

Melihat tema gelap dalam pratinjau

1.Di bagian WoofPreview(), buat fungsi baru bernama WoofDarkThemePreview() dan anotasikan dengan @Preview dan @Composable.

2.Di dalam DarkThemePreview(), tambahkan WoofTheme(). Tanpa menambahkan WoofTheme(), Anda tidak akan melihat gaya apa pun yang telah ditambahkan dalam aplikasi. Tetapkan parameter darkTheme ke true.

3.Panggil WoofApp() di dalam WoofTheme().


4.Sekarang, scroll ke bawah di panel Design untuk melihat aplikasi dalam tema gelap.

Warna Dinamis

Dengan menerapkan tema kustom, aplikasi tetap memiliki identitas warna yang kuat, sesuai dengan brandingnya, bahkan pada perangkat yang tidak mendukung penyesuaian tema secara otomatis.

  1. Untuk mengaktifkan warna dinamis, buka Theme.kt dan buka composable WoofTheme(), lalu setel parameter dynamicColor ke benar.
  2. Untuk mengubah latar belakang perangkat atau emulator, buka Setelan, lalu cari Wallpaper.
  3. Ubah wallpaper ke warna atau sekumpulan warna.
  4. Jalankan ulang aplikasi untuk melihat tema dinamis.


Menambahkan bentuk

Membentuk gambar anjing menjadi lingkaran

  1. Buka file Shape.kt dan perhatikan bahwa parameter kecil ditetapkan ke RoundedCornerShape(50.dp). Ini akan digunakan untuk membentuk gambar menjadi lingkaran.
  2. Buka MainActivity.kt. Di DogIcon(), tambahkan atribut clip ke modifier dari Image; tindakan ini akan memotong gambar menjadi sebuah bentuk. Teruskan MaterialTheme.shapes.small.
  3. Untuk membuat semua foto menjadi lingkaran, tambahkan atribut ContentScale dan Crop; tindakan ini akan memangkas gambar agar sesuai. Perlu diketahui bahwa contentScale adalah atribut dari Image, dan bukan bagian dari modifier.

Menambahkan bentuk ke item daftar

Buka file Shape.kt. Card adalah komponen media, sehingga dapat menambahkan parameter media objek Shapes. Untuk aplikasi ini, pojok kanan atas dan kiri bawah item daftar, tetapi tidak membentuk lingkaran penuh. Untuk mencapainya, teruskan 16.dp ke atribut medium.

medium = RoundedCornerShape(bottomStart = 16.dp, topEnd = 16.dp)


Menambahkan tipografi

Membuat Direktori Resource Android font.
  1. Di tampilan project Android Studio, klik kanan folder res.
  2. Pilih New > Android Resource Directory.
  3. Beri nama Direktori font, setel jenis Resource sebagai font, dan klik OK.
  4. Buka direktori resource font baru yang terletak di res > font.
Mendownload font kustom
  1. Buka https://fonts.google.com/.
  2. Telusuri Montserrat, lalu klik Download family.
  3. Buka file zip.
  4. Buka folder Montserrat yang didownload. Di folder static, temukan Montserrat-Bold.ttf dan Montserrat-Regular.ttf (ttf adalah singkatan dari TrueType Font dan merupakan format untuk file font). Pilih kedua font dan tarik ke direktori resource font dalam project Anda di Android Studio.
  5. Di folder font, ganti nama Montserrat-Bold.ttf menjadi montserrat_bold.ttf dan ganti nama Montserrat-Regular.ttf menjadi montserrat_regular.ttf.
  6. Telusuri Abril Fatface dan klik Download family.
  7. Buka folder Abril_Fatface yang telah didownload. Pilih AbrilFatface-Regular.ttf, lalu tarik ke direktori resource font.
  8. Di folder font, ganti nama Abril_Fatface_Regular.ttf menjadi abril_fatface_regular.ttf.
Melakukan inisialisasi font

1.Di folder font, ganti nama Montserrat-Bold.ttf menjadi montserrat_bold.ttf dan ganti nama Montserrat-Regular.ttf menjadi montserrat_regular.ttf. 
2.Di bawah Abril Fatface, atur inisialisasi untuk Montserrat dengan menggunakan FontFamily, meneruskan Font dengan file montserrat_regular. Untuk montserrat_bold, tambahkan FontWeight.Bold.
3.Untuk atribut displayLarge, tetapkan sama dengan TextStyle, lalu isi fontFamily, fontWeight, dan fontSize dengan informasi dari tabel di atas. 

 

import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp

val Typography = Typography(
   displayLarge = TextStyle(
       fontFamily = AbrilFatface,
       fontWeight = FontWeight.Normal,
       fontSize = 36.sp
   ),
   displayMedium = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp
   ),
   labelSmall = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Bold,
       fontSize = 14.sp
   ),
   bodyLarge = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Normal,
       fontSize = 14.sp
   )

) 


Menambahkan tipografi ke teks aplikasi

  1. Tambahkan 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.
  2. Sekarang di WoofPreview(), nama anjing akan menampilkan font Montserrat tebal dalam 20.sp, dan usia anjing menampilkan font Montserrat normal dalam 14.sp.

Menambahkan panel atas


Menambahkan gambar dan teks ke panel atas

1.Di MainActivity.kt, buat composable bernama WoofTopAppBar() dengan modifier opsional.
2.Scaffold mendukung parameter contentWindowInsets yang dapat membantu menentukan inset untuk konten scaffold. Nilai contentWindowInsets diteruskan ke LazyColumn sebagai contentPadding.
3.Dalam Scaffold, tambahkan atribut topBar dan tetapkan ke WoofTopAppBar().
4.Dalam WoofTopAppBar() Composable, tambahkan CenterAlignedTopAppBar() dan tetapkan parameter pengubah ke pengubah yang diteruskan ke WoofTopAppBar().
5.Untuk parameter judul, teruskan Row yang akan menyimpan Image dan Text dari CenterAlignedTopAppBar.
6.Tambahkan logo Image ke Row.
  • Setel ukuran gambar di modifier sebagai image_size dalam file dimens.xml dan padding sebagai padding_small dari file dimens.xml.
  • Gunakan painter untuk menetapkan Image sebagai ic_woof_logo dari folder drawable.
  • Tetapkan contentDescription sebagai null. Dalam situasi ini, logo aplikasi tidak menambahkan informasi semantik apa pun bagi pengguna dengan gangguan penglihatan, sehingga kita tidak perlu menambahkan deskripsi konten.
7. Selanjutnya, tambahkan Composable Text di dalam Row setelah Image.
  • Gunakan stringResource() untuk menetapkannya ke nilai app_name. Tindakan ini akan menetapkan teks ke nama aplikasi, yang disimpan di strings.xml.
  • Setel gaya teks ke displayLarge karena nama aplikasi singkat dan penting.
8.Untuk memperbaikinya, tambahkan parameter nilai verticalAlignment ke Row dan tetapkan sama dengan Alignment.CenterVertically.

 Ini adalah Composable WoofTopAppBar() lengkap:

@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {
   CenterAlignedTopAppBar(
       title = {
           Row(
               verticalAlignment = Alignment.CenterVertically
           ) {
               Image(
                   modifier = Modifier
                       .size(dimensionResource(id = R.dimen.image_size))
                       .padding(dimensionResource(id = R.dimen.padding_small)),
                   painter = painterResource(R.drawable.ic_woof_logo),

                   contentDescription = null
               )
               Text(
                   text = stringResource(R.string.app_name),
                   style = MaterialTheme.typography.displayLarge
               )
           }
       },
       modifier = modifier
   )
}

Hasil




Github : https://github.com/ayyfuadh/PPB-B/tree/main/WoofApp



Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas-8 PPB

Gambar
Nama : Layyinatul Fuadah NRP    : 5025211207 Kelas  : Pemrograman Perangkat Bergerak (B) Game Unscramble Aplikasi Unscramble adalah permainan kata satu pemain di mana pemain harus menyusun kembali huruf-huruf yang diacak untuk menebak kata aslinya. Aplikasi akan menampilkan kata yang sudah diacak, dan pemain harus menggunakan semua huruf yang ditampilkan untuk menebak kata tersebut. Pemain akan mendapatkan poin jika tebakannya benar, namun jika salah, pemain dapat mencoba menebak kembali beberapa kali. Aplikasi juga menyediakan opsi untuk melewati kata saat ini jika pemain tidak dapat menemukannya. Di sudut kanan atas, aplikasi akan menampilkan jumlah total kata acak yang dimainkan dalam satu permainan, yang berjumlah 10 kata.  Implementasi 1. Membuat WordsData.kt File ini berisi daftar kata yang digunakan dalam game, konstanta untuk jumlah maksimum kata per game, dan jumlah poin skor pemain untuk setiap kata yang benar. 2. Membuat MainActivity.kt File ini sebagian b...
Baca selengkapnya