PPB C - Pertemuan 5 - Aplikasi Dice Roller Interaktif

- Maret 24, 2026

5025221103 | Hilmi Fawwaz Sa'ad | Pertemuan 5 | PPB C

Aplikasi Dice Roller Interaktif

Pada tugas ini, saya membuat aplikasi Dice Roller interaktif menggunakan Android Studio dengan memanfaatkan Jetpack Compose. Aplikasi ini berfungsi untuk mensimulasikan pelemparan dadu secara digital, di mana gambar dadu akan berubah secara acak ketika tombol ditekan.

Melalui tugas ini, saya mempelajari penggunaan komponen dasar seperti Button, Image, dan Column, serta penerapan state untuk memperbarui tampilan secara dinamis. Berikut merupakan dokumentasi langkah-langkah pembuatan aplikasi tersebut:

Repository Github: Tugas Dice Roller

1. Buka Android Studio

2. Pilih "New Project"

3. Pilih "Empty Activity" dan pilih "Next"

4. Isi konfigurasi sesuai dengan project yang dikerjakan dan pilih "Finish"

5. Hasil dari konfigurasi setelah menekan tombol "Finish" pada poin 4 sebelumnya

6. Pertama-tama, hapus default function Greeting()dan GreetingPreview()

7. Buat fungsi composable DiceRollerApp() dan DiceRollerWithImageAndButton()

8. Hapus semua kode di dalam lambda setContent{} yang ditemukan dalam metode onCreate(). Di dalam lambda, panggil lambda DiceRollerAppTheme{}, lalu di dalam lambda DiceRollerAppTheme{}, panggil fungsi DiceRollerApp()

9. Tambah Column() pada fungsi DiceRollerWithImageAndButton() untuk membuat tata letak vertikal, serta menggunakan Alignment.CenterHorizontally agar elemen di dalam kolom terpusat secara horizontal pada layar

10. Tambah Button di dalam Column() dengan teks "Roll" sebagai label tombol yang akan ditekan oleh pengguna

11. Import gambar dadu. Untuk gambar dadu bisa di download dari link ini

12. Cara import gambar, masuk ke "View" > "Tools Windows" > "Resource Manager". Pilih tanda "+" dan "Import Drawables"

13. Tambah variabel result untuk menyimpan nilai hasil lemparan dadu, kemudian menggunakan ekspresi when untuk menentukan gambar dadu (imageOfDice) yang sesuai dengan nilai result. Selanjutnya, menambahkan komponen Image di dalam Column() untuk menampilkan gambar dadu berdasarkan resource yang dipilih

14. Ubah variabel result menjadi state menggunakan remember dan mutableStateOf() agar nilainya dapat berubah dan memicu recomposition pada tampilan. Selanjutnya, menambahkan fungsi (1..6).random() pada parameter onClick di Button untuk menghasilkan angka acak antara 1 hingga 6 setiap kali tombol ditekan, sehingga gambar dadu yang ditampilkan akan berubah sesuai nilai result

15. Ubah pada bagian fungsi DiceRollerApp. Tambah fungsi DiceRollerWithImageAndButton() dengan menambahkan modifier fillMaxSize() untuk mengisi seluruh ukuran layar serta wrapContentSize(Alignment.Center) untuk memusatkan konten di tengah layar