Tugas 9 PPB G 2025 - Farhan Dwi Putra 5025211093

Nama    : Farhan Dwi Putra

NRP      : 5025211093

Kelas    : Pemrograman Perangkat Bergerak (G)

Tugas Perempuan 9

Deskripsi Tugas

Pada tugas kali ini, saya mempelajari dan mengimplementasikan dua fitur interaktif dalam sebuah aplikasi Android yang dibangun dengan Jetpack Compose, yaitu:

• Fitur expand/collapse pada setiap item list.

• Fitur modal dialog untuk menampilkan gambar.

Sebagai studi kasus, saya menggunakan struktur aplikasi dari contoh bernama "Woof", yang menampilkan daftar anjing dengan informasi umur dan hobinya. Tujuan dari tugas ini adalah memahami cara mengelola state, menerapkan animasi transisi, dan membuat tampilan modal secara dinamis.

---

Langkah-Langkah Implementasi

1. Menambahkan String Resource

Langkah pertama yaitu menambahkan teks tambahan di file strings.xml, contohnya:

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

Tujuannya adalah agar informasi dapat disesuaikan sesuai ekspansi item.

---

2. Modifikasi File MainActivity.kt

2.1 Pengelolaan State Modal (State Hoisting)

Saya menggunakan konsep State Hoisting untuk mengatur gambar anjing mana yang sedang ditampilkan di modal.

var selectedDogImage by remember { mutableStateOf(null) }

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

State ini diletakkan di WoofApp() agar bisa diakses dari seluruh UI.

---

2.2 Membuat Modal Dialog

Modal digunakan untuk menampilkan gambar anjing dalam ukuran lebih besar ketika diklik.

@Composable
fun DogImageModal(
    @DrawableRes dogImageRes: Int,
    onDismiss: () -> Unit
) {
    Dialog(onDismissRequest = onDismiss) {
        Card { Image(painterResource(id = dogImageRes), contentDescription = null) }
    }
}

---

2.3 Menambahkan Fitur Expand pada Setiap Item

Setiap item anjing dalam daftar dapat diperluas (expand) untuk menampilkan hobi mereka.

var expanded by remember { mutableStateOf(false) }

Column(
    modifier = Modifier
        .clickable { expanded = !expanded }
        .animateContentSize()
) {
    Row { ... }
    if (expanded) {
        DogHobby(...)
    }
}

Transisi antar kondisi diperhalus menggunakan animateContentSize().

---

2.4 Menambahkan Event Klik Gambar

Gambar anjing di dalam list juga bisa diklik untuk menampilkan modal. Caranya dengan menambahkan onClick di DogIcon():

Image(
    modifier = Modifier
        .clip(...)
        .clickable { onIconClick() }
)

---

Hasil yang Didapatkan

Dengan implementasi ini, saya berhasil membangun:

• List yang bisa diklik untuk memperluas konten (expand/collapse).

• Gambar yang bisa diklik untuk menampilkan modal secara fullscreen.

• Transisi animasi yang halus, serta pengelolaan state yang efisien.

---

Hasil

Source Code : Github