Komponen Button (Aplikasi Dice Roller)

Nama : Rafaela Shyra Ashma' Ramadhani

NRP : 5025231217

Kelas : Pemrograman Perangkat Bergerak (B)

Tugas  4 - Pertemuan 4

Pada pertemuan keempat ini, dilakukan pengerjaan tugas berdasarkan CodeLab Android Basics with Compose, yaitu membuat aplikasi sederhana bernama Dice Roller. Aplikasi ini berfungsi untuk mensimulasikan pelemparan dadu secara digital, di mana pengguna dapat menekan tombol untuk menghasilkan angka acak dari 1 hingga 6. Hasil dari proses tersebut kemudian ditampilkan dalam bentuk gambar dadu serta nilai angka yang sesuai.

Melalui tugas ini, dipelajari penggunaan komponen Button pada Jetpack Compose sebagai sarana interaksi pengguna, serta penerapan state management menggunakan remember dan mutableIntStateOf. Dengan konsep state tersebut, setiap perubahan nilai akan secara otomatis memperbarui tampilan melalui mekanisme recomposition tanpa perlu melakukan pembaruan UI secara manual. Selain itu, tugas ini juga membantu memahami bagaimana membangun antarmuka aplikasi secara deklaratif dengan menghubungkan logika program dan tampilan secara langsung.

Langkah Pengerjaan:

- Membuat project baru di Android Studio menggunakan template Empty Activity dengan nama DiceRoller dan minimum SDK API 24.

- Menghapus kode default bawaan Android Studio seperti fungsi Greeting agar tampilan dapat disesuaikan dengan kebutuhan aplikasi.

- Menambahkan resource gambar dadu (dice_1.xml sampai dice_6.xml) ke dalam folder res/drawable. File tersebut berupa vector drawable yang merepresentasikan setiap sisi dadu.

- Menambahkan string resource pada file res/values/strings.xml dengan nama roll yang berisi teks "Kocok Dadu!" untuk digunakan sebagai label tombol.

- Membuat fungsi composable DiceRollerApp() yang berfungsi sebagai tampilan utama aplikasi.

- Menambahkan state menggunakan remember dan mutableIntStateOf untuk menyimpan nilai hasil dadu. State ini akan berubah setiap kali tombol ditekan.

- Menggunakan ekspresi when untuk menentukan gambar dadu yang akan ditampilkan berdasarkan nilai hasil dadu (1 sampai 6).

- Menampilkan gambar dadu menggunakan composable Image dengan ukuran tertentu agar terlihat jelas di layar.

- Menambahkan teks untuk menampilkan hasil angka dadu agar pengguna dapat mengetahui nilai yang dihasilkan.

- Menambahkan komponen Button dengan fungsi onClick yang berisi logika untuk menghasilkan angka acak dari 1 sampai 6 menggunakan (1..6).random().

- Mengatur tata letak menggunakan Column dengan alignment tengah agar tampilan lebih rapi dan terpusat.

- Menjalankan aplikasi pada emulator untuk memastikan bahwa tombol berfungsi dengan baik dan gambar dadu berubah sesuai hasil acak.

Konsep yang Dipelajari:

- State Management (remember & mutableIntStateOf)

State digunakan untuk menyimpan data yang dapat berubah selama aplikasi berjalan. Dengan menggunakan remember, nilai state tidak akan di-reset saat terjadi recomposition. mutableIntStateOf memungkinkan perubahan nilai integer yang dapat diamati oleh Compose sehingga UI akan diperbarui secara otomatis.

- Composable Function

Composable merupakan fungsi yang digunakan untuk membangun tampilan UI di Jetpack Compose. Dengan pendekatan deklaratif, UI akan mengikuti perubahan data secara langsung tanpa perlu mengatur ulang tampilan secara manual.

- Button dan onClick

Komponen Button digunakan untuk menerima interaksi dari pengguna. Properti onClick berisi aksi yang akan dijalankan saat tombol ditekan, dalam hal ini adalah mengacak angka dadu.

- Random Function

Fungsi (1..6).random() digunakan untuk menghasilkan angka acak dalam rentang 1 hingga 6, yang merepresentasikan hasil pelemparan dadu.

- Image dan Resource

Composable Image digunakan untuk menampilkan gambar dari folder drawable. Gambar yang ditampilkan akan berubah sesuai dengan nilai state yang aktif.

- Layout (Column, Spacer, Alignment)

Column digunakan untuk menyusun elemen secara vertikal. Spacer digunakan untuk memberikan jarak antar komponen, sedangkan Alignment mengatur posisi elemen agar berada di tengah layar.

- Recomposition

Recomposition adalah proses di mana Compose akan memperbarui tampilan hanya pada bagian yang mengalami perubahan state. Hal ini membuat aplikasi lebih efisien karena tidak perlu memuat ulang seluruh UI.

Kode: GitHub

Penjelasan Kode Program: 

Kode program dimulai dengan pembuatan class MainActivity yang merupakan turunan dari ComponentActivity. Pada fungsi onCreate, digunakan setContent untuk menentukan tampilan aplikasi menggunakan Jetpack Compose, di mana fungsi DiceRollerApp() dipanggil sebagai UI utama.

Di dalam fungsi DiceRollerApp(), terdapat variabel result yang dideklarasikan menggunakan remember dan mutableIntStateOf(1) untuk menyimpan nilai hasil dadu. Nilai ini akan berubah setiap kali tombol ditekan. Selanjutnya digunakan ekspresi when untuk menentukan resource gambar dadu yang sesuai dengan nilai result.

Tampilan aplikasi disusun menggunakan Column dengan posisi tengah layar. Di dalamnya terdapat composable Image untuk menampilkan gambar dadu, Text untuk menampilkan hasil angka, serta Button yang digunakan untuk mengacak nilai dadu. Ketika tombol ditekan, nilai result akan diperbarui menggunakan fungsi (1..6).random(), sehingga Compose akan melakukan recomposition dan memperbarui tampilan gambar serta teks secara otomatis.

Hasil: