Membuat tata letak XML untuk Android

1. Sebelum memulai

Dalam codelab ini, Anda akan membuat tata letak untuk aplikasi dasar kalkulator tip. Di akhir codelab, aplikasi yang Anda buat akan memiliki UI yang berfungsi, tetapi belum benar-benar menghitung tip. Membuat aplikasi berjalan dan terlihat lebih profesional akan dibahas dalam codelab berikut.

Prasyarat

• Dapat membuat dan menjalankan aplikasi Android dari template di Android Studio

Yang akan Anda pelajari

• Cara membaca dan menulis tata letak XML di Android
• Cara membuat tata letak untuk formulir sederhana yang akan mengambil input teks dan pilihan pengguna

Yang akan Anda build

• UI untuk aplikasi Android kalkulator tip

Yang Anda perlukan

• Komputer yang diinstal Android Studio versi stabil terbaru
• Koneksi internet untuk mengakses dokumentasi developer Android

2. Memulai project

Lihat kalkulator tip di Google: https://www.google.com/search?q=tip+calculator

Dalam kursus ini, Anda akan mem-build kalkulator tip versi sederhana sebagai aplikasi Android.

Developer sering kali akan menggunakan cara ini—menyiapkan aplikasi versi sederhana dan berfungsi sebagian (meskipun terlihat tidak bagus), kemudian membuatnya berfungsi sepenuhnya dan ditingkatkan secara visual nanti.

Di akhir codelab ini, aplikasi kalkulator tip Anda akan terlihat seperti ini:

Anda akan menggunakan elemen UI yang telah disediakan oleh Android:

• EditText - untuk memasukkan dan mengedit teks
• TextView - untuk menampilkan teks, seperti pertanyaan layanan dan jumlah tip
• RadioButton - tombol pilihan yang dapat dipilih untuk setiap opsi tip
• RadioGroup - untuk mengelompokkan opsi tombol pilihan
• Switch - tombol pengalih aktif/nonaktif untuk memilih apakah akan membulatkan tip atau tidak

Membuat project Empty Activity

1. Untuk memulai, buat project Kotlin baru di Android Studio menggunakan template Empty Activity.
2. Sebut aplikasinya "Tip Time" dengan API level minimum 19 (KitKat). Nama paket untuk aplikasi ini adalah com.example.tiptime.

3. Klik Finish untuk membuat aplikasi.

3. Membaca dan memahami XML

Daripada menggunakan Layout Editor yang sudah biasa Anda gunakan, Anda akan mem-build tata letak aplikasi dengan memodifikasi XML yang menjelaskan UI. Sebagai seorang developer Android, penting bagi Anda untuk mempelajari cara memahami dan mengubah tata letak UI menggunakan XML.

Anda akan melihat, dan mengedit file XML yang mendefinisikan tata letak UI untuk aplikasi ini. XML adalah singkatan dari eXtensible Markup Language yang merupakan cara menggambarkan data menggunakan dokumen berbasis teks. XML memiliki karakteristik dapat diperluas dan sangat fleksibel sehingga banyak digunakan untuk berbagai hal, seperti mendefinisikan tata letak UI aplikasi Android. Anda mungkin dapat mengingat dari codelab sebelumnya bahwa resource lain seperti string untuk aplikasi Anda juga ditentukan dalam file XML yang disebut strings.xml.

UI untuk aplikasi Android di-build sebagai hierarki containment komponen (widget) dan tata letak komponen di layar. Perhatikan bahwa tata letak itu sendiri adalah komponen UI.

Anda akan menjelaskan hierarki tampilan elemen UI di layar. Misalnya, ConstraintLayout (induk) dapat berisi Buttons, TextViews, ImageViews, atau tampilan lain (turunan). Ingat, ConstraintLayout adalah subclass dari ViewGroup. Ini memungkinkan Anda menentukan posisi atau ukuran tampilan turunan dengan cara yang fleksibel.

Hierarki containment aplikasi Android

Setiap elemen UI diwakili oleh elemen XML di file XML. Setiap elemen dimulai dan diakhiri dengan tag, dan setiap tag diawali dengan < dan diakhiri dengan >. Seperti Anda yang dapat menyetel atribut pada elemen UI menggunakan Layout Editor (desain), elemen XML juga dapat memiliki berbagai atribut. Sederhananya, XML untuk elemen UI di atas mungkin seperti ini:

