Menambahkan gambar ke aplikasi Dice Roller

1. Sebelum memulai

Perhatian: Codelab ini sudah tidak berlaku dan tidak lagi dikelola. Sebagai gantinya, lihat kursus Dasar-Dasar Android dengan Compose untuk praktik terbaru yang direkomendasikan.

Di codelab ini, Anda akan menambahkan gambar dadu ke aplikasi Android Dice Roller yang sudah ada. Pastikan Anda sudah menyelesaikan codelab sebelumnya terlebih dahulu dalam pembangunan dasar aplikasi Dice Roller.

Alih-alih menampilkan nilai lemparan dadu dalam TextView, aplikasi Anda akan menampilkan gambar dadu yang sesuai untuk jumlah sisi yang dilempar. Pengalaman pengguna di aplikasi Anda akan menjadi lebih visual dan ditingkatkan.

Anda akan disediakan link untuk mendownload gambar dadu, lalu menambahkannya sebagai resource di aplikasi Anda. Anda akan menggunakan pernyataan when di Kotlin untuk menulis kode yang akan digunakan gambar dadu.

Prasyarat

• Menyelesaikan codelab Membuat aplikasi Dice Roller interaktif.
• Dapat menulis pernyataan alur kontrol (pernyataan if / else, when).
• Dapat mengupdate UI dari aplikasi berdasarkan input pengguna (mengubah file MainActivity.kt).
• Dapat menambahkan pemroses klik ke Button.
• Dapat menambahkan resource gambar ke aplikasi Android.

Yang akan Anda pelajari

• Cara mengupdate ImageView saat aplikasi berjalan.
• Cara menyesuaikan perilaku aplikasi berdasarkan kondisi yang berbeda (menggunakan pernyataan when).

Yang akan Anda build

• Aplikasi Android Dice Roller yang memiliki Button untuk melempar dadu dan memperbarui gambar di layar.

Yang Anda perlukan

• Komputer yang dilengkapi Android Studio.
• Koneksi internet untuk mendownload gambar dadu.

2. Memperbarui tata letak aplikasi

Dalam tugas ini, Anda akan mengganti TextView di tata letak dengan ImageView yang menampilkan gambar hasil lempar dadu.

Membuka aplikasi Dice Roller

1. Buka dan jalankan aplikasi Dice Roller dari codelab sebelumnya di Android Studio. Anda dapat menggunakan kode solusi atau kode yang sudah Anda buat.

Aplikasinya akan terlihat seperti ini.

2. Buka activity_main.xml (app > res > layout > activity_main.xml). Langkah ini akan membuka Layout Editor.

Menghapus TextView

1. Di Layout Editor, pilih TextView di Component Tree.

Tips: Saat Anda memperbanyak komponen UI dan menambah serta menghapus batasan, Anda mungkin menemukan satu View yang tumpang-tindih dengan komponen lainnya untuk sementara, sehingga sulit untuk memilih komponen di belakangnya. Dalam kasus ini, Anda dapat memilih View di Component Tree.

2. Klik kanan dan pilih Delete atau tekan tombol Delete.
3. Abaikan peringatan di Button untuk saat ini. Anda akan memperbaikinya di langkah berikutnya.

Menambahkan ImageView ke tata letak

1. Tarik ImageView dari Palette ke tampilan Design, lalu posisikan gambar di atas Button.

2. Dalam dialog Pick a Resource, pilih avatar di bagian Sample data. Ini adalah gambar sementara yang akan Anda gunakan sampai Anda menambahkan gambar dadu di tugas berikutnya.

3. Tekan OK. Tampilan Design dari aplikasi akan terlihat seperti ini.

4. Dalam Component Tree, Anda akan melihat dua tanda error. Button tidak dibatasi secara vertikal, dan ImageView tidak dibatasi baik secara vertikal maupun horizontal.

Button tidak dibatasi secara vertikal karena Anda menghapus TextView yang awalnya berada di atasnya. Sekarang Anda perlu memosisikan ImageView dan Button di bawahnya.

Memosisikan ImageView dan Button

Anda perlu memusatkan ImageView secara vertikal di layar, di mana pun lokasi Button.

1. Tambahkan batasan horizontal ke ImageView. Hubungkan sisi kiri ImageView ke tepi kiri induk ConstraintLayout.
2. Hubungkan sisi kanan ImageView ke tepi kanan induk. Tindakan ini akan memusatkan ImageView secara horizontal dalam induk.

