Tugas Pertemuan 5 - Composable Button Dice Roll

Nama: Dewa Putu Ananda Taurean Mahesa

NRP: 5025231158

Kelas: Pemrograman Perangkat Bergerak C

Membuat aplikasi sederhana yang menampilkan roll dadu menggunakan komponen Button.

1. Package Library

package com.example.diceroller

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

Di atas adalah semua library yang diperlukan untuk projek ini.

2. Main Activity

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

MainActivity adalah titik masuk aplikasi yang akan menjalankan tampilan aplikasi yaitu DiceRollerApp.

3. Dice Roller App

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

DiceRollerApp adalah fungsi yang menjalankan DiceWithButtonAndImage dan mengatur layout aplikasi.

4. Dice With Button and Image

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableIntStateOf(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(text = "Roll")
        }
    }
}

Ini adalah fungsi logika utama dan elemen dari aplikasi. Elemen terdiri dari Image, Spacer, dan Button. Pertama terdapat variable state yang mutable berupa result yang akan menyimpan nilai dadu setelah di roll. State awalnya berupa angka 1. Selanjutnya ada komponen Image yang dapat berubah saat variable state berubah. Maka gambar yang ditampilkan (imageResource) juga akan berbeda sesuai hasil angka dari result. Lalu ada komponen Button dengan argumen onClick dan text "Roll". Saat button ditekan, nilai mata dadu (result) akan berubah secara random dari 1 sampai 6 yang akan mengakibatkan gambar yang ditampilkan berubah juga.

Note: gambar yang diperlukan (drawables) perlu di import ke dalam projek terlebih dahulu.

5. Hasil Akhir

Di atas adalah tampilan akhir dari aplikasi. Pertama dadu menunjukkan nilai 1, lalu setelah di roll menunjukkan nilai 4.