Tugas 4: Interactive Button "Dice
Tugas 4
Interactive Button "Dice Roller" App
Nama : Rycahaya Sri Hutomo
NRP : 5025201046
Kelas : Pemrograman Perangkat Bergerak B
Tahun : 2024
Membuat Project
1. Di Android Studio, klik File > New > New Project.
2. Dalam dialog New Project, pilih Empty Activity, lalu klik Next.
3. Di kolom Name, masukkan Dice Roller.
4. Di kolom Minimum SDK, pilih API level minimum 24 (Nougat) dari menu, lalu klik Finish.
Melihat Pratinjau Project
Klik Build & Refresh di panel Split atau 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.
5. Hapus semua kode di dalam lambda setContent{} yang ditemukan dalam metode onCreate().
6. Di bagian lambda setContent{}, panggil lambda DiceRollerTheme{}, lalu di dalam lambda DiceRollerTheme{}, panggil fungsi DiceRollerApp().
7. Di fungsi DiceRollerApp(), panggil fungsi DiceWithButtonAndImage().
Menambahkan Pengubah
1. Ubah fungsi DiceWithButtonAndImage() untuk menerima argumen modifier dari jenis Modifier dan tetapkan nilai default Modifier.
3. Buat rantai metode fillMaxSize() ke objek Modifier sehingga tata letak mengisi seluruh layar.
4. Buat rantai metode wrapContentSize() ke objek Modifier, lalu teruskan 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 DiceWithImageAndButton() ke argumen pengubah Column().
3. Teruskan argumen horizontalAlignment ke fungsi Column(), lalu 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 isi lambda Column(), tambahkan fungsi Button().
3. Di file MainActivity.kt, tambahkan fungsi Text() ke Button() dalam isi 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 file browser.
3. Temukan dan pilih enam folder gambar dadu, lalu lanjutkan untuk menguploadnya.
Dialog Import Drawables akan muncul dan menampilkan lokasi file resource berada 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(), lalu tetapkan nilai painterResource yang menerima argumen ID resource drawable. Untuk saat ini, teruskan ID resource berikut: argumen R.drawable.dice_1.
3. tambahkan argumen contentDescription dengan nilai 1.
4. Untuk memperbaikinya, tambahkan composable Spacer di antara composable Button dan Image. Spacer menggunakan Modifier sebagai parameter. Dalam hal ini, Image berada di atas Button sehingga harus ada spasi vertikal di antara keduanya. Oleh karena itu, tinggi Modifier dapat disetel agar berlaku untuk Spacer. Coba tetapkan tinggi ke 16.dp. Biasanya, dimensi dp diubah dengan kelipatan 4.dp.
2. Di panel Preview, klik Build & Refresh.
Membuat Tombol Menjadi Interaktif
1. Pada fungsi DiceWithButtonAndImage() sebelum fungsi Column(), buat variabel result dan tetapkan agar sama dengan nilai 1.
2. Lihat composable Button. Anda akan melihat parameter onClick yang ditetapkan ke sepasang tanda kurung kurawal dengan komentar /*TODO*/ di dalam kurung kurawal. Dalam hal ini kurung kurawal mewakili lambda, area di dalam kurung kurawal yang menjadi badan lambda. Jika diteruskan sebagai argumen, fungsi juga dapat disebut sebagai "callback".
3. Dalam fungsi Button(), hapus komentar /*TODO*/ dari nilai isi lambda parameter onClick.
4. Lemparan dadu bersifat acak. Untuk menunjukkan hal itu dalam kode, Anda perlu menggunakan sintaksis yang benar untuk menghasilkan angka acak. Di Kotlin, Anda dapat menggunakan metode random() pada rentang nomor. Dalam isi lambda onClick, tetapkan variabel result ke rentang antara 1 hingga 6, lalu panggil metode random() pada rentang tersebut. Ingat bahwa dalam Kotlin, rentang ditentukan oleh dua titik antara angka pertama dalam rentang dan angka terakhir dalam rentang.
Menambahkan Kondisional ke Aplikasi Dice Roller
1. Ubah variabel result menjadi composable remember.
2. Dalam isi composable remember, teruskan fungsi mutableStateOf(), lalu teruskan argumen 1 ke fungsi tersebut.
3. Di bawah pembuatan instance variabel result, buat variabel imageResource tetap yang ditetapkan ke ekspresi when yang menerima variabel result, lalu tetapkan setiap kemungkinan hasil ke drawable-nya.
4. Ubah ID yang diteruskan ke parameter painterResource composable Image dari drawable R.drawable.dice_1 ke variabel imageResource.
5. Ubah parameter contentDescription composable Image untuk mencerminkan nilai variabel result dengan mengonversi variabel result menjadi string dengan toString() dan meneruskannya sebagai contentDescription.
Hasil Akhir
Jalankan aplikasi Dice Roller.
Source Code
Referensi
- https://kuliahppb.blogspot.com/2024/03/komponen-button.html
- 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
Komentar
Posting Komentar