Tugas 8 (Aplikasi Woof)

Aplikasi Woolf

Pada pertemuan kai ini, perkuliahan dilakukan secara online dan diberikan penugasan untuk membuat sebuah aplikasi woolf. Tugas ini merupakan tugas ke-8 yang diberikan selama perkuliahan berlangsung.

Readable Source Code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WoofTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize()
                ) {
                    WoofApp()
                }
            }
        }
    }
}

Sebagai entry point aplikasi Android:

onCreate() dipanggil saat aplikasi pertama kali dibuat
setContent { ... } mengatur UI menggunakan Compose
WoofTheme { Surface { WoofApp() } }: Menetapkan tema dan permukaan latar belakang, lalu memanggil UI utama WoofApp()

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

Membangun struktur utama UI aplikasi:

Menggunakan Scaffold → komponen dasar untuk menampilkan struktur UI standar (seperti AppBar dan konten utama)
topBar = { WoofTopAppBar() } → menampilkan AppBar di atas
Konten utama berupa LazyColumn → daftar scrollable yang menampilkan elemen DogItem() berdasarkan data dari dogs

@Composable
fun DogItem(
    dog: Dog,
    modifier: Modifier = Modifier
) {
    var expanded by remember { mutableStateOf(false) }
    Card(
        modifier = modifier
    ) {
        Column(
            modifier = Modifier
                .animateContentSize(
                    animationSpec = spring(
                        dampingRatio = Spring.DampingRatioNoBouncy,
                        stiffness = Spring.StiffnessMedium
                    )
                )
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(dimensionResource(R.dimen.padding_small))
            ) {
                DogIcon(dog.imageResourceId)
                DogInformation(dog.name, dog.age)
                Spacer(Modifier.weight(1f))
                DogItemButton(
                    expanded = expanded,
                    onClick = { expanded = !expanded },
                )
            }
            if (expanded) {
                DogHobby(
                    dog.hobbies, modifier = Modifier.padding(
                        start = dimensionResource(R.dimen.padding_medium),
                        top = dimensionResource(R.dimen.padding_small),
                        bottom = dimensionResource(R.dimen.padding_medium),
                        end = dimensionResource(R.dimen.padding_medium)
                    )
                )
            }
        }
    }
}

Menampilkan 1 kartu anjing yang terdiri dari:

Foto anjing (DogIcon)
Nama dan usia anjing (DogInformation)
Tombol expand/collapse (DogItemButton)
Jika diperluas (expanded = true) → tampilkan deskripsi hobi anjing (DogHobby)
Menggunakan animateContentSize → memberi animasi transisi tinggi saat konten berubah (expand/collapse)

private fun DogItemButton(
    expanded: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    IconButton(
        onClick = onClick,
        modifier = modifier
    ) {
        Icon(
            imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
            contentDescription = stringResource(R.string.expand_button_content_description),
            tint = MaterialTheme.colorScheme.secondary
        )
    }
}

Menampilkan tombol expand/collapse dengan ikon:

Icons.Filled.ExpandMore atau ExpandLess tergantung status expanded
Menggunakan IconButton() dari Material3
onClick memicu perubahan state expanded di DogItem

@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
    )
}

Menampilkan TopAppBar di bagian atas aplikasi:

Berisi ikon logo (ic_woof_logo) dan nama aplikasi (Woof)
Menggunakan CenterAlignedTopAppBar dari Material3
Tidak memberi contentDescription untuk gambar karena bersifat dekoratif

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
    )
}

Menampilkan gambar/foto anjing:

Menggunakan painterResource() untuk memuat drawable berdasarkan resource ID
Diberi ukuran, padding, dan bentuk clip sesuai shape dari tema (shapes.small)
Gambar dipotong dan disesuaikan ke kotak (ContentScale.Crop)

@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
        )
    }
}

Menampilkan informasi dasar anjing:

Nama (diambil dari resource string)
Umur dalam tahun, menggunakan stringResource(R.string.years_old, dogAge) → mendukung pluralisasi/bahasa
Menggunakan MaterialTheme.typography untuk styling teks

@Composable
fun DogHobby(
    @StringRes dogHobby: Int,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
    ) {
        Text(
            text = stringResource(R.string.about),
            style = MaterialTheme.typography.labelSmall
        )
        Text(
            text = stringResource(dogHobby),
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

Menampilkan deskripsi hobi anjing saat kartu diperluas:

Judul "About" (R.string.about)
Isi teks hobi (diambil dari string resource dogHobby)
Styling menggunakan labelSmall dan bodyLarge

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

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

Menampilkan pratinjau UI di Android Studio:

WoofPreview() untuk tema terang
WoofDarkThemePreview() untuk tema gelap
Memungkinkan developer melihat tampilan UI secara langsung tanpa menjalankan emulator