Tugas 4 PPB G 2025 - Farhan Dwi Putra 5025211093

Nama : Farhan Dwi Putra

NRP : 5025211093

Kelas : Pemrograman Perangkat Bergerak (G)

Tugas Pertemuan 4

Dice Roller App

---

Deskripsi Tugas

Pada pertemuan keempat ini, kami membuat sebuah aplikasi Dice Roller interaktif menggunakan Jetpack Compose di Android Studio. Aplikasi ini memungkinkan pengguna untuk melempar dadu secara acak hanya dengan menekan tombol "Roll". Gambar dadu akan berubah secara dinamis berdasarkan hasil acakan.

---

Struktur Proyek

Aplikasi terdiri dari beberapa bagian utama:

• MainActivity: Kelas utama yang menjalankan aplikasi.

• DiceRollerApp: Fungsi composable utama yang memuat tampilan antarmuka.

• DiceWithButtonAndImage: Fungsi yang menampilkan gambar dadu dan tombol.

• strings.xml: Berisi string sumber daya seperti nama aplikasi dan teks tombol.

• Drawable Resources: Gambar dadu dari angka 1 hingga 6 (dice_1 sampai dice_6).

---

Source Code

package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
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 com.example.diceroller.ui.theme.DiceRollerTheme

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

@Preview(showBackground = true)
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(
        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(id = imageResource),
            contentDescription = result.toString()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(text = stringResource(R.string.roll))
        }
    }
}

---

Penjelasan Kode

MainActivity

• Merupakan entry point dari aplikasi.

• Menggunakan setContent {} untuk memuat UI berbasis Jetpack Compose.

• Di dalamnya dipanggil fungsi DiceRollerApp().

DiceRollerApp

• Fungsi composable untuk membungkus dan menampilkan layout utama aplikasi.

• Memanggil DiceWithButtonAndImage() dengan modifier agar tampil di tengah layar.

DiceWithButtonAndImage

• Menyimpan state result yang merepresentasikan angka dadu (1-6).

• Gambar dadu ditentukan berdasarkan nilai result menggunakan when.

• Tombol "Roll" akan menghasilkan angka acak baru setiap ditekan, lalu gambar akan berubah sesuai angka tersebut.

---

strings.xml

<resources>
    <string name="app_name">Dice Roller</string>
    <string name="roll">Roll</string>
</resources>

• app_name: Nama aplikasi yang ditampilkan di launcher.

• roll: Teks untuk tombol Roll.

---

Sumber Daya Gambar

• Gambar-gambar dadu (dice_1.png sampai dice_6.png) disimpan di folder res/drawable.

• Gambar digunakan dalam Image() berdasarkan hasil lemparan.

---

Alur Aplikasi

1. Aplikasi dimulai dan memanggil DiceRollerApp().

2. Komponen DiceWithButtonAndImage() menampilkan gambar dadu dan tombol.

3. Ketika tombol Roll ditekan, angka acak dihasilkan.

4. Gambar dadu akan berubah sesuai hasil angka yang diacak.

---

Hasil

Source Code : Github