Tugas 4 (Modifikasi Aplikasi Sederhana dengan Menerapkan Button Component)

 Modifikasi Aplikasi Sederhana dengan Menerapkan Button Component

Dalam pertemuan ke-4 ini, diberikan tugas untuk membuat sebuah aplikasi sederhana dengan menerapkan button component

Artikel kali ini, akan menjelaskan Source Code, Readable Source Code, Tampilan Output, dan Video Dokumentasi

Source Code : Code Github

Readable Source Code

Kelas Main Activity

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

Kelas MainActivity mewarisi ComponentActivity, yang bertindak sebagai aktivitas utama aplikasi. Fungsi onCreate dipanggil saat aplikasi pertama kali dijalankan. Di dalamnya, fungsi setContent digunakan untuk menampilkan UI berbasis Jetpack Compose. DiceRollerTheme diterapkan untuk menyelaraskan tampilan dengan tema aplikasi. Surface digunakan sebagai wadah utama dengan latar belakang yang diambil dari MaterialTheme.colorScheme.background. Akhirnya, fungsi DiceRollerApp() dipanggil untuk menampilkan elemen utama aplikasi.

Fungsi DiceRollerApp.kt

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

Fungsi DiceRollerApp adalah Composable function yang bertanggung jawab untuk menampilkan UI utama. Anotasi @Preview memungkinkan pengembang melihat pratinjau tampilan di Android Studio tanpa menjalankan aplikasi. DiceWithButtonAndImage() dipanggil dengan Modifier, yang memastikan elemen memenuhi seluruh layar (fillMaxSize()) tetapi tetap terpusat (wrapContentSize(Alignment.Center)).

Fungsi DiceWithButtonAndImage.kt

@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
    }

Fungsi ini adalah Composable function yang bertanggung jawab untuk menampilkan dadu dan tombol. State management diterapkan menggunakan var result by remember { mutableStateOf(1) }, yang menyimpan angka dadu saat tombol ditekan. Statement when digunakan untuk menentukan gambar dadu berdasarkan nilai result, dengan masing-masing angka (1–6) sesuai dengan R.drawable.dice_1 hingga R.drawable.dice_6.

Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
    Image(painter = painterResource(imageResource), contentDescription = result.toString())

Elemen UI ditata menggunakan Column, sehingga ditampilkan secara vertikal. Modifier yang diteruskan memastikan tampilan tetap responsif. horizontalAlignment = Alignment.CenterHorizontally memastikan semua elemen sejajar di tengah. Gambar dadu ditampilkan menggunakan Image, dengan painterResource(imageResource) untuk memilih gambar berdasarkan nilai result. contentDescription diberikan agar aplikasi tetap aksesibel, misalnya bagi pengguna dengan keterbatasan visual.

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

Tombol Roll dibuat menggunakan Button. Saat ditekan, tombol akan memperbarui nilai result dengan angka acak dari 1 hingga 6 menggunakan (1..6).random(). Teks tombol diambil dari stringResource(R.string.roll), yang memungkinkan aplikasi mendukung multiple languages. Ukuran font diatur menjadi 24.sp agar lebih mudah dibaca.

Tampilan Output

Modifikasi Aplikasi Button Component

Saya melakukan beberapa modifikasi terhadap kode awal dari button component, saya merubah pada fungsi DiceWithButtonAndImage. Beberapa hal yang saya ubah sebagai berikut :

• Sebelumnya hanya ada satu dadu, sekarang diubah menjadi dua dadu.
• Ditambahkan dua variabel state (result1 dan result2) untuk menyimpan angka dadu masing-masing.
• Menggunakan Row untuk menyusun kedua dadu secara horizontal.
• Setiap dadu sekarang memiliki angka yang muncul di bawahnya menggunakan Text.
• Ditambahkan Spacer agar tata letak lebih rapi.

Menambah fungsi baru getDiceImage(result: Int): Int

• Sebelumnya kode untuk memilih gambar dadu berdasarkan angka langsung ada di dalam DiceWithButtonAndImage.
• Sekarang dibuat fungsi terpisah agar lebih bersih dan bisa digunakan untuk kedua dadu.

Tampilan Output yang Sudah di Modifikasi

Video Presentasi

Referensi

https://developer.android.com/codelabs/basic-android-kotlin-compose-build-a-dice-roller-app?hl=id&continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-2-pathway-2%3Fhl%3Did%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-build-a-dice-roller-app#0