<ConstraintLayout>
    <TextView
        text="Hello World!">
    </TextView>
</ConstraintLayout>

Mari lihat satu contoh spesifik.

1. Buka activity_main.xml (res > layout > activity_main.xml).
2. Anda mungkin melihat aplikasi menampilkan TextView bertuliskan "Hello World!" dalam ConstraintLayout, seperti yang telah Anda lihat di project sebelumnya yang dibuat dari template ini.

3. Temukan opsi untuk tampilan Code, Split, dan Design di kanan atas Layout Editor.
4. Pilih tampilan Code.

Seperti inilah tampilan XML di activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Akan ada lebih banyak daripada yang ada di dalam contoh yang disederhanakan, tetapi Android Studio melakukan beberapa hal untuk mempermudah pembacaan XML, seperti halnya kode Kotlin Anda.

5. Perhatikan indentasinya. Android Studio melakukan hal ini secara otomatis untuk menunjukkan hierarki elemen. TextView diindentasi karena terdapat dalam ConstraintLayout. ConstraintLayout adalah induk, dan TextView adalah turunan. Atribut setiap elemen diindentasi untuk menunjukkan bahwa atribut itu merupakan bagian dari elemen tersebut.
6. Perhatikan coding warna—beberapa berwarna biru, sebagian berwarna hijau, dan sebagainya. Bagian file yang serupa digambar dengan warna yang sama untuk membantu Anda mencocokkannya. Secara khusus, perhatikan bahwa Android Studio menggambar awal dan akhir tag elemen dalam warna yang sama. (Catatan: warna yang digunakan di codelab mungkin tidak cocok dengan yang Anda lihat di Android Studio.)

Tag, elemen, dan atribut XML

Berikut adalah versi sederhana elemen TextView sehingga Anda dapat melihat beberapa bagian penting:

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

Baris yang berisi <TextView merupakan awal tag, dan baris yang berisi /> merupakan akhir tag. Baris yang berisi android:text="Hello World!" merupakan atribut tag. Baris ini mewakili teks yang akan ditampilkan oleh TextView. Ketiga baris ini adalah singkatan yang umum digunakan yang disebut tag elemen kosong. Tidak akan ada bedanya jika Anda menulisnya dengan start-tag dan end-tag terpisah, seperti ini:

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

Tag elemen kosong juga biasa digunakan untuk menulis sesedikit mungkin baris dan menggabungkan akhir tag dengan baris sebelumnya. Jadi, Anda mungkin melihat tag elemen kosong di dua baris (atau bahkan satu baris jika tidak memiliki atribut):

<!-- with attributes, two lines -->
<TextView
    android:text="Hello World!" />

Elemen ConstraintLayout ditulis dengan tag awal dan tag akhir yang terpisah karena harus dapat menampung elemen lain di dalamnya. Berikut adalah versi sederhana elemen ConstraintLayout dengan elemen TextView di dalamnya:

<androidx.constraintlayout.widget.ConstraintLayout>
    <TextView
        android:text="Hello World!" />
</androidx.constraintlayout.widget.ConstraintLayout>

Jika Anda ingin menambahkan View lain sebagai turunan dari ConstraintLayout, seperti Button di bawah TextView, posisinya akan berada setelah akhir tag TextView /> dan sebelum tag akhir ConstraintLayout, seperti ini:

<androidx.constraintlayout.widget.ConstraintLayout>
    <TextView
        android:text="Hello World!" />
    <Button
        android:text="Calculate" />
</androidx.constraintlayout.widget.ConstraintLayout>

Selengkapnya tentang XML untuk tata letak

1. Lihat tag untuk ConstraintLayout, dan perhatikan bahwa tag itu menyebutkan androidx.constraintlayout.widget.ConstraintLayout, bukan hanya ConstraintLayout seperti TextView. Ini karena ConstraintLayout adalah bagian dari Android Jetpack yang berisi library kode yang menawarkan fungsi tambahan selain platform Android inti. Jetpack memiliki fungsi penting yang bisa Anda manfaatkan untuk mempermudah pembuatan aplikasi. Anda akan mengenali bahwa komponen UI ini merupakan bagian dari Jetpack karena dimulai dengan kata "androidx".
2. Anda mungkin telah melihat baris yang diawali dengan xmlns:, diikuti dengan android, app, dan tools.

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"

