Pemrograman Perangkat Beregerak - Tugas Pertemuan 4 - Timothy Hosia

Aplikasi Dice Roller

Nama: Timothy Hosia Budianto

NRP: 5025211098

Kelas: PPB - A

Aplikasi Dice Roller 

Pada pertemuan kali ini kami mebuat aplikasi dice roller sederhana dari android developer. Berikut hasilnya

Berikut adalah kode sumbernya :

package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.diceroller.ui.theme.DiceRollerTheme

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

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
    )
}

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf( 1) }
    val imageResource = 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(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
        Image(painter = painterResource(imageResource), contentDescription = result.toString())

        Button(
            onClick = { result = (1..6).random() },
        ) {
            Text(text = stringResource(R.string.roll), fontSize = 24.sp)
        }
    }
}

1. MainActivity: Merupakan aktivitas utama aplikasi, di mana tampilan dibuat menggunakan Jetpack Compose. Di dalam onCreate, tema DiceRollerTheme diterapkan, dan konten UI diset dengan DiceRollerApp.
2. DiceRollerApp: Merupakan fungsi @Composable yang memanggil komponen DiceWithButtonAndImage. Ini adalah tampilan utama aplikasi yang menampilkan gambar dadu dan tombol untuk menggulirkan dadu.
3. DiceWithButtonAndImage: Fungsi ini berfungsi untuk menampilkan gambar dadu sesuai dengan hasil angka yang didapatkan setelah tombol "Roll" diklik.
• Menggunakan state result yang menyimpan angka hasil lemparan dadu (1 hingga 6).
• Ketika tombol "Roll" diklik, angka acak dihasilkan menggunakan (1..6).random(), yang kemudian mengubah gambar dadu sesuai angka yang dihasilkan.
• Gambar dadu diatur menggunakan Image, dengan gambar yang dipilih berdasarkan angka dari state result.
• Tombol yang ditampilkan memiliki teks yang diambil dari stringResource(R.string.roll) dan ukuran font 24sp.
4. Modifier: Modifier.fillMaxSize() dan Modifier.wrapContentSize(Alignment.Center) digunakan untuk mengatur tampilan dan posisi elemen-elemen UI agar berada di tengah layar.
5. Preview: Fungsi @Preview digunakan untuk melihat tampilan UI di IDE tanpa menjalankan aplikasi di perangkat.
   

github