3. Tambahkan batasan vertikal ke ImageView yang menghubungkan bagian atas ImageView ke bagian atas induk. ImageView akan bergeser ke atas ConstraintLayout.

4. Tambahkan batasan vertikal ke Button yang menghubungkan bagian atas Button ke bagian bawah ImageView. Button akan bergeser ke atas di bawah ImageView.

5. Pilih lagi ImageView dan tambahkan batasan vertikal yang menghubungkan bagian bawah ImageView ke bagian bawah induk. Tindakan ini akan memusatkan ImageView secara vertikal di ConstraintLayout.

Semua peringatan terkait batasan seharusnya kini sudah hilang.

Setelah itu, tampilan Design akan terlihat seperti ini, dengan ImageView berada di tengah dan Button tepat berada di bawahnya.

Anda mungkin melihat peringatan di ImageView pada Component Tree mengenai penambahan deskripsi konten ke ImageView. Untuk saat ini, jangan khawatir tentang peringatan tersebut karena nanti dalam codelab, Anda akan menyetel deskripsi konten ImageView berdasarkan gambar dadu yang akan ditampilkan. Perubahan ini akan dibuat di kode Kotlin.

3. Menambahkan gambar dadu

Dalam tugas ini, Anda akan mendownload beberapa gambar dadu dan menambahkannya ke aplikasi.

Mendownload gambar dadu

1. Buka URL ini untuk mendownload file zip gambar dadu ke komputer. Tunggu download selesai.
2. Temukan file di komputer Anda (mungkin di folder Downloads).
3. Klik dua kali pada file zip untuk mengekstraknya. Cara tersebut akan membuat folder dice_images baru yang memuat 6 file gambar dadu, yang menampilkan nilai dadu dari 1 sampai 6.

Menambahkan gambar dadu ke aplikasi Anda

1. Di Android Studio, klik View > Tool Windows > Resource Manager di menu atau klik tab Resource Manager di sebelah kiri jendela Project.
2. Klik tanda + yang ada di bawah Resource Manager, lalu pilih Import Drawables. Tindakan ini akan membuka file browser.

3. Cari dan pilih 6 file gambar dadu. Anda dapat memilih file pertama, lalu pilih file lainnya sambil menahan tombol Shift.
4. Klik Open.
5. Klik Next, lalu Import untuk mengonfirmasi bahwa Anda ingin mengimpor 6 resource ini.

6. Jika file berhasil diimpor, 6 gambar akan muncul dalam Resource Manager (app>res>drawable) untuk aplikasi Anda.

Bagus! Pada tugas berikutnya, Anda akan menggunakan gambar-gambar tersebut di aplikasi.

Penting! - Anda akan dapat melihat gambar-gambar tersebut di kode Kotlin dengan ID resource:

• R.drawable.dice_1
• R.drawable.dice_2
• R.drawable.dice_3
• R.drawable.dice_4
• R.drawable.dice_5
• R.drawable.dice_6

4. Menggunakan gambar dadu

Mengganti contoh gambar avatar

1. Di Design Editor, pilih ImageView.
2. Di Attributes pada bagian Declared Attributes, cari alat atribut srcCompat yang disetel ke gambar avatar.

Perlu diingat bahwa alat atribut srcCompat menggunakan gambar yang tersedia hanya dalam tampilan Design Android Studio. Gambar hanya ditampilkan kepada developer saat Anda membuat aplikasi, tetapi tidak akan terlihat saat Anda benar-benar menjalankan aplikasi di emulator atau di perangkat.

3. Klik pratinjau kecil avatar. Lalu akan terbuka sebuah dialog untuk memilih resource baru yang akan digunakan untuk ImageView ini.

4. Pilih drawable dice_1 dan klik OK.

Wow! ImageView mengisi seluruh layar.

Selanjutnya, Anda akan menyesuaikan lebar dan tinggi ImageView sehingga tidak menyembunyikan Button.

5. Di jendela Attributes bagian Constraint Widget, temukan atribut layout_width dan layout_height. Keduanya saat ini disetel ke wrap_content, artinya ImageView akan setinggi dan selebar konten (gambar sumber) di dalamnya.
6. Sebagai gantinya, setel lebar tetap sebesar 160 dp dan tinggi tetap sebesar 200 dp pada ImageView. Tekan Enter.

ImageView sekarang menjadi jauh lebih kecil.

Anda mungkin mendapati bahwa Button terlalu dekat dengan gambar.

7. Tambahkan margin atas ke tombol 16dp dengan menyetelnya di Constraint Widget.

