Pertemuan 4&5 PPB (B) - 25/03/2026

Tugas Pertemuan 4 PPB B 2026

March 26, 2026

Nama  : Triana Velia Hutabalian

NRP   : 5025231190

Kelas  : PPB(B)

Pada pertemuan keempat ini, kami mengerjakan latihan dari CodeLab Android Basics with Compose yaitu membuat aplikasi Dice Roller. Aplikasi ini mengimplementasikan komponen Button pada Jetpack Compose, di mana setiap kali tombol ditekan, gambar dadu akan berubah secara acak menggunakan fungsi random(). Konsep utama yang dipelajari adalah State Management dengan remember dan mutableStateOf yang memungkinkan UI diperbarui otomatis saat data berubah (recomposition).

🛠 Langkah Pengerjaan

1

Membuat project baru di Android Studio dengan template Empty Activity, nama project DiceRoller, package com.example.diceroller, dan Minimum SDK API 24 (Nougat).

2

Menambahkan 6 gambar dadu (dice_1.png s.d. dice_6.png) ke dalam folder res/drawable yang diambil dari asset resmi Google Codelab.

3

Menambahkan string resource roll pada file res/values/strings.xml dengan nilai "Kocok Dadu!" sebagai label tombol.

4

Membuat fungsi composable DiceRollerApp() dengan state result menggunakan remember { mutableStateOf(1) } untuk menyimpan angka hasil dadu yang aktif.

5

Menggunakan ekspresi when untuk memetakan nilai result (1–6) ke resource gambar dadu yang sesuai, lalu menampilkannya dengan composable Image berukuran 200.dp.

6

Menambahkan komponen Button dengan parameter onClick yang berisi logika result = (1..6).random() untuk menghasilkan angka acak setiap kali tombol ditekan.

7

Mengatur tata letak dengan Column, horizontalAlignment = Alignment.CenterHorizontally, dan verticalArrangement = Arrangement.Center agar semua elemen berada di tengah layar.

8

Menjalankan aplikasi di emulator Pixel 6 API 34 dan memverifikasi bahwa gambar dadu berubah setiap kali tombol Kocok Dadu! ditekan.

💡 Konsep yang Dipelajari

remember

Menyimpan state agar nilainya tidak direset saat terjadi recomposition pada composable.

mutableStateOf

Membuat objek state yang dapat diobservasi oleh Compose sehingga UI otomatis diperbarui saat nilai berubah.

Button { onClick }

Komponen tombol interaktif dengan lambda onClick yang dieksekusi setiap kali pengguna menekan tombol.

(1..6).random()

Fungsi Kotlin untuk menghasilkan bilangan bulat acak dalam rentang 1 sampai 6 secara inklusif.

painterResource

Fungsi untuk memuat gambar dari folder res/drawable dan menggunakannya di dalam composable Image.

Recomposition

Proses Compose menggambar ulang UI secara otomatis hanya pada bagian yang state-nya berubah, tanpa refresh seluruh layar.

📄 Kode Program

MainActivity.kt

package com.example.diceroller

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.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.res.*
import androidx.compose.ui.unit.*
import com.example.diceroller.ui.theme.DiceRollerTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DiceRollerTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    DiceRollerApp(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun DiceRollerApp(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.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Image(painter = painterResource(id = imageResource), contentDescription = result.toString(), modifier = Modifier.size(200.dp))
        Spacer(modifier = Modifier.height(32.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(text = stringResource(id = R.string.roll), fontSize = 18.sp)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DiceRollerAppPreview() {
    DiceRollerTheme { DiceRollerApp() }
}

📸 Hasil Output

MainActivity.kt — Android Studio · Pixel 6 API 34