xmlns adalah singkatan dari namespace XML, dan setiap baris mendefinisikan skema atau kosakata untuk atribut yang terkait dengan kata-kata tersebut. Namespace android:, misalnya, menandai atribut yang ditentukan oleh sistem Android. Semua atribut dalam XML tata letak dimulai dengan salah satu namespace tersebut.

3. Spasi kosong antar-elemen XML tidak mengubah artinya di komputer, tetapi dapat mempermudah orang dalam membaca XML.

Android Studio secara otomatis akan menambahkan beberapa spasi kosong dan indentasi untuk meningkatkan keterbacaan. Anda nantinya akan mempelajari cara Android Studio memastikan XML mengikuti konvensi gaya coding.

4. Anda bisa menambahkan komentar ke XML, seperti yang akan Anda lakukan dengan kode Kotlin. Mulai dengan <!-- dan akhiri dengan -->.

<!-- this is a comment in XML -->

<!-- this is a
multi-line
Comment.
And another
Multi-line comment -->

5. Perhatikan baris pertama file:

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

Baris pertama tersebut menunjukkan bahwa jenis file ini adalah XML, tetapi tidak semua file XML menyertakannya.

4. Membuat tata letak dalam XML

1. Masih di activity_main.xml, beralihlah ke tampilan layar Split untuk melihat XML di samping Design Editor. Dengan Design Editor, Anda dapat melihat pratinjau tata letak UI.

2. Tampilan yang akan digunakan disesuaikan dengan preferensi pribadi Anda. Tetapi untuk codelab ini, gunakan tampilan Split sehingga Anda dapat melihat XML yang diedit beserta perubahannya di Design Editor.
3. Coba klik baris yang berbeda, satu di bawah ConstraintLayout, lalu satu di bawah TextView, dan perhatikan bahwa tampilan yang sesuai akan dipilih di Design Editor. Sebaliknya—misalnya, jika Anda mengklik TextView di Design Editor, XML yang sesuai akan disorot.

Menghapus TextView

1. Anda dapat menghapus TextView karena tidak diperlukan sekarang. Pastikan untuk menghapus semuanya dari <TextView hingga /> penutup.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Jadi, di dalam file tersebut hanya akan tersisa ConstraintLayout:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

</androidx.constraintlayout.widget.ConstraintLayout>

2. Tambahkan padding 16 dp ke ConstraintLayout sehingga UI tidak akan berdesakan di tepi layar.

Padding mirip dengan margin, tetapi perbedaannya adalah padding menambahkan ruang ke bagian dalam ConstraintLayout, bukan menambahkan ruang ke luar.

<androidx.constraintlayout.widget.ConstraintLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

Menambahkan kolom teks biaya layanan (cost of service)

Pada langkah ini, Anda akan menambahkan elemen UI agar pengguna dapat memasukkan biaya layanan ke dalam aplikasi. Anda juga akan menggunakan elemen EditText agar pengguna dapat memasukkan atau mengubah teks dalam aplikasi.

1. Lihat dokumentasi EditText, dan periksa contoh XML.
2. Cari spasi kosong antara tag ConstraintLayout pembuka dan penutup.
3. Salin dan tempel XML dari dokumentasi ke spasi kosong tersebut dalam tata letak Anda di Android Studio.

File yang sudah jadi akan terlihat seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/plain_text_input"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:inputType="text"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Anda tidak perlu khawatir jika belum memahaminya karena akan dijelaskan dalam langkah-langkah berikut.

4. Perhatikan bahwa EditText digarisbawahi dengan warna merah.
5. Arahkan kursor ke atasnya, dan Anda akan melihat error "view is not constrained" yang seharusnya tidak asing lagi sejak codelab sebelumnya. Ingat bahwa turunan dari ConstraintLayout memerlukan batasan sehingga tata letak mengetahui cara mengaturnya.

6. Tambahkan batasan ini ke EditText untuk menaruhnya di sudut kiri atas induk.

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

Jika Anda menulis dalam bahasa Inggris atau bahasa lain yang ditulis dari kiri ke kanan (LTR), tepi awalnya adalah kiri. Namun, beberapa bahasa seperti bahasa Arab yang ditulis dari kanan ke kiri (RTL) memiliki tepi awal di kanan. Itu sebabnya batasan menggunakan "start" sehingga bisa berfungsi dengan bahasa LTR ataupun RTL. Demikian pula, batasan menggunakan "end", bukan kanan, karena alasan yang sama.