Setelah tampilan Design diperbarui, aplikasi akan terlihat jauh lebih baik!

Catatan: Gunakan piksel kepadatan mandiri (dp) sebagai unit untuk menentukan dimensinya sehingga ukuran gambar diskalakan dengan tepat di perangkat dengan resolusi piksel yang berbeda.

Mengubah gambar dadu saat tombol diklik

Tata letak telah diperbaiki, tetapi untuk menggunakan gambar dadu, class MainActivity perlu diupdate.

Saat ini terdapat error di aplikasi dalam file MainActivity.kt. Jika Anda mencoba menjalankan aplikasi, Anda akan melihat error build ini:

Hal ini karena kode Anda masih mengacu ke TextView yang telah dihapus dari tata letak.

1. Buka MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)

Kode mengacu ke R.id.textView, tetapi Android Studio tidak mengenalinya.

2. Dalam metode rollDice(), pilih kode apa pun yang mengacu ke TextView lalu hapus kode tersebut.

// Update the TextView with the dice roll
val resultTextView: TextView = findViewById(R.id.textView)
resultTextView.text = dice.roll().toString()

3. Masih di rollDice(), buat variabel baru dengan nama diceImage dari jenis ImageView. Setel variabel baru tersebut setara dengan ImageView dari tata letak. Gunakan metode findViewById() dan masukkan ID resource untuk ImageView, R.id.imageView, sebagai argumen input.

val diceImage: ImageView = findViewById(R.id.imageView)

Jika Anda ingin mengetahui cara menemukan ID resource yang tepat dari ImageView, periksa id di bagian atas jendela Attributes.

Saat mengacu ke ID resource ini di kode Kotlin, pastikan Anda mengetikkannya dengan sama persis (huruf i kecil, huruf V besar, tanpa spasi). Jika tidak, Android Studio akan menampilkan error.

4. Tambahkan baris kode ini untuk menguji bahwa Anda dapat mengupdate ImageView dengan benar saat tombol diklik. Lemparan dadu tidak selalu berupa angka "2", tetapi cukup gunakan gambar dice_2 untuk tujuan pengujian.

diceImage.setImageResource(R.drawable.dice_2)

Kode ini memanggil metode setImageResource() di ImageView yang meneruskan ID resource untuk gambar dice_2. Tindakan ini akan memperbarui ImageView di layar untuk menampilkan gambar dice_2.

Metode rollDice() akan terlihat seperti ini sekarang:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val diceImage: ImageView = findViewById(R.id.imageView)
    diceImage.setImageResource(R.drawable.dice_2)
}

5. Jalankan aplikasi untuk memverifikasi bahwa aplikasi berjalan tanpa error. Aplikasi harus dimulai dengan layar kosong kecuali untuk tombol Roll.

Setelah Anda mengetuk tombol tersebut, gambar dadu yang menampilkan nilai 2 akan muncul. Bagus!!

Anda dapat mengubah gambar berdasarkan ketukan tombol. Anda hampir selesai!

5. Menampilkan gambar dadu yang benar berdasarkan lemparan dadu

Jelas sekali bahwa hasil dadu tidak selalu berupa angka 2. Gunakan logika alur kontrol yang Anda pelajari di codelab Menambahkan Perilaku Kondisional untuk Berbagai Lemparan Dadu sehingga gambar dadu yang sesuai akan ditampilkan di layar bergantung pada dadu yang dilempar secara acak.

Sebelum Anda mulai mengetik kode, pikirkan secara konseptual tentang bagaimana aplikasi seharusnya berperilaku dengan menulis beberapa kode semu yang menjelaskan apa yang harus terjadi. Contoh:

Jika pengguna melempar angka 1, tampilkan gambar dice_1.

Jika pengguna melempar angka 2, tampilkan gambar dice_2.

dll...

Catatan: Kode Semu adalah deskripsi informal mengenai cara kerja beberapa kode. Kode ini menggunakan beberapa elemen bahasa komputer seperti if / else yang dapat menjelaskan berbagai hal dengan cara yang dapat dipahami manusia. Hal ini dapat berguna untuk rencana yang diambil dengan pendekatan yang tepat sebelum semua detail telah ditentukan.

Kode semu di atas dapat ditulis dengan pernyataan if / else di Kotlin berdasarkan angka lemparan dadu.

if (diceRoll == 1) {
   diceImage.setImageResource(R.drawable.dice_1)
} else if (diceRoll == 2) {
   diceImage.setImageResource(R.drawable.dice_2)
}
 ...

