Tugas 4 - Membuat Aplikasi Dice Roller

Membuat Aplikasi "Dice Roller"

Pada tutorial ini, kita akan membuat aplikasi sederhana menggunakan Jetpack Compose yang dapat melakukan roll dadu secara acak. Kita akan fokus pada Button dan bagaimana mengimplementasikannya di MainActivity.

Penjelasan Kode dan Implementasinya

1. Class: MainActivity

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

MainActivity berfungsi sebagai titik masuk utama aplikasi. Di dalamnya, method onCreate bertugas menginisialisasi dan mengatur tampilan awal aplikasi dengan:

• Memanggil enableEdgeToEdge() untuk memastikan tampilan memenuhi seluruh layar.

• Menggunakan setContent bersama Jetpack Compose untuk mendefinisikan UI, di mana diterapkan tema melalui DiceRollerTheme dan komponen utama ditampilkan melalui DiceRollerApp.

2. Composable Function: DiceRollerApp

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

Fungsi tersebut adalah sebuah composable yang menampilkan UI utama dari aplikasi. Dengan anotasi @Preview, fungsi ini memungkinkan pengembang untuk melihat pratinjau langsung di Android Studio. Di dalamnya, fungsi memanggil DiceWithButtonAndImage dengan modifier yang memastikan komponen tersebut mengisi seluruh ukuran layar dan posisinya disusun agar berada di tengah layar.

3. Composable Function: 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.padding(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(stringResource(R.string.roll))
        }
    }
}

Fungsi ini merupakan composable yang menampilkan tampilan dadu dan tombol untuk mengacak nilainya. Berikut langkah kerjanya:

• State Management:
  Variabel result menyimpan nilai dadu saat ini dan diinisialisasi dengan 1 menggunakan remember dan mutableStateOf.

• Pemilihan Gambar:
  Berdasarkan nilai result, dipilih resource gambar dadu yang sesuai (dari dice_1 sampai dice_6).

• Layout:
  Menggunakan Column dengan alignment center secara horizontal untuk menyusun komponen secara vertikal. Di dalamnya terdapat:

  • Image: Menampilkan gambar dadu sesuai dengan nilai result.

  • Spacer: Memberikan jarak antara gambar dan tombol.

  • Button: Tombol yang saat ditekan akan mengubah nilai result menjadi angka acak antara 1 hingga 6, sehingga gambar dadu berubah.

Secara singkat, fungsi ini mengimplementasikan fitur "roll dice" di mana gambar dadu berubah sesuai dengan angka acak yang dihasilkan saat tombol ditekan.

Berikut ini merupakan visual hasil dari kode.

source code: https://github.com/fawwasaldy/ppb-4-dice-roller