Dice Roller App

Nama : Made Nanda Wija Vahindra

NRP : 5025211160

Kelas : PBB - A

Tugas 4: Membuat aplikasi Dice Roller Interaktif

Dokumentasi Tugas 4 yaitu latihan membuat aplikasi dice roller interaktif dengan komponen button

Referensi : CodeLab

1. Persiapan Proyek Android Studio

1. Buka Android Studio dan buat proyek baru.

2. Pilih template Empty Activity dan gunakan Kotlin sebagai bahasa pemrograman.

3. Beri nama proyek, misalnya DiceRollerApp, lalu klik Finish.

2. Struktur Folder dan Sumber Daya Gambar

1. Tambahkan Gambar Dadu

   • Simpan enam gambar dadu (dice_1.png, dice_2.png, dst.) di dalam folder res/drawable.

   • gambar dadu dapat didownload pada link ini

2. Tambahkan String Resource

   • Buka res/values/strings.xml dan tambahkan:

     <string name="roll">Roll</string>

3. Implementasi Kode Kotlin

Buka MainActivity.kt dan tambahkan kode berikut:

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.*
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
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.unit.dp
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()
                }
            }
        }
    }
}

@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(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()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(stringResource(R.string.roll), fontSize = 24.sp)
        }
    }
}

4. Menjalankan Aplikasi

1. Jalankan Aplikasi dengan mengklik Run di Android Studio.

2. Ketika tombol Roll ditekan, gambar dadu akan berubah secara acak sesuai dengan angka yang dihasilkan.

5. Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda telah berhasil membuat aplikasi Dice Roller menggunakan Jetpack Compose. Aplikasi ini menggunakan state management untuk mengubah gambar dadu setiap kali tombol ditekan.

Video dokumentasi