Namun, penulisan if / else untuk setiap kasusnya cukup repetitif. Logika yang sama dapat diekspresikan lebih mudah dengan pernyataan when. Lebih ringkas (sedikit kode), bukan? Gunakan pendekatan ini di aplikasi Anda.

when (diceRoll) {
   1 -> diceImage.setImageResource(R.drawable.dice_1)
   2 -> diceImage.setImageResource(R.drawable.dice_2)
   ...

Memperbarui metode rollDice()

1. Dalam metode rollDice(), hapus baris kode yang setiap kali menyetel ID resource gambar ke gambar dice_2.

diceImage.setImageResource(R.drawable.dice_2)

2. Ganti baris kode tersebut dengan pernyataan when yang memperbarui ImageView berdasarkan nilai diceRoll.

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

Setelah Anda selesai melakukan perubahan, metode rollDice() akan terlihat seperti ini.

private fun rollDice() {
   val dice = Dice(6)
   val diceRoll = dice.roll()

   val diceImage: ImageView = findViewById(R.id.imageView)

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }
}

3. Jalankan aplikasi. Dengan mengklik tombol Roll, Anda akan mengubah gambar dadu ke angka lain selain angka 2. Berhasil!

Mengoptimalkan kode

Jika ingin menulis kode yang lebih ringkas, Anda dapat membuat perubahan kode berikut. Perubahan ini tidak memiliki dampak yang terlihat bagi pengguna aplikasi Anda, tetapi akan membuat kode menjadi lebih pendek dan memiliki lebih sedikit pengulangan.

Anda mungkin telah melihat panggilan ke diceImage.setImageResource() yang muncul 6 kali dalam pernyataan "when".

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
}

Satu-satunya hal yang berubah di antara setiap kasus adalah ID resource yang sedang digunakan. Artinya, Anda dapat membuat variabel untuk menyimpan ID resource yang akan digunakan. Selanjutnya, Anda dapat memanggil diceImage.setImageResource() hanya sekali di kode Anda dan meneruskan ID resource yang benar.

1. Ganti kode di atas dengan kode berikut.

val drawableResource = when (diceRoll) {
   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
   6 -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

Konsep baru di sini merupakan ekspresi when yang sebenarnya dapat menampilkan nilai. Dengan cuplikan kode baru ini, ekspresi when menunjukkan ID resource yang benar, yang kemudian akan disimpan di variabel drawableResource. Selanjutnya Anda dapat menggunakan variabel tersebut untuk mengupdate resource gambar yang ditampilkan.

2. Perhatikan bahwa sekarang when digarisbawahi dengan warna merah. Jika Anda mengarahkan pointer ke atasnya, Anda akan melihat pesan error: ‘when' expression must be exhaustive, add necessary ‘else' branch.

Error terjadi karena nilai ekspresi when ditetapkan ke drawableResource, sehingga when harus lengkap — ekspresi ini harus menangani semua kemungkinan kasus sehingga nilai selalu ditampilkan, meskipun Anda mengubah ke dadu 12 sisi. Android Studio menyarankan penambahan cabang else. Anda dapat memperbaikinya dengan mengubah kasus untuk 6 menjadi else. Kasus untuk 1 sampai 5 adalah sama, tetapi semua kasus lainnya termasuk 6 ditangani oleh else.

val drawableResource = when (diceRoll) {
   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
}

diceImage.setImageResource(drawableResource)

3. Jalankan aplikasi untuk memastikan aplikasi masih berfungsi dengan benar. Pastikan mengujinya dengan cukup untuk memastikan bahwa Anda melihat semua angka yang muncul dengan gambar dadu 1 sampai 6.

Menyetel deskripsi konten yang sesuai pada ImageView

Setelah Anda mengganti angka yang dilempar dengan gambar, pembaca layar tidak dapat lagi mengetahui angka yang dilempar. Setelah mengupdate resource gambar, perbarui juga deskripsi konten ImageView untuk memperbaikinya. Deskripsi konten harus berupa deskripsi teks terkait apa yang ditampilkan di ImageView agar pembaca layar dapat mendeskripsikannya.

diceImage.contentDescription = diceRoll.toString()

Pembaca layar dapat membaca deskripsi konten ini secara lisan, sehingga jika lemparan dadu berupa gambar "6" muncul di layar, deskripsi konten akan dibacakan angka "6" secara lisan.

Catatan: Biasanya, deskripsi konten harus menggunakan resource string yang dapat diterjemahkan ke dalam bahasa lain, tapi kita akan membahasnya dalam pelajaran berikutnya.

6. Menerapkan praktik coding yang baik

Menciptakan pengalaman peluncuran yang lebih bermanfaat

Saat pengguna membuka aplikasi untuk pertama kalinya, aplikasi tersebut kosong (kecuali tombol Roll), yang akan terlihat aneh. Pengguna mungkin tidak mengetahui apa yang akan terjadi, jadi ubahlah UI untuk menampilkan lemparan dadu secara acak saat Anda memulai aplikasi pertama kali dan buatlah Activity. Kemudian, pengguna cenderung lebih memahami bahwa mengetuk tombol Roll akan menghasilkan sebuah lemparan dadu.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val rollButton: Button = findViewById(R.id.button)
    rollButton.setOnClickListener { rollDice() }

    // Do a dice roll when the app starts
    rollDice()
}

