Tugas Pertemuan 7
Membuat Aplikasi Woof
Nama : Nadya Zuhria Amana
NRP : 5025211058
Kelas : PPB B
1. Pembuatan Fungsi Composable `WoofTopAppBar()`:
2. Penggunaan CenterAlignedTopAppBar:
- Untuk menempatkan isi panel atas secara terpusat di layar, gunakan komponen `CenterAlignedTopAppBar`. Ini memastikan bahwa konten yang ada dalam panel atas akan selalu berada di tengah-tengah layar.
3. Penambahan Judul dan Logo:
- Dalam panel atas, biasanya terdapat judul aplikasi dan logo. Dalam konteks ini, judul aplikasi adalah "Woof". Logo aplikasi menambahkan elemen visual yang mengidentifikasi aplikasi dengan cepat.
4. Penambahan Gambar Logo Aplikasi:
- Gunakan komponen `Image` untuk menambahkan logo aplikasi. Anda perlu memilih gambar logo dari sumber daya aplikasi (misalnya, drawable di Android) dan menetapkannya sebagai `painter` di `Image`. Modifier dapat digunakan untuk mengatur ukuran dan jarak antara logo dengan tepi panel atas.
5. Penambahan Teks Nama Aplikasi:
- Judul aplikasi ("Woof") dapat ditampilkan menggunakan komponen `Text`. Gaya tipografi yang digunakan disesuaikan agar sesuai dengan desain keseluruhan aplikasi. Dalam kasus ini, kita menggunakan gaya `displayLarge` dari tema Material.
Penjelasan Lebih Detail Potongan Kode:
Berikut adalah potongan kode yang lebih detail untuk fungsi `WoofTopAppBar()`:
@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {
CenterAlignedTopAppBar(
title = {
Row(
verticalAlignment = Alignment.CenterVertically
) {
// Menambahkan logo aplikasi
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
)
// Menambahkan teks judul aplikasi
Text(
text = stringResource(R.string.app_name),
style = MaterialTheme.typography.displayLarge
)
}
},
modifier = modifier
)
}
Dalam potongan kode ini:
- Kita menggunakan `CenterAlignedTopAppBar` untuk menempatkan konten panel atas secara terpusat di layar.
- Di dalamnya, kita memiliki sebuah `Row` yang menempatkan logo aplikasi (dengan menggunakan `Image`) dan judul aplikasi (dengan menggunakan `Text`) secara berdampingan.
- Modifier digunakan untuk mengatur ukuran dan jarak antara elemen-elemen dalam `Row`.
- Gambar logo diambil dari sumber daya aplikasi menggunakan `painterResource`, sedangkan judul aplikasi diambil dari string resources menggunakan `stringResource`.
- Gaya tipografi untuk judul aplikasi diatur ke `displayLarge` agar sesuai dengan desain keseluruhan aplikasi.
Dokumentasi :
Github :