Dengan batasan baru yang ditambahkan, elemen EditText akan terlihat seperti ini:

<EditText
    android:id="@+id/plain_text_input"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:inputType="text"/>

Meninjau atribut EditText

Periksa kembali semua atribut EditText yang Anda tempelkan untuk memastikannya berfungsi sebagaimana seharusnya di aplikasi Anda.

1. Cari atribut id, yang ditetapkan ke @+id/plain_text_input.
2. Ubah atribut id menjadi nama yang lebih sesuai, @+id/cost_of_service.

3. Lihat atribut layout_height. Atribut itu ditetapkan ke wrap_content yang berarti tingginya akan setinggi konten di dalamnya. Tidak apa-apa karena hanya akan ada 1 baris teks.
4. Lihat atribut layout_width. Atribut ini ditetapkan ke match_parent, tetapi Anda tidak dapat menetapkan match_parent pada turunan ConstraintLayout. Selain itu, kolom teks tidak harus terlalu lebar. Tetapkan menjadi lebar tetap sebesar 160dp, yang seharusnya memiliki banyak ruang bagi pengguna untuk memasukkan biaya layanan.

5. Perhatikan atribut inputType —karena ini atribut baru. Nilai atribut adalah "text" yang berarti pengguna dapat mengetikkan setiap karakter teks ke dalam kolom di layar (karakter alfabet, simbol, dll.)

android:inputType="text"

Namun, Anda ingin pengguna hanya mengetik angka ke dalam EditText karena kolomnya mewakili nilai uang.

6. Hapus kata text, tetapi biarkan tanda kutipnya.
7. Mulai ketik number di tempatnya. Setelah mengetik "n", Android Studio akan menampilkan daftar kemungkinan penyelesaian yang meliputi "n".

8. Pilih numberDecimal untuk membatasinya ke angka dengan titik desimal.

android:inputType="numberDecimal"

Untuk melihat opsi jenis input lainnya, lihat Menentukan jenis metode input dalam dokumentasi developer.

Masih ada satu perubahan lagi yang harus dibuat karena menampilkan beberapa petunjuk tentang karakter yang harus dimasukkan pengguna ke dalam kolom ini akan sangat membantu.

9. Tambahkan atribut hint ke EditText yang menjelaskan karakter yang harus dimasukkan pengguna dalam kolom.

android:hint="Cost of Service"

Anda juga akan melihat update Design Editor.

10. Jalankan aplikasi Anda di emulator. Tampilannya akan terlihat seperti ini:

Bagus! Masih belum banyak, tetapi Anda sudah memulai dengan baik dan telah mengedit beberapa XML. XML untuk tata letak Anda akan terlihat seperti ini.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/cost_of_service"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:hint="Cost of Service"
        android:inputType="numberDecimal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Menambahkan pertanyaan layanan

Pada langkah ini, Anda akan menambahkan TextView untuk pertanyaan, "Bagaimana layanannya?" Coba ketikkan tanpa menyalin/menempel. Saran dari Android Studio dapat membantu Anda.

1. Setelah penutup tag EditText, yakni />, tambahkan baris baru dan mulailah mengetikkan <TextView.
2. Pilih TextView dari saran, dan Android Studio akan otomatis menambahkan atribut layout_width dan layout_height untuk TextView.
3. Pilih wrap_content untuk keduanya karena Anda hanya perlu TextView sebesar konten teks di dalamnya.
4. Tambahkan atribut text dengan "How was the service?"

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="How was the service?"

5. Tutup tag dengan />.
6. Perhatikan dalam Design Editor bahwa TextView tumpang tindih dengan EditText.

Sepertinya masih kurang pas. Jadi, Anda harus menambahkan batasan pada TextView berikutnya. Pikirkan batasan yang Anda butuhkan. Di mana posisi TextView harus diposisikan secara horizontal dan vertikal? Anda dapat memeriksa screenshot aplikasi untuk mengetahuinya.

Secara vertikal, Anda ingin TextView di bawah kolom teks biaya layanan. Secara horizontal, Anda ingin TextView sejajar dengan tepi awal induknya.

7. Tambahkan batasan horizontal ke TextView untuk membatasi tepi awalnya hingga tepi awal induk.

