Tugas Week 4 - PPB G - 5025221040

 

Tugas 4: Membuat Komponen Button

Nama    : Genta Putra Prayoga

NRP      : 5025221040

Kelas     : G

Link Github: raymrichigat/ppb-g-tugas4

Memahami Jetpack Compose Melalui Aplikasi Dice Roller

Jetpack Compose telah menjadi cara modern untuk membangun UI di Android. Sebagai toolkit UI deklaratif, Compose memungkinkan pengembang untuk membuat antarmuka yang indah dengan kode yang lebih sederhana dan intuitif. Pada artikel ini, kita akan mengupas tuntas konsep dasar Jetpack Compose melalui contoh aplikasi Dice Roller sederhana.

Apa itu Jetpack Compose?

Jetpack Compose adalah toolkit UI modern untuk Android yang dikembangkan oleh Google. Berbeda dengan pendekatan imperatif tradisional yang menggunakan XML dan manipulasi View, Compose menggunakan pendekatan deklaratif di mana UI dibangun melalui fungsi-fungsi yang dapat dikomposisi (composable functions).

Mari kita lihat contoh aplikasi Dice Roller untuk memahami konsep-konsep utama dalam Jetpack Compose.

Setup Awal di MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DiceRollerTheme {
                DiceRollerApp()
            }
        }
    }
}

Dalam kode di atas, kita melihat beberapa hal penting:

• setContent adalah fungsi dari Compose yang menentukan konten UI untuk aktivitas
• DiceRollerTheme adalah tema aplikasi yang membungkus seluruh UI
• DiceRollerApp adalah fungsi composable utama yang menampilkan aplikasi

Annotation @Composable

@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage()
}

@Composable adalah annotation yang menandai fungsi sebagai fungsi composable. Ini berarti:

• Fungsi tersebut dapat dipanggil dalam konteks komposisi Compose
• Fungsi dapat menghasilkan dan mengelola elemen UI
• Fungsi tidak mengembalikan nilai (umumnya bertipe Unit)

Semua fungsi yang menghasilkan UI di Compose harus ditandai dengan annotation ini. Tanpa annotation ini, fungsi tidak akan dianggap sebagai bagian dari hierarki UI Compose.

Annotation @Preview

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage()
}

@Preview adalah annotation yang memungkinkan kita melihat pratinjau UI di Android Studio tanpa harus menjalankan aplikasi di emulator atau perangkat. Ini sangat berguna untuk pengembangan UI yang cepat dan iteratif.

Fungsi dengan annotation @Preview:

• Harus juga ditandai dengan @Composable
• Tidak boleh memiliki parameter (atau semua parameter harus memiliki nilai default)
• Tidak akan menjadi bagian dari aplikasi yang berjalan

Parameter Modifier

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    // ...
}

Modifier adalah sebuah parameter penting dalam fungsi composable yang mengontrol tampilan, perilaku, dan tata letak elemen UI. Modifier memungkinkan:

• Pengaturan ukuran, padding, margin
• Penambahan event listener seperti click
• Penerapan efek visual seperti opacity, clip, dll

Menggunakan parameter default Modifier = Modifier adalah praktik terbaik untuk memungkinkan pemanggil fungsi menyesuaikan elemen UI dengan kebutuhan mereka.

State Management dengan remember dan mutableStateOf

var result by remember { mutableStateOf(1) }

Baris kode ini menunjukkan cara Compose mengelola state:

• mutableStateOf(1) membuat state dengan nilai awal 1
• remember memastikan state diingat selama komposisi ulang
• Operator by dari Kotlin property delegation memungkinkan kita mengakses nilai langsung tanpa .value

Ketika state berubah, Compose secara otomatis melakukan rekomposisi pada bagian UI yang terpengaruh.

Komponen Text

Text(stringResource(R.string.roll))

Text adalah komponen dasar untuk menampilkan teks di Compose. Perhatikan bahwa:

• Text menggunakan resource string dari file strings.xml melalui stringResource
• Tidak perlu menentukan atribut seperti text size atau color karena secara default menggunakan style dari tema

Komponen Image

Image(
    painter = painterResource(imageResource),
    contentDescription = result.toString()
)

Image adalah komponen untuk menampilkan gambar di Compose dengan:

• painter yang mendefinisikan sumber gambar, di sini menggunakan resource drawable
• contentDescription untuk aksesibilitas, umumnya penting untuk pengguna dengan gangguan penglihatan

Komponen Layout (Column)

Column(
    modifier = modifier,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    // Child components
}

Column adalah komponen layout yang menyusun elemen-elemen secara vertikal. Pada contoh ini:

• Semua elemen di dalamnya diatur di tengah secara horizontal
• Modifier diteruskan dari parameter fungsi
• Di dalamnya terdapat Image, Spacer, dan Button

Spacer

Spacer(modifier = Modifier.height(16.dp))

Spacer adalah komponen untuk menambahkan ruang kosong:

• Dalam contoh ini, memberikan jarak 16dp antara gambar dan tombol
• Modifier.height menentukan ukuran vertikal dari spacer

Button dan Event Handling

Button1(onClick = { result = (1..6).random() }) {
    Text(stringResource(R.string.roll))
}

Button1 (yang tampaknya adalah alias dari Button standar) menunjukkan cara menangani event di Compose:

• onClick menerima lambda yang dijalankan ketika tombol diklik
• Lambda tersebut mengubah state result dengan nilai acak 1-6
• Perubahan state memicu rekomposisi UI dengan gambar dadu yang baru

Reactive UI dengan when

val imageResource = when (result) {
    1 -> R.drawable.dice_1
    2 -> R.drawable.dice_2
    3 -> R.drawable.dice_3
    4 -> R.drawable.dice_4
    5 -> R.drawable.dice_5
    else -> R.drawable.dice_6
}

Pendekatan deklaratif Compose terlihat jelas dalam penggunaan when untuk menentukan gambar mana yang ditampilkan:

• Berdasarkan nilai result, gambar dadu yang sesuai dipilih
• Ketika result berubah, blok ini akan dievaluasi ulang
• UI secara otomatis mencerminkan state terbaru

Kesimpulan

Jetpack Compose menawarkan pendekatan yang lebih modern dan produktif untuk pengembangan UI Android. Melalui contoh aplikasi Dice Roller, kita telah melihat konsep-konsep penting seperti:

1. Fungsi Composable dengan annotation @Composable
2. Preview UI dengan annotation @Preview
3. Pengelolaan state dengan remember dan mutableStateOf
4. Komponen dasar seperti Text, Image, dan Button
5. Layout dengan Column dan Spacer
6. Penggunaan Modifier untuk mengontrol tata letak dan perilaku
7. Reactive UI yang otomatis memperbarui saat state berubah

Dengan pendekatan deklaratif ini, kode menjadi lebih ringkas, mudah dipahami, dan lebih mudah dikelola, terutama untuk UI yang kompleks. Pola "state flows down, events flow up" membuat aliran data dan interaksi pengguna menjadi lebih jelas dan dapat diprediksi.

Jika Anda baru memulai dengan Android, Jetpack Compose adalah pilihan yang sangat baik untuk dipelajari karena ini adalah arah masa depan pengembangan UI Android.