Dasar-Dasar Android Kotlin 01.2: Anatomi aplikasi dasar

Codelab ini adalah bagian dari kursus Dasar-Dasar Android Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan. Semua codelab kursus tercantum di halaman landing codelab Dasar-Dasar Android Kotlin.

Pengantar

Sejauh ini Anda telah menyiapkan semuanya dan Android Studio telah membuat banyak kode untuk Anda. Sebelum Anda mengubah semua kode tersebut, penting untuk mengetahui apa yang baru saja Anda buat dan cara menavigasi file sumber aplikasi Android.

Dalam codelab ini, Anda akan mempelajari lebih lanjut komponen utama aplikasi Android dan menambahkan interaktivitas sederhana ke aplikasi dengan tombol.

Yang harus sudah Anda ketahui

• Cara menginstal dan membuka Android Studio.
• Cara membuat project aplikasi baru.
• Cara menjalankan aplikasi di emulator atau perangkat fisik.

Yang akan Anda pelajari

• Cara mengedit file tata letak aplikasi.
• Cara membuat aplikasi dengan perilaku interaktif.
• Banyak istilah baru. Lihat Glosarium Kosakata untuk penjelasan istilah dan konsep yang mudah dipahami.

Yang akan Anda lakukan

• Jelajahi file Kotlin MainActivity dan file tata letak aktivitas.
• Edit tata letak aktivitas di XML.
• Tambahkan elemen Button ke tata letak aktivitas.
• Ekstrak string yang di-hardcode ke dalam file resource string.
• Terapkan metode click-handler untuk menampilkan pesan di layar saat pengguna mengetuk Button.

Dalam codelab ini, Anda akan membuat project aplikasi baru bernama DiceRoller dan menambahkan interaktivitas dasar dengan tombol. Setiap kali tombol diklik, nilai teks yang ditampilkan akan berubah. Aplikasi DiceRoller akhir untuk codelab ini akan terlihat seperti ini:

Dalam codelab terakhir, Anda telah mempelajari bagian utama project aplikasi, termasuk direktori java dan res. Dalam tugas ini, Anda akan berfokus pada dua file terpenting yang membentuk aplikasi Anda: File Kotlin MainActivity dan file tata letak activity_main.xml.

Langkah 1: Periksa MainActivity

MainActivity adalah contoh Activity. Activity adalah class inti Android yang menggambar antarmuka pengguna (UI) aplikasi Android dan menerima peristiwa input. Saat diluncurkan, aplikasi Anda akan meluncurkan aktivitas yang ditentukan dalam file AndroidManifest.xml.

Banyak bahasa pemrograman menentukan metode utama yang memulai program. Aplikasi Android tidak memiliki metode utama. Sebagai gantinya, file AndroidManifest.xml menunjukkan bahwa MainActivity harus diluncurkan saat pengguna mengetuk ikon peluncur aplikasi. Untuk meluncurkan aktivitas, Android OS menggunakan informasi dalam manifes untuk menyiapkan lingkungan aplikasi dan membuat MainActivity. Kemudian, MainActivity melakukan beberapa penyiapan secara bergiliran.

Setiap aktivitas memiliki file tata letak terkait. Aktivitas dan tata letak dihubungkan oleh proses yang dikenal sebagai inflasi tata letak. Saat aktivitas dimulai, tampilan yang ditentukan dalam file tata letak XML diubah menjadi (atau "di-inflate" menjadi) objek tampilan Kotlin dalam memori. Setelah ini terjadi, aktivitas dapat menggambar objek ini ke layar dan juga memodifikasinya secara dinamis.

1. Di Android Studio, pilih File > New > New Project untuk membuat project baru. Gunakan Empty activity, lalu klik Next.
2. Panggil project DiceRoller, dan verifikasi semua nilai lainnya untuk nama project dan lokasi project. Pastikan "Gunakan Artefak AndroidX" dicentang. Klik Selesai.
   
   
   
3. Di panel Project > Android, luaskan java > com.example.android.diceroller. Klik dua kali MainActivity. Editor kode menampilkan kode di MainActivity.
   
   
   
4. Di bawah nama paket dan pernyataan impor adalah deklarasi class untuk MainActivity. Class MainActivity memperluas AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

AppCompatActivity adalah subclass Activity yang mendukung semua fitur Android modern sekaligus memberikan kompatibilitas mundur dengan versi Android yang lebih lama. Agar aplikasi Anda tersedia untuk sebanyak mungkin perangkat dan pengguna, selalu gunakan AppCompatActivity.

