Florentino Benedictus: Tugas 4 - Aplikasi Dice Roller Menggunakan Interaksi Button

Nama : Florentino Benedictus

NRP : 5025201222

Tahun : 2024

Kelas : Pemrograman Perangkat Bergerak I

Link Implementasi : MainActivity.kt & strings.xml

Tugas 4 - Aplikasi Dice Roller Menggunakan Interaksi Button

Pada tugas ini, dibuat aplikasi Dice Roller yaitu aplikasi yang memungkinkan user melempar dadu dengan menggunakan composable Button. Berikut adalah tahapan pembuatannya menggunakan referensi dari tutorial Codelab Android - Membuat Aplikasi Dice Roller Interaktif:

1. Inisiasi Proyek

Pertama-tama buka aplikasi Android Studio lalu pilih New Project -> Empty Activity. Kemudian ubah nama activity menjadi "Dice Roller" dan menggunakan level API minimum 24 sesuai tutorial, lalu pilih Finish. Lalu tunggu beberapa saat sampai Android Studio selesai loading proyek. Untuk kemudahan maka digunakan virtual device Pixel 7 Pro yang telah dibuat sebelumnya.

2. Ubah Template Default

Hapus composable Greeting yang merupakan composable default ketika project diinisiasi, kemudian tambahkan composable DiceRollerApp() dan DiceWithButtonAndImage() dan ubah isi fungsi onCreate sehingga memanggil DiceRollerApp(). Kemudian panggil DiceWithButtonAndImage() di dalam fungsi composable DiceRollerApp(). Kemudian tambahkan juga Modifier untuk menyesuaikan posisi pada sizenya.

3. Menambahkan Composable Column

Karena pada hasil akhir aplikasi akan memiliki dadu dan button, maka perlu digunakan fungsi composable Column agar dadu dan button dapat diposisikan secara vertikal. Selain itu jangan lupa untuk mengimport package-package yang diperlukan.

4. Menambahkan Button

Selanjutnya, tambahkan resource string pada path app/res/values/strings.xml yang nantinya akan digunakan untuk teks pada button yang dibuat.

Lalu buat objek Button pada DiceWithButtonAndImage dan gunakan resource string yang didefinisikan sebelumnya, sehingga terlihat preview telah menampilkan buttonnya.

5. Menambahkan Image Dadu

Untuk menambahkan gambar dadu, maka dapat digunakan Composable Image. Caranya adalah dengan mengimport dari dice_images.zip yang berisi gambar 6 sisi dadu. Kemudian pilih View -> Tool Windows -> Resource Manager untuk mengimport gambar-gambar tersebut.

Selanjutnya, pilih Import Drawables, lalu pilih folder yang berisi gambar dadu tersebut.

Terlihat bahwa gambar-gambar tersebut telah terimport dan berada pada path app/res/drawable. Gambar-gambar tersebut dapat dipanggil menggunakan R.drawable.<nama>.

Karena nantinya sisi dadu yang ditampilkan harus sesuai dengan hasil yang didapat user, maka dibuat variabel result untuk menyimpan hasil user (diberi nilai default 1), Kemudian buat variabel ImageResource yang akan menentukan resource gambar dadu yang akan di-import dengan mengecek nilai variabel result untuk menentukan gambar mana yang akan digunakan.

Selanjutnya tambahkan composable Image untuk menampilkan resource gambar dan gunakan painterResource untuk mengimport dari ID gambar sesuai dengan variabel imageResources. (best practice) Tambahkan juga contentDescription yang menjelaskan UI element untuk mempermudah orang lain memahami maksud code yang dibuat. Kemudian tambahkan composable Spacer untuk memberi jarak antara gambar dadu dengan button sesuai kebutuhan.

6. Tambahkan Logika Pelemparan Dadu

Selanjutnya, untuk membuat fungsi pelemparan dadu maka dapat dilakukan dengan cara generate nilai variabel result secara random dari 1 sampai 6 ketika button "Lempar" ditekan user, sehingga dapat digunakan fungsi random() yang akan dipanggil untuk mengubah nilai result ketika Button "Lempar" ditekan.

Kemudian, agar nilai variabel result dapat secara aktif disesuaikan, maka perlu menggunakan remember dan mutableStateOf (dengan nilai default 1 juga).