Tugas 3
Nama : Heru Dwi Kurniawan
NRP : 5025211055
Kelas : PBB B
Interactive Button "Dice Roller" App
Membuat Proyek
1. Mulai dengan membuat proyek baru di Android Studio dengan langkah-langkah berikut:
- Buka Android Studio dan pilih File > New > New Project.
- Pilih opsi Empty Activity dalam dialog New Project dan lanjutkan dengan mengklik Next.
- Beri nama proyek Anda sebagai Dice Roller.
- Pilih tingkat API minimum 24 (Nougat) pada kolom Minimum SDK dan klik Finish untuk menyelesaikan pembuatan proyek.
Pratinjau Proyek
1. Setelah proyek dibuat, klik Build & Refresh untuk melihat pratinjau proyek di panel Split atau Design.
Mengubah Struktur Kode Contoh
1. Mulai dengan menghapus fungsi DefaultPreview() yang tidak diperlukan.
2. Selanjutnya, buatlah fungsi DiceWithButtonAndImage() dan tandai dengan anotasi @Composable.
3. Fungsi Greeting(name: String) tidak dibutuhkan, jadi Anda bisa menghapusnya.
4. Buatlah fungsi DiceRollerApp() dan tandai dengan anotasi @Preview dan @Composable.
5. Di dalam metode onCreate(), hapus semua kode di dalam lambda setContent{}.
6. Di dalam lambda setContent{}, panggil lambda DiceRollerTheme{} terlebih dahulu, dan di dalamnya panggil fungsi DiceRollerApp().
7. Dalam fungsi DiceRollerApp(), panggil fungsi DiceWithButtonAndImage().
Menambahkan Modifiers
1. Modifikasi fungsi DiceWithButtonAndImage() agar menerima argumen modifier dengan tipe Modifier, dan tetapkan nilai default Modifier.
2. Setelah melakukan modifikasi agar fungsi DiceWithButtonAndImage() menerima parameter modifier, pastikan untuk meneruskannya saat memanggil fungsi tersebut. Sekarang, untuk memanggil fungsi ini, Anda perlu melewati objek Modifier yang akan menambahkan dekorasi sesuai kebutuhan. Kelas Modifier bertanggung jawab atas dekorasi pada komposable dalam fungsi DiceRollerApp(). Dalam konteks ini, objek Modifier harus dilewatkan saat memanggil fungsi DiceWithButtonAndImage(), sehingga Anda dapat menambahkan dekorasi yang diinginkan.
3. Gunakan metode fillMaxSize() pada objek Modifier untuk mengisi seluruh layar.
4. Setelahnya, tambahkan metode wrapContentSize() pada objek Modifier dan tentukan Alignment.Center sebagai argumen untuk melakukan pemusatannya secara vertikal dan horizontal.
Membuat Tata Letak Vertikal
1. Di dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column().
2. Teruskan argumen modifier dari tanda tangan metode DiceWithButtonAndImage() ke argumen modifier Column().
3. Sertakan argumen horizontalAlignment ke dalam fungsi Column() dan atur nilainya menjadi Alignment.CenterHorizontally.
Menambahkan Tombol
1. Di file strings.xml, tambahkan string dengan nilai Roll.
2. Di dalam lambda Column(), tambahkan fungsi Button().
3. Di dalam file MainActivity.kt, tambahkan fungsi Text() ke dalam Button() di dalam lambda fungsi.
4. Gunakan ID resource string untuk string roll dengan memanggil fungsi stringResource(), dan sertakan hasilnya ke dalam komposable Text.
Mendownload Gambar Dadu
1. Mulailah dengan mengunduh file zip gambar dadu dari URL yang diberikan, dan ekstrak file tersebut untuk membuat folder dice_images yang akan berisi enam file gambar dadu dengan nilai dadu dari 1 hingga 6.
Menambahkan Gambar Dadu ke Aplikasi
1. Buka Android Studio dan navigasikan ke View > Tool Windows > Resource Manager.
2. Klik tombol + > Import Drawables untuk membuka penjelajah file.
3. Pilih dan unggah enam folder gambar dadu.
4. Lanjutkan dengan mengklik Next, dan kemudian konfirmasi impor gambar dadu dengan mengklik Import.
Menambahkan Composable Image
1. Di dalam fungsi Column(), buatlah fungsi Image() sebelum fungsi Button().
2. Sertakan argumen painter pada fungsi Image(), dan atur nilainya menjadi painterResource dengan ID resource drawable yang sesuai. Untuk saat ini, gunakan ID resource R.drawable.dice_1.
3. Jangan lupa tambahkan argumen contentDescription dengan nilai 1 untuk menjelaskan gambar yang ditampilkan.
Hasil :
package com.example.diceroller
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.diceroller.ui.theme.DiceRollerTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
DiceRollerTheme {
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)
}
}
}
Komentar
Posting Komentar