5. Perhatikan metode onCreate(). Aktivitas tidak menggunakan konstruktor untuk melakukan inisialisasi objek. Sebagai gantinya, serangkaian metode yang telah ditentukan sebelumnya (disebut "metode siklus proses") dipanggil sebagai bagian dari penyiapan aktivitas. Salah satu metode siklus proses tersebut adalah onCreate(), yang selalu Anda ganti di aplikasi Anda sendiri. Anda akan mempelajari lebih lanjut metode siklus proses dalam codelab berikutnya.
   
   Di onCreate(), Anda menentukan tata letak mana yang terkait dengan aktivitas, dan Anda akan mem-inflate tata letak. Metode setContentView() melakukan kedua hal tersebut.
   

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

Metode setContentView() mereferensikan tata letak menggunakan R.layout.activity_main, yang sebenarnya merupakan referensi bilangan bulat. Class R dibuat saat Anda membangun aplikasi. Class R mencakup semua aset aplikasi, termasuk konten direktori res.

Dalam hal ini, R.layout.activity_main merujuk pada class R yang dihasilkan, folder layout, dan file tata letak activity_main.xml. (Referensi tidak menyertakan ekstensi file.) Anda akan merujuk ke banyak resource aplikasi (termasuk gambar, string, dan elemen dalam file tata letak) menggunakan referensi serupa di class R.

Langkah 2: Periksa dan jelajahi file tata letak aplikasi

Semua aktivitas di aplikasi Anda memiliki file tata letak terkait di direktori res/layout aplikasi. File tata letak adalah file XML yang menyatakan tampilan sebenarnya suatu aktivitas. File tata letak melakukan hal ini dengan menentukan tampilan dan menentukan tempat tampilan muncul di layar.

Tampilan adalah hal-hal seperti teks, gambar, dan tombol yang memperluas class View. Ada banyak jenis tampilan, termasuk TextView, Button, ImageView, dan CheckBox.

Dalam tugas ini, Anda akan memeriksa dan mengubah file tata letak aplikasi.

1. Di panel Project > Android, luaskan res > layout lalu klik dua kali activity_main.xml. Editor desain tata letak akan terbuka. Android Studio menyertakan editor ini, yang memungkinkan Anda membuat tata letak aplikasi secara visual dan melihat pratinjau desain tata letak. Anda akan mempelajari editor desain lebih lanjut di codelab berikutnya.
2. Untuk melihat file tata letak sebagai XML, klik tab Text di bagian bawah jendela.
   
   
   
3. Hapus semua kode XML yang ada di editor tata letak. Tata letak default yang Anda dapatkan dengan project baru adalah titik awal yang baik jika Anda menggunakan editor desain Android Studio. Untuk pelajaran ini, Anda akan bekerja dengan XML dasar untuk membuat tata letak baru dari awal.
4. Salin dan tempel kode ini ke tata letak:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Sekarang, periksa kode:

1. Elemen tingkat teratas atau root tata letak adalah elemen <LinearLayout>. Tampilan LinearLayout adalah ViewGroup. Grup tampilan adalah penampung yang menyimpan tampilan lain dan membantu menentukan posisi tampilan di layar.
   
   Semua tampilan dan grup tampilan yang Anda tambahkan ke tata letak diatur dalam hierarki tampilan, dengan elemen XML paling atas sebagai root hierarki tersebut. Tampilan root dapat berisi tampilan dan kelompok tampilan lain, dan kelompok tampilan yang disertakan dapat berisi tampilan dan kelompok tampilan lain. Saat aplikasi Anda menjalankan hierarki tampilan dalam file tata letak XML, hierarki tersebut akan menjadi hierarki objek saat tata letak di-inflate. Dalam hal ini, kelompok tampilan root adalah tata letak linear, yang mengatur tampilan turunannya secara linear, satu demi satu (baik secara vertikal maupun horizontal).
   
   Root default yang Anda dapatkan untuk project Android baru adalah ConstraintLayout, yang berfungsi dengan baik dalam koordinasi dengan editor desain. Untuk aplikasi ini, Anda menggunakan grup tampilan LinearLayout, yang lebih sederhana daripada tata letak batasan. Anda akan mempelajari lebih lanjut grup tampilan dan tata letak batasan di pelajaran berikutnya.