app:layout_constraintStart_toStartOf="parent"

8. Tambahkan batasan vertikal ke TextView untuk membatasi tepi atas TextView ke tepi bawah View biaya layanan.

app:layout_constraintTop_toBottomOf="@id/cost_of_service"

Perhatikan bahwa tidak ada nilai tambah di @id/cost_of_service karena ID sudah ditentukan.

Sepertinya ini bukan tampilan terbaik, tetapi jangan khawatir. Anda hanya ingin memastikan semua bagian yang diperlukan berada di layar dan fungsinya dapat digunakan. Anda akan memperbaiki tampilannya di codelab berikut.

9. Tambahkan ID resource di TextView. Anda harus merujuk ke tampilan ini nanti saat menambahkan lebih banyak tampilan dan membatasi satu sama lain.

android:id="@+id/service_question"

Pada titik ini, XML Anda akan terlihat seperti ini.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/cost_of_service"
        android:hint="Cost of Service"
        android:layout_height="wrap_content"
        android:layout_width="160dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:inputType="numberDecimal"/>

    <TextView
        android:id="@+id/service_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="How was the service?"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/cost_of_service"/>

</androidx.constraintlayout.widget.ConstraintLayout>

5. Menambahkan opsi tip

Selanjutnya, Anda akan menambahkan tombol pilihan untuk berbagai opsi tip yang dapat dipilih pengguna.

Harus ada tiga opsi:

• Luar biasa (20%)
• Bagus (18%)
• Lumayan (15%)

Jika tidak yakin cara melakukannya, Anda dapat melakukan penelusuran Google. Alat hebat ini biasanya digunakan developer saat menemukan masalah.

1. Lakukan penelusuran Google untuk radio button android. Hasil teratas merupakan panduan dari situs developer Android tentang cara menggunakan tombol pilihan—sempurna!

2. Baca Panduan Tombol Pilihan.

Dengan membaca deskripsi, Anda dapat memastikan bahwa Anda dapat menggunakan elemen UI RadioButton di tata letak untuk setiap tombol pilihan yang diperlukan. Selain itu, Anda juga perlu mengelompokkan tombol pilihan dalam RadioGroup karena hanya satu opsi yang dapat dipilih sekaligus.

Ada beberapa XML yang tampaknya sesuai dengan kebutuhan Anda. Baca seluruhnya dan lihat cara RadioGroup menjadi tampilan induk dan RadioButtons menjadi tampilan turunan di dalamnya.

3. Kembali ke tata letak di Android Studio untuk menambahkan RadioGroup dan RadioButton ke aplikasi Anda.
4. Setelah elemen TextView, tetapi masih dalam ConstraintLayout, mulai ketik <RadioGroup. Android Studio akan memberikan saran yang berguna untuk membantu Anda menyelesaikan XML.
5. Tetapkan layout_width dan layout_height dari RadioGroup ke wrap_content.
6. Tambahkan ID resource yang ditetapkan ke @+id/tip_options.
7. Tutup tag awal dengan >.
8. Android Studio menambahkan </RadioGroup>. Seperti halnya ConstraintLayout, elemen RadioGroup juga akan memiliki elemen lain di dalamnya. Jadi, Anda mungkin ingin memindahkannya ke barisnya sendiri.
9. Batasi RadioGroup di bawah pertanyaan layanan (secara vertikal) dan ke bagian awal induk (secara horizontal).
10. Tetapkan atribut android:orientation ke vertical. Jika menginginkan RadioButtons berada dalam satu baris, Anda dapat menetapkan orientasinya ke horizontal.

XML untuk RadioGroup akan terlihat seperti ini:

<RadioGroup
    android:id="@+id/tip_options"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/service_question">

</RadioGroup>

Menambahkan RadioButtons

1. Setelah atribut terakhir RadioGroup, tetapi sebelum tag akhir </RadioGroup>, tambahkan RadioButton.

<RadioGroup
    android:id="@+id/tip_options"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/service_question">

    <!-- add RadioButtons here -->

</RadioGroup>

2. Tetapkan layout_width dan layout_height ke wrap_content.
3. Tetapkan ID resource @+id/option_twenty_percent ke RadioButton.
4. Tetapkan teks ke Amazing (20%).
5. Tutup tag dengan />.

