Interactive Button "Dice Roller" App

Nama : Nadya Zuhria Amana

Kelas : PBB B

NRP : 5025211058

Membuat Proyek

1. Di Android Studio, klik File > New > New Project.

2. Dalam dialog New Project, pilih Empty Activity, lalu klik Next.

3. Pada kolom Nama, masukkan Dice Roller.

4. Pada kolom Minimum SDK, pilih tingkat API minimum 24 (Nougat) dari menu, lalu klik Finish.

Melihat Pratinjau Proyek

Klik Build & Refresh di panel Split atau Design.

Pratinjau di panel Design akan muncul seperti berikut.

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.

5. Hapus semua kode di dalam lambda setContent{} yang ditemukan dalam metode onCreate().

6. Dalam lambda setContent{}, panggil lambda DiceRollerTheme{}, kemudian dalam lambda DiceRollerTheme{}, panggil fungsi DiceRollerApp().

7. Dalam fungsi DiceRollerApp(), panggil fungsi DiceWithButtonAndImage().

Menambahkan Modifiers

1. Modifikasi fungsi DiceWithButtonAndImage() agar menerima argumen modifier berjenis Modifier dan tetapkan nilai default Modifier.

2. Setelah komposable DiceWithButtonAndImage() memiliki parameter modifier, lewatkan modifier saat komposable dipanggil. Tanda tangan metode untuk fungsi DiceWithButtonAndImage() berubah sehingga sebuah objek Modifier dengan dekorasi yang diinginkan harus dilewatkan saat dipanggil. Kelas Modifier bertanggung jawab atas dekorasi, atau penambahan perilaku, pada komposable dalam fungsi DiceRollerApp(). Dalam hal ini, ada beberapa dekorasi penting yang dapat ditambahkan ke objek Modifier yang dilewatkan ke fungsi DiceWithButtonAndImage().

3. Buat rantai metode fillMaxSize() ke objek Modifier agar tata letak mengisi seluruh layar.

4. Buat rantai metode wrapContentSize() ke objek Modifier, kemudian lewatkan Alignment.Center sebagai argumen untuk memusatkan komponen. Alignment.Center menentukan bahwa komponen dipusatkan secara vertikal dan horizontal.

Membuat Tata Letak Vertikal

1. Dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column().

2. Teruskan argumen modifier dari tanda tangan metode DiceWithButtonAndImage() ke argumen modifier Column().

3. Teruskan argumen horizontalAlignment ke fungsi Column(), kemudian tetapkan ke nilai Alignment.CenterHorizontally.

Menambahkan Tombol

1. Di file strings.xml, tambahkan string dan tetapkan ke nilai Roll.

res/values/strings.xml

2. Dalam lambda Column(), tambahkan fungsi Button().

3. Di file MainActivity.kt, tambahkan fungsi Text() ke Button() dalam lambda fungsi.

4. Teruskan ID resource string dari string roll ke fungsi stringResource() dan teruskan hasilnya ke composable Text.

Mendownload Gambar Dadu

1. Buka URL ini untuk mendownload file zip gambar dadu ke komputer, lalu tunggu download selesai.

2. Ekstrak file zip untuk membuat folder dice_images baru yang berisi enam file gambar dadu dengan nilai dadu dari 1 sampai 6.

Menambahkan Gambar Dadu ke Aplikasi

1. Di Android Studio, klik View > Tool Windows > Resource Manager.

2. Klik + > Import Drawables untuk membuka penjelajah file.

3. Temukan dan pilih enam folder gambar dadu, kemudian lanjutkan untuk mengunggahnya.

Gambar yang diunggah akan muncul sebagai berikut.

4. Klik Next.

Dialog Import Drawables akan muncul dan menampilkan lokasi file sumber daya di struktur file.

5. Klik Import untuk mengonfirmasi bahwa Anda ingin mengimpor enam gambar.

Menambahkan Composable Image

1. Pada isi fungsi Column(), buat fungsi Image() sebelum fungsi Button().

2. Teruskan argumen painter ke fungsi Image(), kemudian tetapkan nilai ke painterResource yang menerima argumen ID resource drawable. Untuk saat ini, lewatkan argumen ID resource berikut: R.drawable.dice_1.

3. tambahkan argumen contentDescription dengan nilai 1.

MainActivity.kt

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

DiceRollerTheme {

// A surface container using the 'background' color from the theme

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)

}

Penjelasan Code :

1. Kelas MainActivity: Kelas ini merupakan aktivitas utama dari aplikasi. Pada metode `onCreate`, layout utama aplikasi diatur menggunakan Jetpack Compose. Di sinilah tema yang diberikan oleh `DiceRollerTheme` digunakan untuk menampilkan komponen-komponen UI.

2. DiceRollerApp: Fungsi ini merupakan komposisi utama dari aplikasi. Ini dipasangkan dengan anotasi `@Preview` yang membuatnya bisa dilihat dalam pratinjau desain Android Studio. `DiceRollerApp` memanggil fungsi `DiceWithButtonAndImage` untuk menampilkan gambar dadu dan tombol.

3. DiceWithButtonAndImage: Fungsi ini mengatur tata letak untuk menampilkan gambar dadu dan tombol. Gambar dadu akan diubah secara acak setiap kali tombol ditekan. Variabel `result` disimpan menggunakan `mutableStateOf` untuk mempertahankan keadaan. Gambar dadu yang ditampilkan dipilih berdasarkan nilai `result`. Terdapat penggunaan fungsi `when` untuk menentukan gambar dadu mana yang harus ditampilkan berdasarkan nilai `result`. Komponen-komponen UI, seperti `Image` untuk gambar dadu dan `Button` untuk tombol, ditempatkan di dalam `Column` untuk tata letak vertikal yang sesuai.

Dokumentasi :