Tugas 4 PPB (D) - Membuat Aplikasi Dice Roller Interaktif

 ILHAM INSAN WAFI

5025211255 - Kelas PPB (D)

Tugas 4 - Membuat Aplikasi Dice Roller Interaktif

           Pada kesempatan kali ini, saya ingin membagikan pembelajaran terbaru yang telah saya lakukan. Saya berhasil mengembangkan sebuah aplikasi sederhana bernama Dice Roller (pengocok dadu). Aplikasi ini saya buat dengan mengikuti panduan dari modul Membuat Aplikasi Dice Roller Interaktif.

Berikut ini adalah dokumentasi dari proses saya dalam mempelajari dan mengerjakan tutorial tersebut. 

Menambahkan Animasi pada Dice Roller

        Setelah itu, saya melakukan eksplorasi dengan sedikit memodifikasi kode pada MainActivity.kt, dengan menambahkan animasi pada Dice Roller yang sudah saya buat. Berikut merupakan kode hasil modifikasi saya :

@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) {
        AnimatedContent(
            targetState = result,
            transitionSpec = {
                fadeIn(tween(300)) togetherWith fadeOut(tween(300))
            },
            label = "DiceAnimation"
        ) { targetResult ->
            val animatedImageResource = when (targetResult) {
                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
            }
            Image(
                painter = painterResource(id = animatedImageResource),
                contentDescription = targetResult.toString()
            )
        }

        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            result = (1..6).random()
        }) {
            Text(text = "Roll")
        }
    }
}

Penjelasan Penambahan:

• AnimatedContent : Komponen ini memungkinkan animasi transisi antar konten berdasarkan perubahan nilai. Dalam hal ini, result adalah target state yang diamati.
• transitionSpec : Menentukan jenis transisi animasi: fadeIn dan fadeOut selama 300ms. Anda bisa ganti dengan scaleIn, slideInVertically, dsb.

Video Demo Hasil :

Source Code Hasil : GITHUB

Referensi

• https://developer.android.com/codelabs/basic-android-kotlin-compose-build-a-dice-roller-app