<RadioGroup
   android:id="@+id/tip_options"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:layout_constraintTop_toBottomOf="@id/service_question"
   app:layout_constraintStart_toStartOf="parent"
   android:orientation="vertical">

   <RadioButton
       android:id="@+id/option_twenty_percent"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Amazing (20%)" />

</RadioGroup>

Setelah menambahkan satu RadioButton, bisakah Anda memodifikasi XML untuk menambahkan 2 tombol pilihan lagi untuk opsi Good (18%) dan Okay (15%)?

Seperti inilah tampilan XML untuk RadioGroup dan RadioButtons:

<RadioGroup
   android:id="@+id/tip_options"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:layout_constraintTop_toBottomOf="@id/service_question"
   app:layout_constraintStart_toStartOf="parent"
   android:orientation="vertical">

   <RadioButton
       android:id="@+id/option_twenty_percent"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Amazing (20%)" />

   <RadioButton
       android:id="@+id/option_eighteen_percent"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Good (18%)" />

   <RadioButton
       android:id="@+id/option_fifteen_percent"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Okay (15%)" />

</RadioGroup>

Menambahkan pilihan default

Saat ini, tidak ada opsi tip yang dipilih. Sebaiknya pilih salah satu opsi tombol pilihan secara default.

Terdapat atribut di RadioGroup yang dapat Anda gunakan untuk menentukan tombol yang harus dipilih terlebih dahulu. Atribut itu disebut checkedButton, dan Anda menetapkannya ke ID resource tombol pilihan yang ingin dipilih.

1. Pada RadioGroup, tetapkan atribut android:checkedButton ke @id/option_twenty_percent.

<RadioGroup
   android:id="@+id/tip_options"
   android:checkedButton="@id/option_twenty_percent"
   ...

Perhatikan di Design Editor bahwa tata letak telah diperbarui. Opsi tip 20% dipilih secara default—sungguh keren! Sekarang tampilannya sudah mulai terlihat seperti kalkulator tip.

Berikut tampilan XML-nya sejauh ini:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/cost_of_service"
        android:hint="Cost of Service"
        android:layout_height="wrap_content"
        android:layout_width="160dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:inputType="numberDecimal"/>

    <TextView
        android:id="@+id/service_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="How was the service?"
        app:layout_constraintTop_toBottomOf="@id/cost_of_service"
        app:layout_constraintStart_toStartOf="parent" />

    <RadioGroup
        android:id="@+id/tip_options"
        android:checkedButton="@id/option_twenty_percent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/service_question"
        app:layout_constraintStart_toStartOf="parent"
        android:orientation="vertical">

        <RadioButton
            android:id="@+id/option_twenty_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Amazing (20%)" />

        <RadioButton
            android:id="@+id/option_eighteen_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Good (18%)" />

        <RadioButton
            android:id="@+id/option_fifteen_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Okay (15%)" />
    </RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>

6. Menyelesaikan seluruh tata letak

Anda sekarang berada di bagian terakhir tata letak. Anda akan menambahkan Switch, Button, dan TextView untuk menampilkan jumlah tip.

Menambahkan Tombol untuk membulatkan tip

Selanjutnya, Anda akan menggunakan widget Switch agar pengguna dapat memilih untuk membulatkan tip atau tidak.

Anda ingin agar Switch selebar induknya sehingga Anda mungkin menganggap lebar harus ditetapkan ke match_parent. Seperti yang telah disebutkan sebelumnya, Anda tidak dapat menetapkan match_parent pada elemen UI di ConstraintLayout. Sebagai gantinya, Anda harus membatasi tepi awal dan akhir tampilan, serta menetapkan lebar ke 0dp. Menetapkan lebar ke 0dp akan memberi tahu sistem untuk tidak menghitung lebar, tetapi cukup dengan mencoba mencocokkan batasan yang ada di tampilan.

1. Tambahkan elemen Switch setelah XML untuk RadioGroup.
2. Seperti yang telah disebutkan di atas, tetapkan layout_width ke 0dp.
3. Tetapkan layout_height ke wrap_content. Tindakan ini akan menjadikan tampilan Switch setinggi konten di dalamnya.
4. Tetapkan atribut id ke @+id/round_up_switch.
5. Tetapkan atribut text ke Round up tip?. Setelan ini akan digunakan sebagai label untuk Switch.
6. Batasi tepi awal Switch ke tepi awal induk tip_options dan akhir ke akhir induk.
7. Batasi bagian atas Switch ke bagian bawah tip_options.
8. Tutup tag dengan />.

