Pertemuan 5

 Nama: Thopaz Givangkara Rosadi

NRP: 5025231050

Kelas: PBB (C)

Source Code: https://github.com/rsthopaz/Pemrograman-Mobile/tree/main/Pertemuan_5
(include gambar dadu 1-6)

1. Pertemuan_5Theme

Pertemuan_5Theme {
    DiceRollerApp()
}

Baris ini menggunakan tema aplikasi Jetpack Compose yang berada di folder:

ui/theme

Tema ini berfungsi untuk mengatur tampilan aplikasi, seperti:

• warna utama aplikasi
• typography (jenis & gaya huruf)
• material design style

Semua UI di dalam aplikasi akan mengikuti tema ini.

---

2. MainActivity sebagai Entry Point

class MainActivity : ComponentActivity()

MainActivity adalah activity utama yang pertama kali dijalankan saat aplikasi dibuka.

Di dalamnya terdapat:

setContent {
    Pertemuan_5Theme {
        DiceRollerApp()
    }
}

Fungsi setContent {} digunakan untuk menampilkan UI berbasis Jetpack Compose.

---

3. Fungsi DiceRollerApp

@Composable
fun DiceRollerApp()

Ini adalah Composable function utama UI.

Tugasnya hanya:

• menjadi container utama
• memanggil layout DiceRollerWithImageAndButton

DiceRollerWithImageAndButton(
    modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
)

---

4. Modifier (Pengatur Layout)

.fillMaxSize()
.wrapContentSize(Alignment.Center)

Penjelasan:

• fillMaxSize() → membuat UI memenuhi seluruh layar
• wrapContentSize(Alignment.Center) → membuat isi berada di tengah layar

Jadi tombol dan gambar akan muncul di tengah layar.

---

5. State result (State Management)

var result by remember {
    mutableStateOf(1)
}

Ini adalah state (data yang bisa berubah).

Penjelasan:

• remember → menyimpan nilai agar tidak reset saat UI recomposition
• mutableStateOf(1) → nilai awal dadu = 1
• result → menyimpan angka dadu saat ini

 Ketika result berubah, UI otomatis update.

---

6. Menentukan Gambar Dadu

var imageOfDice = when(result)

Ini digunakan untuk memilih gambar dadu sesuai angka:

• 1 → dice_1
• 2 → dice_2
• ...
• 6 → dice_6

Contoh:

1 -> R.drawable.dice_1

Jadi gambar yang ditampilkan selalu sesuai hasil random.

---

7. Column Layout (Vertikal Layout)

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = modifier
)

Column digunakan untuk menyusun UI secara vertikal (atas ke bawah).

Isi Column:

1. Gambar dadu
2. Tombol Roll

---

8. Menampilkan Gambar Dadu

Image(
    painter = painterResource(id = imageOfDice),
    contentDescription = null
)

Penjelasan:

• Image → menampilkan gambar
• painterResource → mengambil gambar dari res/drawable
• imageOfDice → gambar sesuai hasil dadu

---

9. Tombol Roll (Interaksi User)

Button(onClick = { result = (1..6).random() })

Ini bagian paling penting 🎲

Penjelasan:

• Button → tombol UI
• onClick → aksi ketika tombol ditekan
• (1..6).random() → menghasilkan angka acak 1 sampai 6

 Saat tombol ditekan:

• result berubah
• UI otomatis update
• gambar dadu ikut berubah

---

10. Text di dalam Button

Text(text = "Roll")

Menampilkan tulisan “Roll” di dalam tombol.

---

11. Preview (Android Studio)

@Preview(showBackground = true)

Fungsi ini untuk:

• melihat UI tanpa menjalankan emulator
• hanya di Android Studio