Jelaskan alur dasar suatu web mulai dari saat diakses pengguna hingga ditampilkan di layar pengguna

Dalam pelajaran ini, Anda mempelajari cara menggunakan Layout Editor Android Studio untuk membuat tata letak yang menyertakan kotak teks dan tombol. Ini akan menyiapkan pelajaran berikutnya, tempat Anda mempelajari cara membuat aplikasi mengirimkan konten kotak teks ke aktivitas lain saat tombol diketuk.

Gambar 1. Screenshot tata letak akhir

Antarmuka pengguna (UI) untuk aplikasi Android dibuat sebagai hierarki tata letak dan widget. Tata letak adalah objek ViewGroup, container yang mengontrol cara tampilan turunannya diposisikan di layar. Widget adalah objek View, komponen UI seperti tombol dan kotak teks.

Gambar 2. Ilustrasi tentang bagaimana objek ViewGroup membentuk cabang dalam tata letak dan menyertakan objek View.

Android menyediakan kosakata XML untuk class ViewGroup dan View, sehingga sebagian besar UI Anda ditentukan dalam file XML. Namun, bukannya mengajari Anda menulis XML, pelajaran ini menunjukkan cara membuat tata letak menggunakan Layout Editor Android Studio. Layout Editor menulis XML untuk Anda saat Anda menarik lalu melepas tampilan untuk membuat tata letak.

Pelajaran ini mengasumsikan bahwa Anda menggunakan Android Studio v3.0 atau lebih tinggi dan telah menyelesaikan pelajaran membuat project Android.

Membuka Layout Editor

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

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:

   1. Masukkan "edit_message" pada kolom Key.
   2. Masukkan "Enter a message" pada kolom Default Value.
   3. 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

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.

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

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