Aplikasi Dice Roller

Pertemuan 4

Nama: Rayhan Almer Kusumah

NRP: 5025211115

Kelas: Pemrograman Perangkat Bergerak (A)

Tahun: 2025

Aplikasi Dice Roller

Dokumentasi

Source Code

GitHub:  Go to code!

package com.example.dice_roller_android_app

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
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.mutableStateOf
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.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import com.example.dice_roller_android_app.ui.theme.DiceRollerAndroidAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceRollerAndroidAppTheme {
                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))
        }
    }
}

Pada pertemuan ini ditugaskan membuat aplikasi Dice Roller yaitu sebuah aplikasi untuk mengacak dadu random menggunakan button yang akan menampilkan gambar dadu hasil acakan. Berikut adalah beberapa konsep utama yang dibahas pada tugas pertemuan kali ini setelah mengikuti referensi codelab.

Key Concept

State Management di Compose

Untuk membuat aplikasi yang merespons interaksi pengguna, dibutuhkan manajemen state. Dalam hal ini, angka pada dadu disimpan dalam sebuah mutable state:

    var result by remember { mutableStateOf(1) }

Fungsi remember menjaga nilai state selama komposisi ulang, dan mutableStateOf memungkinkan Compose untuk melakukan re-render secara otomatis saat nilai berubah.

Logic Menampilkan Gambar

Gambar yang ditampilkan tergantung pada nilai result. Dengan menggunakan when, kita bisa menentukan gambar mana yang digunakan:

    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
    }

Deklaratif UI Menggunakan Composable

Seluruh UI ditulis dalam fungsi @Composable, termasuk gambar dadu dan tombol:

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

Layout Column digunakan untuk menyusun elemen secara vertikal, dengan tombol berada di bawah gambar. Spacer menambahkan jarak antara keduanya.