Aplikasi Dice Roller

Aplikasi Dice Roller Menggunakan Jetpack Compose

Aplikasi ini merupakan simulasi lempar dadu yang dibuat menggunakan Jetpack Compose di Android Studio. Setiap kali tombol "Acak" ditekan, gambar dadu akan berubah secara acak menampilkan angka 1 hingga 6, bersamaan dengan teks yang menunjukkan angka yang didapatkan.

Hasil Tampilan Aplikasi

Contoh tampilan aplikasi: pengguna mendapat angka 1

Penjelasan Kode

1. MainActivity.kt

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

Penjelasan: Bagian ini adalah titik awal aplikasi. Fungsi setContent digunakan untuk menampilkan UI berbasis Compose dengan tema dari DiceRollerTheme. Kemudian fungsi DiceRollerApp() dipanggil untuk menampilkan komponen utama.

2. DiceRollerApp()

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

Penjelasan: Fungsi ini memanggil komponen utama DiceWithButtonAndImage yang menampilkan gambar dadu, teks hasil, dan tombol.

3. DiceWithButtonAndImage()

@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) {
        Crossfade(targetState = imageResource) { diceImage ->
            Image(
                painter = painterResource(diceImage),
                contentDescription = result.toString()
            )
        }

        Text(
            text = "Kamu mendapat angka $result",
            fontSize = 24.sp
        )

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

        Button(
            onClick = { result = (1..6).random() },
        ) {
            Text(text = stringResource(R.string.roll), fontSize = 24.sp)
        }
    }
}

Penjelasan Detail:

• var result by remember { mutableIntStateOf(1) }: Variabel result menyimpan angka dadu terakhir, dimulai dari 1.
• imageResource = when(result): Menentukan gambar dadu yang akan ditampilkan berdasarkan angka yang didapat.
• Crossfade: Memberikan efek transisi halus saat gambar dadu berubah.
• Text("Kamu mendapat angka..."): Menampilkan teks hasil angka.
• Button(onClick = { result = (1..6).random() }): Saat tombol diklik, angka acak baru (1–6) akan digenerate.

Kesimpulan

Aplikasi ini sangat cocok sebagai latihan awal dalam memahami dasar Jetpack Compose, seperti penggunaan @Composable, State, pengaturan layout dengan Column, dan interaksi pengguna melalui tombol.

Jika ingin menambahkan fitur lain, kamu bisa memasukkan suara dadu atau animasi dadu berputar sebelum berhenti.

Github : https://github.com/Arkandrvesh/PPB

VIDEO