Membuka Layout Editor

https://developer.android.com/training/basics/firstapp/building-
ui?hl=id
Untuk memulai, siapkan ruang kerja Anda seperti berikut:

1. Di jendela Project, buka app > res > layout > activity_main.xml.
2. Untuk memberi ruang bagi Layout Editor, sembunyikan jendela Project. Untuk melakukannya,
pilih View > Tool Windows > Project, atau cukup klik Project di sisi kiri layar Android Studio.
3. Jika editor Anda menunjukkan source XML, klik tab Design pada kanan atas jendela.

4. Klik (Select Design Surface) lalu pilih Blueprint.

5. Klik (View Options) di toolbar Layout Editor dan pastikan Show All Constraints dicentang.

6. Pastikan Autoconnect nonaktif. Tooltip di toolbar akan menampilkan (Enable

Autoconnection to Parent) jika Autoconnect nonaktif.

7. Klik (Default Margins) pada toolbar, lalu pilih 16. Jika diperlukan, Anda dapat
menyesuaikan margin untuk setiap tampilan nanti.

8. Klik (Device for Preview) pada toolbar, lalu pilih 5.5, 1440 × 2560, 560 dpi (Pixel XL).

Layout Editor kini terlihat seperti yang ditampilkan dalam gambar 3.

Gambar 3. Layout Editor menampilkan activity_main.xml

Untuk informasi tambahan, lihat Pengantar Layout Editor.

Panel Component Tree di bagian kiri bawah menampilkan hierarki tata letak tampilan. Dalam hal ini,
tampilan root adalah ConstraintLayout, yang hanya berisi satu objek TextView.

ConstraintLayout adalah tata letak yang menentukan posisi setiap tampilan berdasarkan batasan terhadap
tampilan yang setara dan tata letak induk. Dengan demikian, Anda bisa membuat tata letak yang
sederhana dan kompleks dengan hierarki tampilan datar. Tata letak jenis ini tidak memerlukan tata letak
turunan. Tata letak turunan, yang merupakan tata letak di dalam tata letak, seperti yang ditunjukkan dalam
gambar 2, dapat meningkatkan waktu yang diperlukan untuk menarik UI.

Gambar 4. Ilustrasi dua tampilan yang diposisikan di dalam ConstraintLayout

Misalnya, Anda dapat mendeklarasikan tata letak berikut, yang ditunjukkan dalam gambar 4:

 Tampilan A muncul 16 dp dari atas tata letak induk.

  Tampilan A muncul 16 dp dari kiri tata letak induk.
 Tampilan B muncul 16 dp di sebelah kanan tampilan A.
 Tampilan B sejajar dengan bagian atas tampilan A.

Di bagian berikut, Anda akan membuat tata letak yang mirip dengan tata letak dalam gambar 4.

Menambahkan kotak teks

Gambar 5. Kotak teks dibatasi ke bagian atas dan kiri tata letak induk

Ikuti langkah-langkah berikut untuk menambahkan kotak teks:

1. Anda harus menghapus semua yang ada dalam tata letak terlebih dahulu. Klik TextView pada
panel Component Tree lalu tekan tombol Delete.
2. Pada panel Palette, klik Text untuk menampilkan kontrol teks yang tersedia.
3. Tarik Plain Text ke dalam editor desain dan letakkan di dekat bagian atas tata letak. Ini adalah
widget EditText yang menerima input teks biasa.
4. Klik tampilan dalam editor desain. Sekarang Anda dapat melihat tuas persegi untuk mengubah
ukuran tampilan di setiap sudut, dan anchor batasan lingkaran di setiap sisi. Untuk kontrol yang
lebih optimal, sebaiknya Anda memperbesar tampilan pada editor. Untuk melakukannya, gunakan
tombol Zoom pada toolbar Layout Editor.
5. Klik lama anchor di sisi atas, tarik ke atas sampai pas ke bagian atas tata letak, lalu lepaskan. Itu
adalah batasan: membatasi tampilan dalam margin default yang ditetapkan. Dalam hal ini, Anda
menetapkannya ke 16 dp dari bagian atas tata letak.
6. Gunakan proses yang sama untuk membuat batasan dari sisi kiri tampilan ke sisi kiri tata letak.

Hasilnya akan terlihat seperti yang ditunjukkan dalam gambar 5.

Menambahkan tombol
Gambar 6. Tombol dibatasi ke sisi kanan kotak teks dan garis dasarnya

1. Pada panel Palette, klik Buttons.

2. Tarik widget Button ke dalam editor desain dan letakkan di dekat sisi kanan.
3. Buat pembatas dari sisi kiri tombol ke sisi kanan kotak teks.
4. Untuk membatasi tampilan dalam perataan horizontal, buat batasan antar-garis dasar teks. Untuk

melakukannya, klik kanan tombol, lalu pilih Show Baseline . Anchor garis dasar muncul di
dalam tombol. Klik lama anchor ini, lalu tarik ke anchor garis dasar yang muncul di kotak teks
yang ada di sampingnya.

Hasilnya akan terlihat seperti yang ditunjukkan dalam gambar 6.

Catatan: Anda juga dapat menggunakan tepi atas atau bawah untuk membuat perataan horizontal. Namun, gambar
tombol menyertakan padding di sekelilingnya, sehingga perataan visual akan salah jika dibuat dengan cara itu.