2. Di dalam tag LinearLayout, perhatikan atribut android:layout_width. Lebar LinearLayout ini ditetapkan ke match parent, yang membuatnya memiliki lebar yang sama dengan induknya. Karena ini adalah tampilan root, tata letak akan diperluas ke lebar penuh layar.
3. Perhatikan atribut android:layout_height, yang ditetapkan ke wrap_content. Atribut ini membuat tinggi LinearLayout cocok dengan tinggi gabungan dari semua tampilan yang ada di dalamnya, yang untuk saat ini hanya TextView.
4. Periksa elemen <TextView>. TextView ini, yang menampilkan teks, adalah satu-satunya elemen visual di aplikasi DiceRoller Anda. Atribut android:text menyimpan string sebenarnya yang akan ditampilkan, dalam hal ini string "Hello World!"
5. Perhatikan atribut android:layout_width dan android:layout_height dalam elemen <TextView>, yang keduanya ditetapkan ke wrap_content. Konten tampilan teks adalah teks itu sendiri, sehingga tampilan hanya akan menempati ruang yang diperlukan untuk teks.

Aplikasi pelempar dadu tidak terlalu berguna tanpa cara bagi pengguna untuk melempar dadu dan melihat hasil lemparannya. Untuk memulai, tambahkan tombol ke tata letak untuk mengocok dadu, dan tambahkan teks yang menampilkan nilai dadu yang dikocok pengguna.

Langkah 1: Tambahkan tombol ke tata letak

1. Tambahkan elemen Button ke tata letak di bawah tampilan teks dengan memasukkan <Button, lalu tekan Return. Blok Button yang berakhir dengan /> dan menyertakan atribut layout_width dan layout_height akan muncul.

<Button
   android:layout_width=""
   android:layout_height="" />

2. Tetapkan atribut layout_width dan layout_height ke "wrap_content". Dengan nilai ini, tombol memiliki lebar dan tinggi yang sama dengan label teks yang dikandungnya.
3. Tambahkan atribut android:text ke tombol, dan beri nilai "Roll". Elemen Tombol sekarang terlihat seperti ini:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

Untuk tampilan Button, atribut text adalah label tombol. Di editor tata letak, atribut disorot dengan warna kuning, yang menunjukkan tips atau peringatan. Dalam hal ini, penyorotan kuning terjadi karena string "Roll" di-hardcode dalam label tombol, tetapi string tersebut seharusnya berupa resource. Anda akan mempelajari resource string di bagian berikutnya.

Langkah 2: Ekstrak resource string

Daripada melakukan hardcode string dalam file tata letak atau kode, sebaiknya masukkan semua string aplikasi Anda ke dalam file terpisah. File ini disebut strings.xml, dan terletak di antara resource aplikasi, di direktori res/values/.

Dengan memiliki string dalam file terpisah, Anda dapat mengelolanya dengan lebih mudah, terutama jika Anda menggunakan string ini lebih dari sekali. Selain itu, resource string wajib ada untuk menerjemahkan dan melokalkan aplikasi Anda, karena Anda perlu membuat file resource string untuk setiap bahasa.

Android Studio membantu Anda mengingat untuk menempatkan string ke dalam file resource dengan petunjuk dan peringatan.

1. Klik sekali string "Roll" di atribut android:text dari tag <Button>.
2. Tekan Alt+Enter (Option+Enter di macOS) dan pilih Extract string resource dari menu pop-up.
3. Masukkan roll_label untuk Nama resource.
4. Klik Oke. Resource string dibuat dalam file res/values/string.xml, dan string dalam elemen Button diganti dengan referensi ke resource tersebut:
   android:text="@string/roll_label"
5. Di panel Project > Android, luaskan res > values, lalu klik dua kali strings.xml untuk melihat resource string Anda di file strings.xml:

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

Tips: Selain string yang baru saja Anda tambahkan, file strings.xml juga menyertakan nama aplikasi. Nama aplikasi muncul di panel aplikasi di bagian atas layar jika Anda memulai project aplikasi menggunakan Template Kosong. Anda dapat mengubah nama aplikasi dengan mengedit resource app_name.

Langkah 3: Menata gaya dan memosisikan tampilan

Tata letak Anda kini berisi satu tampilan TextView dan satu tampilan Button. Dalam tugas ini, Anda akan mengatur tampilan dalam grup tampilan agar terlihat lebih menarik.

