Tugas 4 - Aplikasi Dice Roller

 

Aplikasi Dice Roller

 

Langkah 1: Membuat Proyek Baru di Android Studio

1. Buka Android Studio setelah instalasi selesai.
2. Klik "Start a new Android Studio project".
3. Pada layar pemilihan template, pilih "Empty Compose Activity" lalu klik Next.
4. Masukkan nama aplikasi (misalnya, "Dice Roller").
5. Tentukan lokasi penyimpanan proyek di sistem Anda.
6. Pilih Language sebagai Kotlin.
7. Pastikan Use AndroidX artifacts dicentang.
8. Klik Finish.
9. Pada halaman "Select a minimum SDK", pilih API Level 24: Android 7.0 (Nougat) sebagai Minimum SDK.
10. Android Studio akan mulai membangun proyek Anda. Tunggu hingga proses ini selesai.

Langkah 2: Mengedit File MainActivity.kt

1. Setelah proyek selesai dibangun, buka file MainActivity.kt.
2. Sesuaikan kode seperti berikut:

package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.Spacer
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.painterResource
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 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)
        }
    }
}

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

• MainActivity adalah class utama (entry point) ketika aplikasi dijalankan.
• onCreate() dipanggil pertama kali saat activity dibuat.
• setContent {} digunakan untuk menentukan UI berbasis Jetpack Compose.
• DiceRollerTheme {} menerapkan tema aplikasi.
• Surface() adalah container yang bisa digunakan untuk mengatur ukuran dan background.
• Di dalamnya, dipanggil DiceRollerApp() sebagai komponen utama tampilan aplikasi.
• result adalah state (data dinamis) yang menyimpan angka hasil lemparan dadu.
• remember { mutableStateOf(1) } menyimpan nilai state dan bisa berubah saat pengguna menekan tombol.
• Column adalah layout vertikal, komponen diatur dari atas ke bawah.
• Image() menampilkan gambar dadu berdasarkan hasil result.
• Spacer() memberi jarak antar elemen (antara gambar dan tombol).
• Button() saat diklik akan mengubah result menjadi angka acak dari 1 sampai 6.
• Text() menampilkan tulisan pada tombol (diambil dari strings.xml dengan ID roll).
• stringResource(R.string.roll): Mengambil teks dari resource strings.xml, biasanya berisi <string name="roll">Roll</string>.
• R.drawable.dice_1 hingga dice_6: Merujuk ke file gambar dadu yang disimpan di folder res/drawable.

Langkah 3: Menjalankan Aplikasi

1. Klik "Run" (ikon hijau di toolbar) untuk menjalankan aplikasi.
2. Pilih Emulator yang sudah Anda siapkan atau sambungkan perangkat fisik Android Anda.
3. Android Studio akan membangun dan menjalankan aplikasi.
4. Klil button "Roll" pada aplikasi untuk mencoba menjalankan "Dice Roller".

Dokumentasi