Aplikasi Dice Roller 🎲

on

 Furstin Aprilavia Putri - 5025221234 - PPB D

Memodifikasi Aplikasi Sederhana dengan Menerapkan Button Component

1. Pendahuluan

Aplikasi Dice Roller adalah aplikasi sederhana berbasis Jetpack Compose yang memungkinkan pengguna untuk mengocok dadu secara acak dengan menekan tombol. Setiap kali tombol ditekan, gambar dadu akan berubah sesuai dengan angka yang muncul.

Artikel ini akan menjelaskan bagaimana aplikasi ini dibuat serta beberapa perubahan dan peningkatan yang dilakukan dari kode awal yang ada di Codelabs Android.

2. Kode

Kode lengkap dapat dilihat di GitHub : https://github.com/furstinvia/ppb-d-4-diceroller.git


1. MainActivity.kt untuk Mengatur Tampilan Utama
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceRollerTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color(0xFFFFD1DC) // Pink Pastel
                ) {
                    DiceRollerApp()
                }
            }
        }
    }
}

MainActivity merupakan titik masuk aplikasi.

setContent {} digunakan untuk menampilkan UI menggunakan Jetpack Compose.

DiceRollerTheme {} membungkus UI dengan tema yang sudah didefinisikan.

Surface {} digunakan untuk memberikan latar belakang berwarna Pink Pastel (#FFD1DC).


2. DiceRollerApp() untuk Memanggil Komponen Utama
@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(
        modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.Center)
    )
}

@Composable menandakan bahwa fungsi ini digunakan untuk membangun UI.

@Preview memungkinkan kita untuk melihat tampilan komponen di Android Studio.

DiceWithButtonAndImage() dipanggil sebagai tampilan utama aplikasi.

Modifier.fillMaxSize().wrapContentSize(Alignment.Center) memastikan tampilan berada di tengah layar.

3. DiceWithButtonAndImage() untuk Tampilan Dadu dan Tombol 
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(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) {
        // teks diatas dadu
        Text(
            text = "Dice Roller by Furstin Aprilavia 🎲",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Black
        )

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

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

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

        Button(
            onClick = { result = (1..6).random() },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFC2185B)), // Pink Tua
            shape = RoundedCornerShape(12.dp)
        ) {
            Text(
                text = "Click to roll the dice",
                fontSize = 22.sp,
                fontWeight = FontWeight.ExtraBold,
                color = Color.White
            )
        }
    }
}

var result by remember { mutableStateOf(1) } Menyimpan angka dadu saat ini.

remember { mutableStateOf(1) } memastikan nilai tetap tersimpan selama komponen masih aktif.

imageResource Menentukan gambar dadu berdasarkan nilai result.

Column {} Mengatur tata letak komponen secara vertikal dan memusatkan elemen-elemen.

Text() Menampilkan teks "Dice Roller by Furstin Aprilavia 🎲" sebagai judul aplikasi.

Spacer() Memberikan jarak antar elemen.

Image() Menampilkan gambar dadu yang sesuai dengan angka yang muncul.

Button() Saat ditekan, angka dadu akan diacak menggunakan (1..6).random().

Tampilan tombol diubah menjadi Pink Tua (#C2185B) dengan sudut membulat 12.dp.


3. Video Presentasi

atau klik disini


Comments

Post a Comment