Tugas 4: Membuat Aplikasi Dice Roller

March 19, 2025

Nama: Ken Anargya Alkausar

NRP: 5025211168

Kelas: PPB - A

Tugas 4: Membuat Aplikasi Dice Roller

Di artikel ini, saya akan menjelaskan bagaimana membuat aplikasi Dice Roller menggunakan Kotlin dan Jetpack Compose berdasarkan tutorial dari Codelab Android. Aplikasi ini akan memungkinkan pengguna untuk menekan tombol untuk melempar dadu secara acak, dan hasilnya akan ditampilkan dalam bentuk gambar dadu yang berbeda berdasarkan nilai angka yang keluar. Kita juga akan menambahkan animasi agar pengalaman pengguna menjadi lebih menarik.

MainActivity

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

Fungsi ini adalah titik awal aplikasi. Di sini, kita memanggil setContent untuk menampilkan antarmuka pengguna (UI) menggunakan DiceRollerTheme. Surface digunakan untuk mengatur latar belakang aplikasi dan memanggil fungsi DiceRollerApp, yang akan menampilkan konten utama aplikasi.

DiceRollerApp()

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

Fungsi ini adalah fungsi @Composable yang bertanggung jawab untuk menampilkan elemen UI utama aplikasi. Di dalamnya, kita memanggil fungsi DiceWithButtonAndImage, yang menangani tampilan gambar dadu dan tombol untuk menggulirkan dadu. Fungsi ini juga menggunakan modifier untuk memastikan elemen UI ditempatkan di tengah layar.

DiceWithButtonAndImage()

fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(1) }
    var rotationAngle by remember { mutableStateOf(0f) }

    // Ukuran gambar dadu
    val imageSize by remember { mutableStateOf(300.dp) }

    var sizeMultiplier by remember { mutableStateOf(1f) }
    val animatedSize by animateDpAsState(
        targetValue = imageSize * sizeMultiplier,
        animationSpec = tween(durationMillis = 500) // Durasi lebih halus
    )

    // Animasi untuk rotasi dadu
    val animatedRotation by animateFloatAsState(
        targetValue = rotationAngle,
        animationSpec = tween(durationMillis = 500) // Durasi rotasi
    )

    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) {
        // Gambar dice dengan animasi  rotasi
        Image(
            painter = painterResource(imageResource),
            contentDescription = result.toString(),
            modifier = Modifier
                .size(animatedSize)
                .graphicsLayer(rotationZ = animatedRotation) // Menambahkan rotasi
        )

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

        Button(
            onClick = {
                result = (1..6).random()


                sizeMultiplier = 1.5f


                sizeMultiplier = 1f

                // Rotasi acak pada dadu
                rotationAngle += 720f // Mengubah sudut rotasi
            },
        ) {
            Text(text = stringResource(R.string.roll), fontSize = 26.sp)
        }
    }
}

Fungsi ini adalah komponen utama dalam aplikasi yang berfungsi untuk menampilkan tombol dan gambar dadu. Di dalamnya, kita mendeklarasikan beberapa state, seperti result untuk menyimpan hasil dadu, dan rotationAngle untuk mengelola rotasi gambar dadu. Fungsi ini juga mengatur animasi untuk gambar dadu, seperti perubahan ukuran dan rotasi, menggunakan animateDpAsState dan animateFloatAsState untuk memberikan efek halus. Ketika tombol ditekan, gambar dadu akan berubah sesuai dengan hasil acak yang dihasilkan, sambil menampilkan animasi rotasi.

Dokumentasi: