Tugas 4 Dice Roller App

Pada kesempatan kali ini saya akan berlatih membuat aplikasi interaktif dice roller app menggunakan jetpack compose dengan kotlin untuk tata letak aplikasi. Dari pembuatan aplikasi ini akan belajar tentang:

• 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. 

1.Pertama kita membuat project bernama dice roller pada android studio.

2. Kedua adalah dengan membuat tata letak aplikasi dengan cara sebagai berikut:

• Klik Build & Refresh di panel Split atau Design, setelah muncul greeting preview pada panel desain yang bertuliskan "Hello Android!" kita akan mengubah tata letak nya.
• Rubah struktur kode pada file bernama MainActivity.kt Sebagai berikut:
• Hapus fungsi DefaultPreview().
• Buat fungsi DiceWithButtonAndImage() dengan anotasi @Composable.
• Hapus fungsi Greeting(name: String).
• Buat fungsi DiceRollerApp() dengan anotasi @Preview dan @Composable.

• Hapus semua kode di dalam lambda setContent{} yang ditemukan dalam metode onCreate().
• Di bagian lambda setContent{}, panggil lambda DiceRollerTheme{}, lalu di dalam lambda DiceRollerTheme{}, panggil fungsi DiceRollerApp()

• Di fungsi DiceRollerApp(), panggil fungsi DiceWithButtonAndImage()

           

3. Selanjutnya kita tambahkan pengubah, Compose menggunakan objek Modifier yang merupakan kumpulan elemen yang mendekorasi atau mengubah perilaku elemen UI Compose. Anda menggunakannya untuk menata gaya komponen UI dari komponen aplikasi Dice Roller.

• Pada MainActivity.kt ubah fungsi DiceWithButtonAndImage() untuk menerima argumen modifier dari jenis Modifier dan tetapkan nilai default Modifier.

          

• Setelah composable DiceWithButtonAndImage() memiliki parameter pengubah, teruskan pengubah saat composable dipanggil. Tanda tangan metode untuk fungsi DiceWithButtonAndImage() mengalami perubahan sehingga objek Modifier dengan dekorasi yang diinginkan harus diteruskan saat dipanggil. Class Modifier bertanggung jawab atas dekorasi, atau penambahan perilaku, pada composable di fungsi DiceRollerApp(). Dalam hal ini, ada beberapa dekorasi penting yang dapat ditambahkan ke objek Modifier yang diteruskan ke fungsi DiceWithButtonAndImage().

      

• Buat rantai metode fillMaxSize() ke objek Modifier sehingga tata letak mengisi seluruh layar.

• 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.

4. Membuat tata letak vertikal.

Di Compose, tata letak vertikal dibuat dengan fungsi Column(). Fungsi Column() adalah tata letak composable yang menempatkan turunannya dalam urutan vertikal. Di desain aplikasi yang diharapkan, Anda dapat melihat bahwa gambar dadu ditampilkan secara vertikal di atas tombol lempar:

• Dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column().
• Teruskan argumen modifier dari tanda tangan metode DiceWithImageAndButton() ke argumen pengubah Column().
• Teruskan argumen horizontalAlignment ke fungsi Column(), lalu tetapkan ke nilai Alignment.CenterHorizontally.

        

5. Menambahkan tombol

• Di file strings.xml, tambahkan string dan tetapkan ke nilai Roll
<string name="roll">Roll</string>
• Dalam isi lambda Column(), tambahkan fungsi Button().
• Di file MainActivity.kt, tambahkan fungsi Text() ke Button() dalam isi lambda fungsi.
• Teruskan ID resource string dari string roll ke fungsi stringResource() dan teruskan hasilnya ke composable Text.

6. Menambahkan gambar.

• Buka URL ini untuk mendownload file zip gambar dadu ke komputer, lalu tunggu download selesai.
• Ekstrak file zip untuk membuat folder dice_images baru yang berisi enam file gambar dadu dengan nilai dadu dari 1 sampai 6.
• Di Android Studio, klik View > Tool Windows > Resource Manager.
• Klik + > Import Drawables untuk membuka file browser.
• Temukan dan pilih enam folder gambar dadu, lalu lanjutkan untuk menguploadnya.
• Klik Next.
• Klik Import untuk mengonfirmasi bahwa Anda ingin mengimpor enam gambar.

7. Menambahkan composable image.

• Pada isi fungsi Column(), buat fungsi Image() sebelum fungsi Button()

• 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.

Kini semua komponen UI yang diperlukan sudah ada. Namun, Button dan Image sedikit saling bersinggungan.

• 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. >> Spacer(modifier = Modifier.height(16.dp))

• Di panel Preview, klik Build & Refresh.

7. Selanjutnya membuat logika pelemparan dadu dapat di ikuti melalui tutorial berikut.

Kode lengkap pada MainActivity.kt

Hasil Run App: