PPB Pertemuan 5 - Aplikasi Dice Roller

Membuat Aplikasi Android "Dice Roller" dengan Jetpack Compose

Blog ini akan menjelaskan cara membuat aplikasi sederhana berupa Dice Roller, yaitu aplikasi untuk mensimulasikan lemparan dadu secara acak dan menampilkan hasilnya dalam bentuk gambar hanya dengan menekan tombol "roll".

---

1. Struktur Dasar Program

Program terdiri dari beberapa bagian utama:

• MainActivity
• Composable function
• State
• Preview

---

2. MainActivity

Activity utama menggunakan setContent untuk menampilkan UI Compose dan memanggil fungsi DiceRollerApp.

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { DiceRollerTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { DiceRollerApp() } } } } }

• setContent menampilkan UI Compose
• Surface sebagai container utama layar
• DiceRollerApp() menjalankan UI aplikasi

---

3. Composable Utama

Fungsi ini digunakan untuk menempatkan komponen di tengah layar.

@Preview(showBackground = true) @Composable fun DiceRollerApp() { DiceWithButtonAndImage( modifier = Modifier .fillMaxSize() .wrapContentSize(Alignment.Center) ) }

• fillMaxSize() membuat layout memenuhi layar
• wrapContentSize() memusatkan konten

---

4. Composable Dice (Logic & UI)

Fungsi ini adalah inti aplikasi yang mengatur state, gambar dadu, dan interaksi tombol.

@Composable fun DiceWithButtonAndImage(modifier: Modifier = Modifier) { var result by remember { mutableIntStateOf(1) } 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 } Column( modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally ) { Image( painter = painterResource(imageResource), contentDescription = result.toString() ) Spacer(modifier = Modifier.height(16.dp)) Button(onClick = { result = (1..6).random() }) { Text(text = stringResource(R.string.roll)) } } }

• remember menyimpan state
• mutableIntStateOf untuk state integer
• when menentukan gambar berdasarkan hasil
• Image menampilkan dadu
• Button untuk interaksi user
• random() menghasilkan angka 1–6

---

5. Cara Menjalankan Aplikasi

1. Buka Android Studio
2. Buat project baru dengan template Empty Activity (Compose)
3. Masukkan kode ke file MainActivity.kt
4. Tambahkan gambar dadu di folder drawable
5. Jalankan emulator atau device
6. Klik tombol Run

---

Hasil Tampilan Aplikasi