1. Klik tab Desain untuk melihat pratinjau tata letak. Saat ini, kedua tampilan berdampingan dan didorong ke bagian atas layar.
   
   
   
2. Klik tab Text untuk kembali ke editor XML. Tambahkan atribut android:orientation ke tag LinearLayout, dan beri nilai "vertical". Elemen <LinearLayout> sekarang akan terlihat seperti ini:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

Grup tampilan LinearLayout memosisikan tampilan yang dikandungnya satu demi satu dalam satu baris, baik secara horizontal dalam baris, atau secara vertikal dalam tumpukan. Horizontal adalah defaultnya. Karena Anda ingin TextView ditumpuk di atas Button, Anda menetapkan orientasi ke vertikal. Sekarang desainnya akan terlihat seperti ini, dengan tombol di bawah teks:

3. Tambahkan atribut android:layout_gravity ke TextView dan Button, lalu beri nilai "center_horizontal". Hal ini akan menyelaraskan kedua tampilan di sepanjang bagian tengah sumbu horizontal. Elemen TextView dan Button sekarang akan terlihat seperti ini:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

4. Tambahkan atribut android:layout_gravity ke tata letak linear, dan beri nilai "center_vertical". Elemen LinearLayout Anda sekarang akan terlihat seperti ini:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

Catatan: Jika Anda menambahkan gravitasi center_vertical ke tombol dan tampilan teks (bukan center_horizontal), kedua tampilan akan ditempatkan di tengah tata letak secara horizontal dan vertikal. Artinya, tampilan berada di atas satu sama lain.

Untuk memusatkan semua elemen turunan sekaligus, gunakan center_vertical pada induk (elemen LinearLayout), seperti yang ditunjukkan di atas.

5. Untuk memperbesar ukuran teks dalam tampilan teks, tambahkan atribut android:textSize ke elemen <TextView> dengan nilai "30sp". Singkatan sp adalah piksel yang dapat diskalakan, yang merupakan ukuran untuk menentukan ukuran teks secara terpisah dari kualitas tampilan perangkat. Elemen TextView sekarang akan terlihat seperti ini:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

6. Kompilasikan dan jalankan aplikasi Anda.
   
   
   

Sekarang teks dan tombol ditempatkan dengan baik, dan ada teks yang lebih besar di tampilan teks. Tombol ini belum memiliki fungsi apa pun, jadi tidak ada yang terjadi saat Anda mengkliknya. Anda akan mengerjakannya nanti.

Langkah 4: Dapatkan referensi ke tombol dalam kode

Kode Kotlin di MainActivity bertanggung jawab untuk menentukan bagian interaktif aplikasi Anda, seperti apa yang terjadi saat Anda mengetuk tombol. Untuk menulis fungsi yang dijalankan saat tombol diklik, Anda harus mendapatkan referensi ke objek Tombol dalam tata letak yang di-inflate di MainActivity. Untuk mendapatkan referensi ke tombol:

• Tetapkan ID Button dalam file XML.
• Gunakan metode findViewById() dalam kode Anda untuk mendapatkan referensi ke View dengan ID tertentu.

Setelah memiliki referensi ke tampilan Button, Anda dapat memanggil metode pada tampilan tersebut untuk mengubahnya secara dinamis saat aplikasi berjalan. Misalnya, Anda dapat menambahkan pengendali klik yang menjalankan kode saat tombol diketuk.

1. Buka file tata letak activity_main.xml, jika belum terbuka, lalu klik tab Text.
2. Tambahkan atribut android:id ke tombol, dan beri nama (dalam hal ini, "@+id/roll_button"). Elemen <Button> Anda sekarang terlihat seperti ini:

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

Saat Anda membuat ID untuk tampilan dalam file tata letak XML, Android Studio akan membuat konstanta bilangan bulat dengan nama ID tersebut dalam class R yang dihasilkan. Jadi, jika Anda memberi nama tampilan roll_button, Android Studio akan membuat dan menghasilkan konstanta bilangan bulat bernama roll_button di class R. Awalan "@+id" untuk nama ID memberi tahu compiler agar menambahkan konstanta ID tersebut ke class R. Semua ID tampilan di file XML Anda harus memiliki awalan ini.

3. Buka file Kotlin MainActivity. Di dalam onCreate(), setelah setContentView(), tambahkan baris ini:

val rollButton: Button = findViewById(R.id.roll_button)

Gunakan metode findViewById() untuk mendapatkan referensi View untuk tampilan yang Anda tentukan di class XML. Dalam hal ini, Anda mendapatkan referensi Button dari class R dan ID roll_button, lalu menetapkan referensi tersebut ke variabel rollButton.

Catatan: Jika Anda mengetik baris tersebut, bukan menyalin dan menempelkannya, Anda akan melihat bahwa Android Studio memberikan petunjuk pelengkapan otomatis untuk nama ID setelah Anda mulai mengetik.

4. Perhatikan bahwa Android Studio menandai class Button dengan warna merah dan menggarisbawahinya, untuk menunjukkan bahwa class tersebut adalah referensi yang belum terselesaikan dan Anda perlu mengimpor class ini sebelum dapat menggunakannya. Tooltip yang menunjukkan nama class yang sepenuhnya memenuhi syarat juga dapat muncul:
   
   
   
5. Tekan Alt+Enter (Option+Enter di Mac), untuk menerima nama class yang sepenuhnya memenuhi syarat.

Tips: Anda dapat mengonfigurasi Android Studio untuk otomatis menambahkan pernyataan impor untuk class jika artinya tidak ambigu. Panel setelan untuk Editor > General >Auto Import menentukan cara penanganan impor.

Langkah 5: Tambahkan pengendali klik untuk menampilkan toast

Click handler adalah metode yang dipanggil setiap kali pengguna mengklik atau mengetuk elemen UI yang dapat diklik, seperti tombol. Untuk membuat pengendali klik, Anda memerlukan:

• Metode yang melakukan beberapa operasi.
• Metode setOnClickHandler(), yang menghubungkan Button ke metode handler.

Dalam tugas ini, Anda akan membuat metode click-handler untuk menampilkan Toast. (Toast adalah pesan yang muncul di layar dalam waktu singkat.) Anda menghubungkan metode click-handler ke Button.

1. Di class MainActivity setelah onCreate(), buat fungsi pribadi yang disebut rollDice().

private fun rollDice() {
  
}

2. Tambahkan baris ini ke metode rollDice() untuk menampilkan Toast saat rollDice() dipanggil:

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

Untuk membuat toast, panggil metode Toast.makeText(). Metode ini memerlukan tiga hal:

• Objek Context. Objek Context memungkinkan Anda berkomunikasi dengan dan mendapatkan informasi tentang status Android OS saat ini. Anda memerlukan Context di sini agar objek Toast dapat memberi tahu OS untuk menampilkan toast. Karena AppCompatActivity adalah subclass dari Context, Anda cukup menggunakan kata kunci this untuk konteksnya.
• Pesan yang akan ditampilkan, di sini "button clicked".
• durasi untuk menampilkan pesan. Metode show() di akhir akan menampilkan toast.

3. Di onCreate(), setelah panggilan ke findViewById(), tambahkan baris ini untuk menetapkan rollDice() sebagai handler klik ke objek rollButton:

rollButton.setOnClickListener { rollDice() }

Definisi lengkap class MainActivity Anda sekarang terlihat seperti ini:

