Tugas 4 PPB G - Membuat Aplikasi Dice Roller Menggunakan Jetpack Compose

Tugas Pertemuan 4 PPB G 2025

oleh : Arfi Raushani Fikra (5025211084)

Pada pertemuan ke-4 ini, kami diminta membuat aplikasi Dice Roller. Dice Roller adalah aplikasi Android sederhana berbasis Jetpack Compose yang memungkinkan pengguna untuk mengocok dadu dengan menekan tombol. Setiap kali tombol ditekan, gambar dadu akan diperbarui secara acak dengan angka antara 1 hingga 6.

Source Code dapat dilihat disini

Berikut penjelasan kodenya berdasarkan struktur

a. MainActivity

      class MainActivity : ComponentActivity() {
          override fun onCreate(savedInstanceState: Bundle?) {
              super.onCreate(savedInstanceState)
              enableEdgeToEdge()
              setContent {
                  DiceRollerTheme {
                      DiceRollerApp()
                  }
              }
          }
      }
	  

• onCreate() adalah metode utama yang dijalankan saat aplikasi dimulai.

• enableEdgeToEdge() digunakan untuk mengaktifkan tampilan tepi-ke-tepi pada aplikasi.

• setContent { DiceRollerTheme { DiceRollerApp() } } menampilkan antarmuka pengguna menggunakan tema aplikasi.

b. DiceRollerApp

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

• Fungsi ini adalah root dari UI aplikasi yang akan ditampilkan.

• Memanggil DiceWithButtonAndImage() untuk menampilkan dadu dan tombol.

• Menggunakan @Preview agar tampilan bisa dipratinjau di Android Studio.

c. DiceWithButtonAndImage

  
    @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
        ){
            Image(
                painter = painterResource(imageResource),
                contentDescription = result.toString()
            )
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = { result = (1..6).random() }) {
                Text(stringResource(R.string.roll))
            }
        }
    }
    

• result menyimpan nilai dadu dan diperbarui setiap kali tombol ditekan.

• imageResource menentukan gambar dadu berdasarkan nilai result.

• Column digunakan untuk menyusun elemen UI secara vertikal.

• Image() menampilkan gambar dadu yang sesuai dengan result.

• Button() mengubah nilai result secara acak antara 1 hingga 6 saat ditekan.

• Spacer() digunakan untuk memberi jarak antara gambar dan tombol.

Berikut hasilnya

~ Terima Kasih ~