MEMBUAT APLIKASI DICE ROLLER

Tugas 3 - Membuat Aplikasi Dice Roller

Nama : Wahyu Tri Saputro

NRP : 5025201217

Kelas : PPB - B

Tugas ketiga PPB kali ini kita diminta untuk mencoba membuat interaksi di aplikasi kita. Kita akan menggunakan button interaction. Dalam project Dice Roller ini akan dipelajari beberapa hal, antara lain cara menambahkan composable Button ke aplikasi Android dengan Compose, cara menambahkan perilaku ke composable Button di aplikasi Android dengan Compose, cara membuka dan mengubah kode Activity untuk aplikasi Android. Sama seperti sebelumnya, kita buat dulu new activity di Android Studio.

Berikut adalah instruksi untuk membuat proyek Dice Roller menggunakan Android Studio:

Membuat Proyek

1. Buka Android Studio dan buat proyek baru dengan langkah-langkah berikut:

   - Pilih File > New > New Project.

   - Pilih Empty Activity pada dialog New Project dan klik Next.

   - Beri nama proyek Dice Roller.

   - Pilih Minimum SDK level 24 (Nougat) dan klik Finish.

Pratinjau Proyek

1. Setelah proyek dibuat, klik Build & Refresh untuk melihat pratinjau proyek di panel Design.

Mengubah Struktur Kode Contoh

1. Hapus fungsi DefaultPreview().

2. Buat fungsi DiceWithButtonAndImage() dengan anotasi @Composable.

3. Hapus fungsi Greeting(name: String).

4. Buat fungsi DiceRollerApp() dengan anotasi @Preview dan @Composable.

Modifikasi Kode

1. Dalam metode onCreate(), kosongkan lambda setContent{}.

2. Di dalam lambda setContent{}, pertama panggil lambda DiceRollerTheme{}, dan dalamnya panggil fungsi DiceRollerApp().

3. Di dalam DiceRollerApp(), panggil fungsi DiceWithButtonAndImage().

Menambahkan Modifiers

1. Modifikasi fungsi DiceWithButtonAndImage() untuk menerima argumen modifier dengan tipe Modifier, dengan nilai default Modifier.

2. Saat memanggil fungsi DiceWithButtonAndImage(), lewatkan objek Modifier untuk menambahkan dekorasi, seperti fillMaxSize() dan wrapContentSize() dengan Alignment.Center.

Membuat Tata Letak Vertikal

1. Di dalam DiceWithButtonAndImage(), tambahkan fungsi Column().

2. Teruskan argumen modifier dari DiceWithButtonAndImage() ke Column().

3. Tentukan horizontalAlignment menjadi Alignment.CenterHorizontally.

Menambahkan Tombol

1. Tambahkan string "Roll" di strings.xml.

2. Di dalam Column(), tambahkan Button() dengan Text() menggunakan stringResource().

Mendownload Gambar Dadu

1. Unduh dan ekstrak file gambar dadu.

2. Buat folder dice_images dan simpan enam file gambar dadu di dalamnya.

Menambahkan Gambar Dadu ke Aplikasi

1. Buka Resource Manager di Android Studio.

2. Import enam folder gambar dadu.

Menambahkan Composable Image

1. Di dalam Column(), buat fungsi Image() sebelum Button().

2. Sertakan painterResource() dengan ID resource drawable yang sesuai, dan contentDescription dengan nilai yang menjelaskan gambar.

Berikut ini adalah code di Android Studio. Jangan lupa di AnroidManifest.xml, ubah label sesuai dengan strings.xml, yaitu Roll.

package com.example.dicerollerapplication

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.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
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.dp
import androidx.compose.ui.unit.sp
import com.example.dicerollerppb_b.R
import com.example.dicerollerppb_b.ui.theme.DiceRollerPPBBTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceRollerPPBBTheme {
                // A surface container using the 'background' color from the theme
                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)
        }
    }
}

Referensi : Membuat aplikasi Dice Roller interaktif  |  Android Developers

Link Github : KobamYo/Dice_Roller_PPB-B (github.com)