Pertemuan 4 - APLIKASI DICE ROLLER

 Nama              : Armadya Hermawan Sarwono

NRP                : 5025211243

Kelas               : PPB - A

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

Berikut adalah kodenya

package com.example.tugas4_diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.ui.res.painterResource
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.Spacer
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import com.example.tugas4_diceroller.ui.theme.Tugas4DiceRollerTheme

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

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

@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))
        }
    }
}

Penjelasan

Kelas MainActivity

Kelas MainActivity berfungsi sebagai titik masuk utama aplikasi dan merupakan turunan dari ComponentActivity. Pada metode onCreate(), fungsi setContent {} digunakan untuk menetapkan tampilan aplikasi dengan Jetpack Compose.

Di dalamnya, tema aplikasi DiceRollerTheme diterapkan menggunakan Surface, yang berfungsi sebagai wadah utama dengan latar belakang yang diambil dari MaterialTheme.colorScheme.background. Fungsi DiceRollerApp() kemudian dipanggil untuk menampilkan antarmuka utama aplikasi.

Fungsi DiceRollerApp

Fungsi DiceRollerApp() bertugas menampilkan komponen utama aplikasi, yaitu tombol dan gambar dadu.

Dalam fungsi ini, DiceWithButtonAndImage() dipanggil untuk mengelola tampilan serta logika permainan dadu. Modifier fillMaxSize().wrapContentSize(Alignment.Center) digunakan agar elemen UI berada di tengah layar, menciptakan tampilan yang lebih seimbang.

Fungsi DiceWithButtonAndImage

Fungsi DiceWithButtonAndImage() merupakan inti dari aplikasi yang menangani mekanisme pelemparan dadu serta menampilkan gambar dan tombol interaksi.

Di dalamnya, variabel result dideklarasikan menggunakan remember { mutableStateOf(1) }, sehingga nilainya tersimpan di memori dan dapat diperbarui secara dinamis saat tombol ditekan. Nilai awalnya adalah 1, yang berarti gambar dadu pertama kali akan menampilkan angka 1.

Variabel imageResource menentukan gambar dadu berdasarkan nilai result, dengan struktur when(result) digunakan untuk mencocokkan angka dadu dengan gambar yang sesuai (misalnya dice_1, dice_2, dll.).

Antarmuka dan Interaksi Pengguna

Fungsi ini menggunakan Column untuk menyusun elemen UI secara vertikal. Komponen utama dalam tampilan ini meliputi:

• Gambar Dadu → Ditampilkan menggunakan Image(), dengan painterResource(imageResource) untuk memilih gambar sesuai dengan nilai result.
• Tombol "Roll" → Ditampilkan menggunakan Button(), dengan aksi onClick untuk menghasilkan angka acak pada dadu.

Ketika tombol ditekan, kode result = (1..6).random() akan menghasilkan angka acak antara 1 hingga 6, dan gambar dadu diperbarui secara otomatis sesuai dengan hasil yang diperoleh.

github: Link