Memberikan Komentar pada Kode Anda

Tambah beberapa komentar pada kode untuk mendeskripsikan peristiwa yang terjadi dalam kode yang Anda tulis.

Setelah Anda membuat semua perubahan ini, seperti inilah tampilan metode rollDice() Anda.

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {
    // Create new Dice object with 6 sides and roll the dice
    val dice = Dice(6)
    val diceRoll = dice.roll()

    // Find the ImageView in the layout
    val diceImage: ImageView = findViewById(R.id.imageView)

    // Determine which drawable resource ID to use based on the dice roll
    val drawableResource = when (diceRoll) {
        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
    }

    // Update the ImageView with the correct drawable resource ID
    diceImage.setImageResource(drawableResource)

    // Update the content description
    diceImage.contentDescription = diceRoll.toString()
}

Untuk file MainActivity.kt lengkap, lihat kode solusi di GitHub yang terhubung di langkah berikutnya.

Selamat, Anda telah menyelesaikan aplikasi Dice Roller! Sekarang Anda dapat menghadirkan aplikasi ini ke malam pertandingan berikutnya bersama teman-teman Anda!

7. Kode solusi

Kode solusi untuk codelab ini berada dalam project dan modul yang ditampilkan di bawah ini.

URL Kode Solusi: https://github.com/google-developer-training/android-basics-kotlin-dice-roller-with-images-app-solution

Untuk mendapatkan kode yang dipakai pada codelab ini dan membukanya di Android Studio, lakukan hal berikut.

Mendapatkan kode

1. Klik URL yang diberikan. Tindakan ini akan membuka halaman GitHub project di browser.
2. Di halaman GitHub project, klik tombol Code yang akan menampilkan dialog.

3. Di dialog, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
4. Temukan file di komputer Anda (mungkin di folder Downloads).
5. Klik dua kali pada file ZIP untuk mengekstraknya. Tindakan ini akan membuat folder baru yang berisi file project.

Membuka project di Android Studio

1. Mulai Android Studio.
2. Di jendela Welcome to Android Studio, klik Open an existing Android Studio project.

Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > New > Import Project.

3. Di dialog Import Project, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
4. Klik dua kali pada folder project tersebut.
5. Tunggu Android Studio membuka project.
6. Klik tombol Run untuk membangun dan menjalankan aplikasi. Pastikan aplikasi dibangun seperti yang diharapkan.
7. Cari file project di jendela alat Project untuk melihat cara aplikasi disiapkan.

8. Ringkasan

• Gunakan setImageResource() untuk mengubah gambar yang ditampilkan di ImageView
• Gunakan pernyataan alur kontrol seperti ekspresi if / else atau when untuk menangani berbagai kasus di aplikasi Anda, misalnya, menampilkan gambar yang berbeda pada kasus yang berbeda.

9. Mempelajari lebih lanjut

• Glosarium Kotlin Android
• Ekspresi if di Kotlin
• Ekspresi when di Kotlin
• ImageView.setImageResource()
• Aksesibilitas

10. Berlatih sendiri

Catatan: Latihan bersifat opsional. Dengan latihan, Anda bisa mempraktikkan ilmu yang telah Anda pelajari dalam codelab ini.

Lakukan hal berikut:

1. Tambahkan dadu lain ke aplikasi, sehingga satu tombol Roll memberikan 2 hasil dadu. Berapa banyak ImageViews yang akan Anda butuhkan dalam tata letak? Bagaimana pengaruhnya terhadap kode MainActivity.kt?

Periksa hasil kerja Anda:

Aplikasi Anda yang sudah selesai seharusnya berjalan tanpa error dan menampilkan dua dadu.