class MainActivity : AppCompatActivity() {

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

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

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

4. Kompilasi dan jalankan aplikasi Anda. Setiap kali Anda mengetuk tombol, toast akan muncul.

Dalam tugas ini, Anda akan mengubah metode rollDice() untuk mengubah teks di TextView. Untuk langkah pertama, Anda mengubah teks tersebut dari "Hello World!" menjadi string "Dice Rolled!". Untuk langkah kedua, Anda menampilkan angka acak antara satu dan enam.

Langkah 1: Menampilkan string

1. Buka activity_main.xml, lalu tambahkan ID ke TextView.

android:id="@+id/result_text"

2. Buka MainActivity. Dalam metode rollDice(), jadikan baris sebagai komentar untuk menampilkan Toast.
3. Gunakan metode findViewById() untuk mendapatkan referensi ke TextView berdasarkan ID-nya. Tetapkan referensi ke variabel resultText.

val resultText: TextView = findViewById(R.id.result_text)

4. Tetapkan string baru ke properti resultText.text untuk mengubah teks yang ditampilkan. Anda dapat mengabaikan petunjuk untuk mengekstrak string tersebut ke dalam resource; ini hanyalah string sementara.

resultText.text = "Dice Rolled!"

5. Kompilasi dan jalankan aplikasi. Perhatikan bahwa mengetuk tombol Roll kini memperbarui TextView.

Langkah 2: Menampilkan angka acak

Terakhir, dalam tugas ini Anda menambahkan keacakan pada klik tombol, untuk menyimulasikan lemparan dadu. Setiap kali tombol diklik atau diketuk, kode Anda akan memilih angka acak dari 1 hingga 6 dan memperbarui TextView. Tugas pembuatan angka acak tidak khusus untuk Android, dan Anda menggunakan class Random untuk melakukannya.

1. Di bagian atas metode rollDice(), gunakan metode Random.nextInt() untuk mendapatkan angka acak antara 1 dan 6:

val randomInt = Random().nextInt(6) + 1

2. Tetapkan properti text ke nilai bilangan bulat acak, sebagai string:

resultText.text = randomInt.toString()

3. Kompilasi dan jalankan aplikasi. Setiap kali Anda mengetuk tombol Roll, angka di tampilan teks akan berubah.

Project Android Studio: DiceRoller

Catatan: Semua tantangan coding bersifat opsional.

Tantangan: Tambahkan tombol kedua ke aplikasi berlabel "Hitung Naik" yang muncul tepat di bawah tombol Lempar. Saat diketuk, tombol Count Up akan mendapatkan nilai saat ini dari tampilan teks hasil, menambahkan 1 ke nilai tersebut, dan memperbarui tampilan teks. Pastikan Anda menangani kasus tepi berikut:

• Jika tampilan teks hasil belum berisi angka (yaitu, jika tampilan teks masih memiliki string "Hello World" default), tetapkan teks hasil ke 1.
• Jika angkanya sudah 6, tidak perlu melakukan apa pun.

Tips: String dalam tampilan TextView adalah instance class CharSequence. Untuk menguji nilainya, Anda perlu mengonversinya menjadi string:

resultText.text.toString()

Kode solusi tantangan coding

Project Android Studio: DiceRoller-challenge

Aktivitas

• MainActivity adalah subclass dari AppCompatActivity, yang pada gilirannya merupakan subclass dari Activity. Activity adalah class inti Android yang bertanggung jawab untuk menggambar UI aplikasi Android dan menerima peristiwa input.
• Semua aktivitas memiliki file tata letak terkait, yang merupakan file XML di resource aplikasi. File tata letak diberi nama sesuai aktivitas, misalnya activity_main.xml.
• Metode setContentView() di MainActivity mengaitkan tata letak dengan aktivitas, dan meng-inflate tata letak tersebut saat aktivitas dibuat.
• Inflasi tata letak adalah proses saat tampilan yang ditentukan dalam file tata letak XML diubah menjadi (atau "di-inflate" menjadi) objek tampilan Kotlin dalam memori. Setelah inflasi tata letak terjadi, Activity dapat menggambar objek ini ke layar dan memodifikasinya secara dinamis.

Tampilan

• Semua elemen UI dalam tata letak aplikasi adalah subclass dari class View dan disebut tampilan. TextView dan Button adalah contoh penayangan.
• Elemen View dapat dikelompokkan di dalam ViewGroup. Grup tampilan bertindak sebagai penampung untuk tampilan, atau grup tampilan lain, di dalamnya. LinearLayout adalah contoh grup tampilan yang mengatur tampilannya secara linear.

Lihat atribut

• Atribut android:layout_width dan android:layout_height menunjukkan bobot dan tinggi tampilan. Nilai match_parent meregangkan tampilan ke lebar atau tinggi induknya. Nilai wrap_content akan mengecilkan tampilan agar sesuai dengan konten tampilan.
• Atribut android:text menunjukkan teks yang harus ditampilkan tampilan (jika tampilan tersebut menampilkan teks). Untuk tombol, android:text adalah label tombol.
• Atribut android:orientation dalam grup tampilan LinearLayout mengatur elemen tampilan yang dikandungnya. Nilai horizontal akan mengatur tampilan dari kiri ke kanan. Nilai vertical mengatur tampilan dari atas ke bawah.
• Atribut android:layout_gravity menentukan penempatan tampilan dan semua turunan tampilan tersebut.
• Atribut android:textSize menentukan ukuran teks dalam tampilan teks. Ukuran teks ditentukan dalam satuan sp (piksel yang dapat diskalakan). Dengan menggunakan satuan sp, Anda dapat mengatur ukuran teks secara terpisah dari kualitas tampilan perangkat.

String

• Daripada melakukan hardcode string dalam tata letak, sebaiknya gunakan resource string.
• Resource string terdapat dalam file values/res/string.xml.
• Untuk mengekstrak string, gunakan Alt+Enter (Option+Enter di Mac). Pilih Extract string resources dari menu pop-up.

Menggunakan tampilan

• Untuk menghubungkan kode Kotlin ke tampilan yang Anda tentukan dalam tata letak, Anda perlu mendapatkan referensi ke objek tampilan setelah tampilan di-inflate. Tetapkan ID (android:id) ke tampilan dalam tata letak, lalu gunakan metode findViewById() untuk mendapatkan objek tampilan terkait.
• Saat Anda membuat ID untuk tampilan dalam file tata letak XML, Android Studio akan membuat konstanta bilangan bulat dengan nama ID tersebut dalam class R yang dihasilkan. Kemudian, Anda dapat menggunakan referensi R.id tersebut dalam metode findViewById().
• Anda dapat menetapkan atribut objek tampilan dalam kode Kotlin secara langsung berdasarkan nama properti. Misalnya, teks dalam tampilan teks ditentukan oleh atribut android:text di XML, dan ditentukan oleh properti text di Kotlin.
• Pemroses klik adalah metode yang dipanggil saat pengguna mengklik atau mengetuk elemen UI. Untuk melampirkan metode click-handler ke tampilan seperti tombol, gunakan metode setOnClickListener().

Menggunakan toast

Toast adalah tampilan yang menampilkan pesan sederhana kepada pengguna dalam jendela pop-up kecil.

Untuk membuat toast, panggil metode factory makeText() pada class Toast dengan tiga argumen:

• Konteks aplikasi Activity
• Pesan yang akan ditampilkan, misalnya resource string
• Durasi, misalnya Toast.LENGTH_SHORT

Untuk menampilkan toast, panggil show().

Kursus Udacity:

• Mengembangkan Aplikasi Android dengan Kotlin

Dokumentasi developer Android:

• Mengenal Android Studio
• Tata Letak
• View
• Button
• TextView
• Ringkasan resource aplikasi
• Ringkasan peristiwa input
• findViewById()
• setOnClickListener()
• Context

Lainnya:

• Glosarium kata dan konsep kosakata

Bagian ini mencantumkan kemungkinan tugas pekerjaan rumah untuk siswa yang mengerjakan codelab ini sebagai bagian dari kursus yang dipimpin oleh instruktur. Instruktur menentukan hal berikut:

• Memberikan pekerjaan rumah jika diperlukan.
• Memberi tahu siswa cara mengirimkan tugas pekerjaan rumah.
• Memberi nilai tugas pekerjaan rumah.

Instruktur bisa menggunakan saran ini sesuai kebutuhan, dan bebas menugaskan pekerjaan rumah lain yang dirasa cocok.

Jika Anda menyelesaikan codelab ini sendiri, gunakan tugas pekerjaan rumah ini untuk menguji pengetahuan Anda.

Mengubah aplikasi

Buka aplikasi DiceRoller. Tambahkan tombol ke aplikasi berlabel "Reset" yang muncul tepat di bawah tombol Roll. Buat tombol tersebut menyetel ulang tampilan teks hasil ke 0.

Jawab pertanyaan-pertanyaan berikut

Pertanyaan 1

Metode apa saja di Activity yang meng-inflate tata letak aplikasi dan membuat tampilannya tersedia sebagai objek?

• onCreate()
• setClickListener()
• setContentView()
• show()

Pertanyaan 2

Atribut tampilan mana yang Anda gunakan untuk menyetel lebar tampilan, agar dapat disesuaikan dengan konten?

• android:view_width="wrap"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"

Mengirimkan aplikasi Anda untuk dinilai

Periksa untuk memastikan aplikasi memiliki hal berikut:

• Tata letak aplikasi harus menyertakan satu tampilan teks dan dua tombol.
• Kode aplikasi harus menetapkan dua pengendali klik, satu untuk setiap tombol.
• Handler klik yang mereset tampilan teks harus menyetel properti teks ke 0.

Mulai pelajaran berikutnya: 1.3 Resource dan kompatibilitas gambar

Untuk link ke codelab lain dalam kursus ini, lihat halaman landing codelab Dasar-Dasar Android Kotlin.