Tugas 9 PPB G - Membuat Aplikasi Woof Menggunakan Jetpack Compose

 Tugas Pertemuan 9 PPB G 2025

oleh : Arfi Raushani Fikra (5025211084)

Pada pertemuan ke-9 ini, kami diminta membuat aplikasi android sederhana yang menerapkan material design. Aplikasi ini bernama Woof. Aplikasi Woof adalah daftar foto anjing dengan informasi terkait seperti nama, usia, dan aktivitas favorit. Aplikasi ini juga menggunakan Material Design untuk menciptakan pengalaman aplikasi yang indah bagi pengguna.

Source code dapat dilihat disini

Berikut penjelasan kodenya

1. Dog.kt

data class Dog(
    @DrawableRes val imageResourceId: Int,
    @StringRes val name: Int,
    val age: Int,
    @StringRes val hobbies: Int
)

data class Dog: merepresentasikan setiap data anjing dengan atribut:

• imageResourceId: ID gambar anjing.

• name: ID string nama anjing.

• age: usia anjing (dalam tahun).

• hobbies: ID string deskripsi hobi anjing.

• val dogs: list statis berisi beberapa data anjing.

2. MainActivity.kt

Merupakan entry point dari aplikasi dan berisi semua komponen UI utama menggunakan Jetpack Compose.

Fungsi Utama:

a. WoofApp()

• Menampilkan TopAppBar dan daftar anjing menggunakan LazyColumn.

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

b. WoofTopAppBar()

• Bar atas dengan logo dan nama aplikasi.

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

                    // Content Description is not needed here - image is decorative, and setting a
                    // null content description allows accessibility services to skip this element
                    // during navigation.

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

c. DogItem()

• Mewakili satu kartu anjing dalam daftar, berisi gambar dan informasi.
  

@Composable
fun DogItem(
    dog: Dog,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(dimensionResource(R.dimen.padding_small))
        ) {
            DogIcon(dog.imageResourceId)
            DogInformation(dog.name, dog.age)
        }
    }
}




d. DogIcon()

• Menampilkan gambar anjing dalam bentuk bulat.

@Composable
fun DogIcon(
    @DrawableRes dogIcon: Int,
    modifier: Modifier = Modifier
) {
    Image(
        modifier = modifier
            .size(dimensionResource(R.dimen.image_size))
            .padding(dimensionResource(R.dimen.padding_small))
            .clip(MaterialTheme.shapes.small),
        contentScale = ContentScale.Crop,
        painter = painterResource(dogIcon),

        // Content Description is not needed here - image is decorative, and setting a null content
        // description allows accessibility services to skip this element during navigation.

        contentDescription = null
    )
}




e. DogInformation()

• Menampilkan nama dan umur anjing.

@Composable
fun DogInformation(
    @StringRes dogName: Int,
    dogAge: Int,
    modifier: Modifier = Modifier
) {
    Column(modifier = modifier) {
        Text(
            text = stringResource(dogName),
            style = MaterialTheme.typography.displayMedium,
            modifier = Modifier.padding(top = dimensionResource(R.dimen.padding_small))
        )
        Text(
            text = stringResource(R.string.years_old, dogAge),
            style = MaterialTheme.typography.bodyLarge
        )
    }
}




f. functions @Preview

• Menyediakan preview untuk mode terang dan gelap.

@Preview
@Composable
fun WoofPreview() {
    WoofTheme(darkTheme = false) {
        WoofApp()
    }
}


@Preview
@Composable
fun WoofDarkThemePreview() {
    WoofTheme(darkTheme = true) {
        WoofApp()
    }
}

3. Folder ui.theme

Folder ini berisi semua pengaturan terkait tema:

• Color.kt: warna-warna yang digunakan.

• Shape.kt: bentuk sudut UI (misal rounded corner).

• Type.kt: gaya teks (ukuran, berat font, dsb).

• Theme.kt: menyatukan semua elemen tema di atas.

Berikut hasil dari aplikasinya

~ Terima Kasih ~