Akan lebih baik jika tombol diaktifkan secara default, dan tersedia atribut untuk melakukan itu, android:checked, dengan nilai yang memungkinkan adalah true (aktif) atau false (nonaktif).

9. Tetapkan atribut android:checked ke true.

Dengan menggabungkan semuanya, XML untuk elemen Switch akan terlihat seperti ini:

<Switch
    android:id="@+id/round_up_switch"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Round up tip?"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@id/tip_options"
    app:layout_constraintTop_toBottomOf="@id/tip_options" />

Menambahkan tombol Calculate (Hitung)

Selanjutnya, Anda akan menambahkan Button sehingga pengguna dapat meminta tip dihitung. Anda ingin agar tombol menjadi selebar induk, sehingga lebar dan batasan horizontal sama seperti untuk Switch sebelumnya.

1. Tambahkan Button setelah Switch.
2. Tetapkan lebar ke 0dp, seperti yang Anda lakukan untuk Switch.
3. Tetapkan tinggi ke wrap_content.
4. Berikan ID resource @+id/calculate_button, dengan teks "Calculate".
5. Batasi tepi atas Button ke tepi bawah Switch Round up tip?.
6. Batasi tepi awal ke tepi awal induk dan tepi akhir ke tepi akhir induk.
7. Tutup tag dengan />.

Berikut tampilan XML untuk Button Calculate:

<Button
   android:id="@+id/calculate_button"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:text="Calculate"
   app:layout_constraintTop_toBottomOf="@id/round_up_switch"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent" />

Menambahkan hasil tip

Anda hampir menyelesaikan tata letak. Di langkah ini, Anda akan menambahkan TextView untuk hasil tip, menempatkannya di bawah tombol Calculate, dan disejajarkan dengan bagian akhir, bukan di awal seperti elemen UI lainnya.

1. Tambahkan TextView dengan ID resource bernama tip_result dan teks Tip Amount.
2. Batasi tepi akhir TextView ke tepi akhir induk.
3. Batasi tepi atas ke tepi bawah tombol Calculate.

<TextView
    android:id="@+id/tip_result"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/calculate_button"
    android:text="Tip Amount" />

4. Jalankan aplikasi. Tampilannya akan terlihat seperti screenshot ini.

Bagus, khususnya jika ini pertama kalinya Anda bekerja dengan XML.

Perhatikan bahwa aplikasi mungkin tidak terlihat sama persis dengan screenshot karena mungkin template di Android Studio versi terbaru telah berubah. Tombol Calculate belum mulai digunakan, tetapi Anda dapat mengetikkan biaya, memilih persentase tip, dan beralih opsi untuk membulatkan tip atau tidak. Anda akan mulai menggunakan tombol Calculate di codelab berikutnya. Jadi, pastikan untuk kembali lagi.

7. Menerapkan praktik coding yang baik

Mengekstrak string

Anda mungkin telah melihat peringatan tentang string hard code. Coba ingat kembali dari codelab sebelumnya bahwa mengekstrak string ke file resource akan mempermudah untuk menerjemahkan aplikasi ke bahasa lain dan menggunakan kembali string. Buka activity_main.xml dan ekstrak semua resource string.

1. Klik string; arahkan kursor ke ikon bohlam kuning yang muncul, lalu klik segitiga di sebelahnya; pilih Extract String Resource. Tidak ada masalah pada nama default untuk resource string. Jika mau, untuk opsi tip, Anda dapat menggunakan amazing_service, good_service, dan ok_service untuk membuat nama lebih deskriptif.

Sekarang verifikasi resource string yang baru saja Anda tambahkan.

2. Jika jendela Project tidak muncul, klik tab Project di sisi kiri jendela.
3. Buka app > res > values > strings.xml untuk melihat semua resource string UI.

<resources>
    <string name="app_name">Tip Time</string>
    <string name="cost_of_service">Cost of Service</string>
    <string name="how_was_the_service">How was the service?</string>
    <string name="amazing_service">Amazing (20%)</string>
    <string name="good_service">Good (18%)</string>
    <string name="ok_service">Okay (15%)</string>
    <string name="round_up_tip">Round up tip?</string>
    <string name="calculate">Calculate</string>
    <string name="tip_amount">Tip Amount</string>