Mengubah string UI

Untuk melihat pratinjau UI, klik (Select Design Surface) di toolbar dan pilih Design. Perhatikan
bahwa input teks dan label tombol ditetapkan ke nilai default.

Ikuti langkah-langkah berikut untuk mengubah string UI:

1. Buka jendela Project, lalu buka app > res > values > strings.xml.
Ini adalah file resource string, tempat Anda dapat menentukan semua string UI. Hal ini
memungkinkan Anda mengelola semua string UI dalam satu lokasi, yang memudahkan string UI
tersebut untuk ditemukan, diperbarui, dan dilokalkan.
2. Klik Open editor di bagian atas jendela editor. Tindakan ini akan membuka Translations Editor,
yang menyediakan antarmuka sederhana untuk menambahkan dan mengedit string default. Hal ini
juga membantu Anda menjaga agar semua string yang diterjemahkan tetap tertata.

3. Klik (Add Key) untuk membuat string baru sebagai "teks petunjuk" pada kotak teks. Pada
tahap ini, jendela yang ditampilkan dalam gambar 7 akan terbuka.
 Gambar 7. Dialog untuk menambahkan string baru

Pada kotak dialog Add Key, selesaikan langkah-langkah berikut:

a. Masukkan "edit_message" pada kolom Key.
b. Masukkan "Enter a message" pada kolom Default Value.
c. Klik OK.
4. Tambahkan kunci lain bernama "button_send" dengan nilai "Send".

Sekarang, Anda bisa menyetel string ini untuk setiap tampilan. Untuk kembali ke file tata letak,
klik activity_main.xml di kolom tab. Kemudian, tambahkan string sebagai berikut:

1. Klik kotak teks dalam tata letak. Jika jendela Attributes belum terlihat di sisi kanan,
klik Attributes di sidebar sebelah kanan.
2. Cari properti text, yang saat ini ditetapkan ke "Name", dan hapus nilainya.

3. Cari properti hint, lalu klik (Pick a Resource), yang ada di sebelah kanan kotak teks. Pada
dialog yang muncul, klik dua kali edit_message dari daftar.
4. Klik tombol dalam tata letak dan cari properti text-nya, yang saat ini ditetapkan ke "Button". Lalu,

klik (Pick a Resource), lalu pilih button_send.

Mengatur agar ukuran kotak teks fleksibel

Untuk membuat tata letak yang responsif terhadap berbagai ukuran layar, buat kotak teks agar
membentang untuk mengisi semua ruang horizontal yang tetap ada setelah tombol dan margin dihitung.

Sebelum melanjutkan, klik (Select Design Surface) di toolbar dan pilih Blueprint.

Untuk membuat kotak teks fleksibel, ikuti langkah-langkah berikut:

Gambar 8. Hasil memilih Create Horizontal Chain

Gambar 9. Klik untuk mengubah lebar ke Match Constraints

Gambar 10. Kotak teks sekarang membentang untuk mengisi ruang yang ada

1. Pilih kedua tampilan. Untuk melakukannya, klik salah satu, tahan Shift, lalu klik tampilan
lainnya, lalu klik kanan salah satu dan pilih Chains > Create Horizontal Chain. Tata letak
kemudian muncul seperti yang ditunjukkan dalam gambar 8.
Chain adalah pembatas dua arah antara dua tampilan atau lebih yang memungkinkan Anda menata
tampilan terikat secara bersamaan.
2. Pilih tombol dan buka jendela Attributes. Kemudian, gunakan Constraint Widget untuk
menetapkan margin yang tepat ke 16 dp.
3. Klik kotak teks untuk melihat atributnya. Kemudian, klik indikator lebar dua kali sehingga
ditetapkan ke garis yang tidak rapi (Match Constraints), seperti yang ditunjukkan oleh
callout 1 dalam gambar 9.
Match constraints berarti lebar meluas untuk memenuhi ketentuan margin dan batasan horizontal.
Oleh karena itu, kotak teks membentang untuk mengisi ruang horizontal yang ada setelah tombol
dan semua margin dihitung.

Sekarang tata letak sudah selesai, seperti dalam gambar 10.

Jika tata letak tidak berubah seperti yang diharapkan, klik See the final layout XML di bawah untuk
melihat seperti apa tampilan XML Anda seharusnya. Bandingkan dengan yang Anda lihat di tab Code.
Jika atribut muncul dalam urutan yang berbeda, tidak masalah.

Lihat XML tata letak akhirnya

Untuk informasi lebih selengkapnya tentang rantai dan semua hal lain yang dapat Anda lakukan
dengan ConstraintLayout, baca Build a Responsive UI with ConstraintLayout.

Menjalankan aplikasi
Jika aplikasi sudah terinstal di perangkat dari the previous lesson, cukup

klik (Apply Changes) di toolbar untuk mengupdate aplikasi

dengan tata letak yang baru. Atau, klik Run 'app' untuk menginstal dan menjalankan aplikasi.

Tombol ini tetap tidak melakukan apa pun. Untuk membuat aktivitas lain yang dimulai saat tombol
diketuk, lanjutkan ke pelajaran berikutnya.