Tugas 8

Nama: Muhamad Faiz Fernanda

Kelas: PPB-A

NRP: 5025211186

Implementasi List Interaktif dengan Expand & Modal di Jetpack Compose

Artikel ini membahas bagaimana menerapkan dua fitur interaktif dalam aplikasi Android menggunakan Jetpack Compose. Fitur yang diimplementasikan meliputi:

• Fungsi expand/collapse pada item list.
• Menampilkan gambar dalam modal dialog.

Studi kasus yang digunakan adalah aplikasi Woof.

Hasil Implementasi

Langkah 1: Menambahkan String Resource

Tambahkan string berikut ke file app/src/main/res/values/strings.xml:

<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 Tampilan

1. Pengelolaan State Modal Gambar (State Hoisting)

   Kode ini diletakkan di WoofApp:

   @Composable
   fun WoofApp() {
       var selectedDogImage by remember { mutableStateOf<Int?>(null) }
   
       Scaffold(/*...*/) {
           // ...
       }
   
       if (selectedDogImage != null) {
           DogImageModal(
               dogImageRes = selectedDogImage!!,
               onDismiss = { selectedDogImage = null }
           )
       }
   }
       

2. Pembuatan Composable Modal

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

3. Modifikasi Komponen DogItem

   @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, /*...*/)
               }
           }
       }
   }
       

4. Menambahkan Event Klik pada Ikon

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

Kesimpulan

Penerapan ini menunjukkan bagaimana penggunaan state management dan state hoisting dalam Jetpack Compose dapat digunakan untuk membangun UI yang lebih responsif dan interaktif. Teknik ini menjadi dasar penting dalam menciptakan pengalaman pengguna yang modern di Android.

Vidio Demo :

Source Code :https://github.com/faizfernanda/Tugas-8-PPB-Woof