Tugas 8 PPB

Implementasi List Interaktif dengan Expand & Modal di Jetpack Compose

Yusuf Hasan Nazila

5025211225

PPB D

Artikel ini membahas implementasi dua fitur interaktif pada aplikasi Android menggunakan Jetpack Compose. Fungsionalitas yang akan dibangun adalah fitur expand/collapse pada item list dan modal untuk menampilkan gambar. Studi kasus yang digunakan adalah aplikasi "Woof".

Bukti Hasil Implementasi

Berikut adalah tangkapan layar yang menunjukkan fungsionalitas yang berhasil diimplementasikan.

---

Langkah 1: Penambahan String Resource

Langkah pertama adalah menambahkan sumber daya string yang dibutuhkan. Modifikasi file app/src/main/res/values/strings.xml dengan menambahkan dua entri berikut.

<string name="about">About:</string>
<string name="expand_button_content_description">See more or less information about a dog.</string>

---

Langkah 2: Modifikasi Logika dan UI

Langkah kedua adalah memodifikasi logika dan antarmuka pengguna pada file MainActivity.kt. Penjelasan akan dibagi berdasarkan fungsionalitas kode.

2.1. Pengelolaan State untuk Modal Gambar (State Hoisting)

Pengelolaan state untuk modal memerlukan penerapan konsep State Hoisting. State ditempatkan pada Composable induk (WoofApp) agar dapat mengontrol komponen Dialog yang tampil di atas seluruh hierarki UI.

@Composable
fun WoofApp() {
    var selectedDogImage by remember { mutableStateOf<Int?>(null) }

    Scaffold(/*...*/) {
        // ...
    }

    if (selectedDogImage != null) {
        DogImageModal(
            dogImageRes = selectedDogImage!!,
            onDismiss = { selectedDogImage = null }
        )
    }
}

2.2. Pembuatan Composable untuk Modal

Composable ini berfungsi untuk merender Dialog yang berisi gambar.

@Composable
fun DogImageModal(
    @DrawableRes dogImageRes: Int,
    onDismiss: () -> Unit,
    modifier: Modifier = Modifier
) {
    Dialog(onDismissRequest = onDismiss) {
        Card(/*...*/) {
            Image(/*...*/)
        }
    }
}

2.3. Pembaruan Komponen Item (DogItem)

Komponen DogItem dimodifikasi untuk memiliki state lokal expanded dan untuk memicu lambda onIconClick. Modifier animateContentSize digunakan untuk transisi yang halus.

@Composable
fun DogItem(
    dog: Dog,
    modifier: Modifier = Modifier,
    onIconClick: (Int) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }

    Card(modifier = modifier) {
        Column(
            modifier = Modifier
                .animateContentSize(/*...*/)
                .clickable { expanded = !expanded }
        ) {
            Row(/*...*/) {
                DogIcon(dog.imageResourceId, onIconClick = { onIconClick(dog.imageResourceId) })
                DogInformation(dog.name, dog.age)
                Spacer(Modifier.weight(1f))
                DogItemButton(
                    expanded = expanded,
                    onClick = { expanded = !expanded }
                )
            }
            if (expanded) {
                DogHobby(dog.hobbies, /*...*/)
            }
        }
    }
}

2.4. Penambahan Event Handler pada Ikon

Terakhir, Composable DogIcon diubah untuk menerima event klik melalui parameter lambda dan modifier .clickable.

@Composable
fun DogIcon(
    @DrawableRes dogIcon: Int,
    modifier: Modifier = Modifier,
    onIconClick: () -> Unit
) {
    Image(
        modifier = modifier
            .size(/*...*/)
            .padding(/*...*/)
            .clip(MaterialTheme.shapes.small)
            .clickable(onClick = onIconClick), // Event handler
        /*...*/
    )
}

---

Kesimpulan

Implementasi ini mendemonstrasikan penggunaan State Management dan State Hoisting dalam Jetpack Compose untuk menciptakan antarmuka pengguna yang dinamis. Konsep ini merupakan dasar untuk membangun berbagai interaksi pengguna yang kompleks dan efisien dalam pengembangan aplikasi Android modern.

---

Demo Aplikasi

Berikut adalah demo dari fungsionalitas aplikasi yang telah diimplementasikan.

Kode Sumber

Kode sumber untuk implementasi ini tersedia pada repositori GitHub berikut.

Repositori: hnazila71/Tugas-8-PPB