Pertemuan 5 - Komponen Button

Nama: Kadek Fajar Pramartha Yasodana

NRP: 5025231185

Kelas: PPB C

Pertemuan 5: Komponen Button

Dalam tugas ini saya diminta untuk membuat sebuah aplikasi sederhana untuk belajar mengenai button pada composable. Disini button jika di click akan mengubah state dari aplikasi yaitu gambar dadu menjadi gambar yang random.

package com.fajary.rolldiceapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import com.fajary.rolldiceapplication.ui.theme.RollDiceApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            RollDiceApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) { }
                DiceRollerApp();
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DiceRollerApp()
{
    DiceRollerWithImageAndButton(
        modifier = Modifier.fillMaxSize().wrapContentSize());
}

@Composable
fun DiceRollerWithImageAndButton(modifier: Modifier = Modifier)
{
    var result by remember {
        mutableIntStateOf(1)
    }
    val imageOfDice = 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(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
    ) {
        Image(painter = painterResource(id = imageOfDice), contentDescription = null);
        Button(onClick = {
            result = (1..6).random()
        }) {
            Text(text = "Roll")
        }
    }
}

onCreate()

Fungsi onCreate() adalah fungsi utama yang dijalankan saat aplikasi pertama kali dibuka. Di sini aplikasi menyiapkan tampilan menggunakan Jetpack Compose melalui setContent. Tema aplikasi diterapkan dengan RollDiceApplicationTheme, lalu DiceRollerApp() dipanggil untuk menampilkan UI utama aplikasi yaitu fitur pelempar dadu.

DiceRollerApp()

Fungsi DiceRollerApp() berfungsi sebagai pembungkus tampilan utama. Fungsi ini hanya memanggil DiceRollerWithImageAndButton() dan mengatur layout agar konten berada di tengah layar dan menggunakan ukuran layar penuh. Anotasi @Preview memungkinkan tampilan UI dilihat langsung di Android Studio tanpa menjalankan aplikasi.

DiceRollerWithImageButton()

Fungsi DiceRollerWithImageAndButton() adalah komponen utama yang berisi logika dan tampilan dadu. Variabel result menyimpan angka hasil lemparan dadu, menggunakan remember { mutableIntStateOf(1) } agar nilainya tersimpan sebagai state dan UI otomatis diperbarui ketika nilainya berubah. Kemudian when(result) digunakan untuk menentukan gambar dadu yang sesuai (dice_1 sampai dice_6). Layout Column digunakan untuk menyusun komponen secara vertikal dan dipusatkan secara horizontal. Komponen Image menampilkan gambar dadu berdasarkan nilai result, sedangkan Button memiliki aksi onClick yang menghasilkan angka acak dari 1 sampai 6 menggunakan (1..6).random(). Ketika tombol ditekan, nilai result berubah dan gambar dadu otomatis ikut berubah, sehingga tercipta efek "melempar dadu".