</resources>

Memformat ulang XML

Android Studio menyediakan berbagai alat untuk merapikan kode Anda dan memastikannya mengikuti konvensi coding yang direkomendasikan.

1. Di activity_main.xml, pilih Edit > Select All.
2. Pilih Code > Reformat Code.

Ini akan memastikan indentasinya konsisten, dan dapat menyusun ulang sebagian XML elemen UI untuk mengelompokkan berbagai tugas, misalnya, mengelompokkan semua atribut android: dari satu elemen.

8. Kode solusi

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/cost_of_service"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:hint="@string/cost_of_service"
        android:inputType="numberDecimal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/service_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/how_was_the_service"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/cost_of_service" />

    <RadioGroup
        android:id="@+id/tip_options"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@id/option_twenty_percent"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/service_question">

        <RadioButton
            android:id="@+id/option_twenty_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/amazing_service" />

        <RadioButton
            android:id="@+id/option_eighteen_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/good_service" />

        <RadioButton
            android:id="@+id/option_fifteen_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ok_service" />
    </RadioGroup>

    <Switch
        android:id="@+id/round_up_switch"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="@string/round_up_tip"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@id/tip_options"
        app:layout_constraintTop_toBottomOf="@id/tip_options" />

    <Button
        android:id="@+id/calculate_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/calculate"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/round_up_switch" />

    <TextView
        android:id="@+id/tip_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tip_amount"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/calculate_button" />
</androidx.constraintlayout.widget.ConstraintLayout>

res/values/strings.xml

<resources>
   <string name="app_name">Tip Time</string>
   <string name="cost_of_service">Cost of Service</string>
   <string name="how_was_the_service">How was the service?</string>
   <string name="amazing_service">Amazing (20%)</string>
   <string name="good_service">Good (18%)</string>
   <string name="ok_service">Okay (15%)</string>
   <string name="round_up_tip">Round up tip?</string>
   <string name="calculate">Calculate</string>
   <string name="tip_amount">Tip Amount</string>
</resources>

9. Ringkasan

• XML (Extensible Markup Language) adalah suatu cara mengatur teks yang terdiri dari tag, elemen, dan atribut.
• Gunakan XML untuk menentukan tata letak aplikasi Android.
• Gunakan EditText untuk mengizinkan pengguna memasukkan atau mengedit teks.
• EditText dapat berisi petunjuk bagi pengguna karena menjelaskan isi kolom tersebut.
• Tentukan atribut android:inputType untuk membatasi jenis teks yang dapat dimasukkan pengguna ke dalam kolom EditText.
• Buat daftar opsi eksklusif dengan RadioButtons yang dikelompokkan dengan RadioGroup.
• RadioGroup bisa vertikal atau horizontal, dan Anda dapat menentukan RadioButton yang harus dipilih di awal.
• Gunakan Switch untuk memungkinkan pengguna beralih antara dua opsi.
• Anda dapat menambahkan label ke Switch tanpa menggunakan TextView yang terpisah.
• Setiap turunan dari ConstraintLayout harus memiliki batasan vertikal dan horizontal.
• Gunakan batasan "start" dan "end" untuk menangani jenis bahasa Kiri ke Kanan (LTR) dan Kanan ke Kiri (RTL).
• Nama atribut batasan mengikuti bentuk layout_constraint<Source>_to<Target>Of.
• Untuk membuat View selebar ConstraintLayout, masukkan "start" dan "end" ke awal dan akhir induk, dan tetapkan lebar ke 0 dp.

10. Mempelajari lebih lanjut

Di bawah ini tersedia link ke dokumentasi lainnya yang berisi topik yang dibahas. Anda dapat menemukan semua dokumentasi Pengembangan Android di developer.android.com. Dan jangan lupa, Anda dapat melakukan penelusuran Google jika mengalami masalah.

• TextView
• EditText
• Menentukan jenis metode input
• Panduan Tombol Pilihan
• RadioButton
• RadioGroup
• Switch
• ConstraintLayout
• XML di Wikipedia

11. Berlatih sendiri

Lakukan hal berikut:

• Buat aplikasi kalkulator yang berbeda, seperti pengonversi satuan untuk memasak, untuk mengonversi mililiter ke ons cairan atau sebaliknya, gram ke cup atau sebaliknya, dan sebagainya. Kolom apa yang Anda butuhkan?