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

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

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.

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

Temukan opsi untuk tampilan Code, Split, dan Design di kanan atas Layout Editor.
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.

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

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

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.

Anda bisa menambahkan komentar ke XML, seperti yang akan Anda lakukan dengan kode Kotlin. Mulai dengan .

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

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

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

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.

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

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>

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.

Lihat dokumentasi EditText, dan periksa contoh XML.
Cari spasi kosong antara tag ConstraintLayout pembuka dan penutup.
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.

Perhatikan bahwa EditText digarisbawahi dengan warna merah.
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.

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.

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

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

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.

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

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.

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.

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.

Setelah penutup tag EditText, yakni />, tambahkan baris baru dan mulailah mengetikkan <TextView.
Pilih TextView dari saran, dan Android Studio akan otomatis menambahkan atribut layout_width dan layout_height untuk TextView.
Pilih wrap_content untuk keduanya karena Anda hanya perlu TextView sebesar konten teks di dalamnya.
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?"

Tutup tag dengan />.
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.

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

app:layout_constraintStart_toStartOf="parent"

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.

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.

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

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.

Kembali ke tata letak di Android Studio untuk menambahkan RadioGroup dan RadioButton ke aplikasi Anda.
Setelah elemen TextView, tetapi masih dalam ConstraintLayout, mulai ketik <RadioGroup. Android Studio akan memberikan saran yang berguna untuk membantu Anda menyelesaikan XML.
Tetapkan layout_width dan layout_height dari RadioGroup ke wrap_content.
Tambahkan ID resource yang ditetapkan ke @+id/tip_options.
Tutup tag awal dengan >.
Android Studio menambahkan </RadioGroup>. Seperti halnya ConstraintLayout, elemen RadioGroup juga akan memiliki elemen lain di dalamnya. Jadi, Anda mungkin ingin memindahkannya ke barisnya sendiri.
Batasi RadioGroup di bawah pertanyaan layanan (secara vertikal) dan ke bagian awal induk (secara horizontal).
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

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>

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

<RadioGroup
   android:id="@+id/tip_options"