Mengembangkan UI dengan View

Catatan: Sebaiknya build UI dengan Compose, bukan View, jika memungkinkan. Untuk mempelajari cara melihat pratinjau UI Compose, lihat Pratinjau Compose.

Layout Editor memungkinkan Anda membuat tata letak berbasis View secara cepat dengan menarik elemen UI ke editor desain visual, bukan menulis XML tata letak. Editor desain ini dapat melihat pratinjau tata letak Anda di berbagai versi dan perangkat Android, dan Anda dapat mengubah ukuran tata letak secara dinamis untuk memastikan tata letak tersebut berfungsi dengan baik pada berbagai ukuran layar.

Layout Editor sangat berguna saat mem-build tata letak dengan ConstraintLayout.

Halaman ini menyediakan ringkasan Layout Editor. Untuk mempelajari dasar-dasar tata letak lebih lanjut, lihat Layouts.

Pengantar Layout Editor

Layout Editor akan muncul bila Anda membuka file tata letak XML.

Gambar 1. Layout Editor.

1. Palette: berisi berbagai tampilan dan grup tampilan yang dapat Anda tarik ke tata letak.
2. Component Tree: menampilkan hierarki komponen dalam tata letak Anda.
3. Toolbar: memiliki tombol yang mengonfigurasi tampilan tata letak di editor dan mengubah atribut tata letak.
4. Design editor: memungkinkan Anda mengedit tata letak di tampilan Design, tampilan Blueprint, atau keduanya.
5. Attributes: memiliki kontrol untuk atribut tampilan yang dipilih.
6. Mode tampilan: memungkinkan Anda melihat tata letak dalam mode Code , Split , atau Design . Mode Split menampilkan jendela Code dan Design secara bersamaan.
7. Zoom and pan controls: mengontrol ukuran dan posisi pratinjau dalam editor.

Jika Anda membuka file tata letak XML, editor desain akan dibuka secara default seperti yang ditampilkan dalam gambar 1. Untuk mengedit XML tata letak dalam editor teks, klik tombol Code di pojok kanan atas jendela. Perhatikan bahwa panel Palette, Component Tree, dan Attributes tidak tersedia saat mengedit tata letak dalam tampilan Code.

Tips: Untuk beralih antara editor desain dan teks, tekan Alt (Control di macOS) plus Shift dan tombol panah kanan atau kiri.

Mengubah penampilan pratinjau

Tombol di baris atas editor desain memungkinkan Anda mengonfigurasi tampilan tata letak di editor.

Gambar 2. Tombol di toolbar Layout Editor yang mengonfigurasi tampilan tata letak.

1. Design and Blueprint: Pilih cara Anda ingin melihat tata letak di editor. Anda juga dapat menekan B untuk melihat semua jenis tampilan ini.
   • Pilih Design untuk melihat pratinjau tata letak yang dirender.
   • Pilih Blueprint untuk melihat hanya kerangka untuk setiap tampilan.
   • Pilih Design + Blueprint untuk melihat kedua tampilan secara berdampingan.
2. Screen connection and layoutvariant: Pilih antara orientasi layar lanskap atau potret, atau pilih mode layar lain yang disediakan oleh aplikasi Anda dengan tata letak alternatif, seperti mode malam. Menu ini juga berisi perintah untuk membuat varian tata letak baru, seperti yang dijelaskan di bagian halaman ini. Anda juga dapat menekan huruf O pada keyboard untuk mengubah orientasi.

3. Mode UI Sistem: Jika Anda telah mengaktifkan warna dinamis di aplikasi, ganti wallpaper dan lihat bagaimana tata letak Anda bereaksi terhadap wallpaper yang dipilih pengguna. Perhatikan bahwa Anda harus mengubah tema menjadi tema warna dinamis Material terlebih dahulu, lalu mengubah wallpaper.

4. Device type and size: Pilih jenis perangkat (ponsel/tablet, Android TV, atau Wear OS) dan konfigurasi layar (ukuran dan kepadatan). Anda dapat memilih dari beberapa jenis perangkat yang telah dikonfigurasi sebelumnya dan definisi AVD Anda sendiri, serta membuat AVD baru dengan memilih Add Device Definition dari daftar, seperti ditunjukkan pada gambar 3.

   • Untuk mengubah ukuran perangkat, seret sudut kanan bawah tata letak.
   • Tekan D untuk melihat seluruh daftar perangkat.

   Menguji tata letak terhadap Reference Devices dalam menu ini membantu aplikasi Anda diskalakan dengan baik terhadap status tata letak di perangkat sungguhan.

   

   Gambar 3. Daftar perangkat yang menampilkan Perangkat Referensi.

5. API version: Pilih versi Android untuk melihat pratinjau tata letak Anda. Daftar versi Android yang tersedia bergantung pada versi platform SDK yang telah Anda instal menggunakan SDK Manager.

6. App theme: Pilih tema UI mana yang akan diterapkan ke pratinjau. Ini hanya berfungsi untuk gaya tata letak yang didukung, sehingga banyak tema dalam daftar ini menghasilkan error.

7. Language: Pilih bahasa untuk menampilkan string UI Anda. Daftar ini hanya menampilkan bahasa yang tersedia dalam resource string Anda. Jika Anda ingin mengedit terjemahan, klik Edit Translations dari menu. Untuk mengetahui informasi selengkapnya tentang cara menggunakan terjemahan, baca Melokalkan UI dengan Translations Editor.

Catatan: Kecuali Anda menambahkan file tata letak baru dari Layout Variants, konfigurasi ini tidak memengaruhi kode atau manifes aplikasi Anda. Perubahan ini hanya memengaruhi pratinjau tata letak.

Membuat tata letak baru

Saat menambahkan tata letak baru untuk aplikasi Anda, buat terlebih dahulu file tata letak default di direktori layout/ default project sehingga dapat diterapkan ke semua konfigurasi perangkat. Setelah memiliki tata letak default, Anda bisa membuat variasi tata letak seperti yang dijelaskan di bagian halaman ini, untuk konfigurasi perangkat tertentu, misalnya untuk perangkat layar besar.

Anda dapat membuat tata letak baru dengan salah satu cara berikut:

Menggunakan menu utama Android Studio

1. Di jendela Project, klik modul yang ingin Anda tambahkan tata letaknya.
2. Di menu utama, pilih File > New > XML > Layout XML File.
3. Pada dialog yang muncul, berikan nama file, tag tata letak root, dan set sumber tempat tata letak berada.
4. Klik Finish untuk membuat tata letak.

Menggunakan tampilan Project

1. Pilih tampilan Project dari dalam jendela Project.
2. Klik kanan direktori tata letak tempat Anda ingin menambahkan tata letak.
3. Pada menu konteks yang muncul, klik New > Layout Resource File.

Menggunakan tampilan Android

1. Pilih tampilan Android dari dalam jendela Project.
2. Klik kanan folder layout.
3. Pada menu konteks yang muncul, pilih New > Layout Resource File.

Menggunakan Resource Manager

1. Di Resource Manager, pilih tab Layout.
2. Klik tombol +, lalu klik Layout Resource File.

Menggunakan varian tata letak untuk mengoptimalkan berbagai layar

Varian tata letak adalah versi alternatif dari tata letak saat ini yang dioptimalkan untuk ukuran atau orientasi layar tertentu.

Menggunakan varian tata letak yang disarankan

Android Studio menyertakan varian tata letak umum yang dapat Anda gunakan dalam project. Untuk menggunakan varian tata letak yang disarankan, lakukan hal berikut:

1. Buka file tata letak default Anda.
2. Klik ikon Design di pojok kanan atas jendela.
3. Nama file tata letak akan muncul di menu drop-down Action to switch and create qualifier for layout files. Pilih drop-down.
4. Dalam menu drop-down, pilih varian seperti Create Landscape Qualifier atau Create Tablet Qualifier.

   

   Gambar 4. Daftar drop-down penentu tata letak.

Direktori tata letak baru telah dibuat.

Membuat varian tata letak Anda sendiri

Jika ingin membuat varian tata letak Anda sendiri, lakukan langkah berikut:

1. Buka file tata letak default Anda.
2. Klik ikon Design di pojok kanan atas jendela.
3. Nama file tata letak akan muncul di menu drop-down Action to switch and create qualifier for layout files. Pilih drop-down.

4. Di menu drop-down, pilih Add Resource Qualifier. (Lihat gambar 4 di atas.)

   Dialog Select Resource Directory akan muncul.

5. Dalam dialog Select Resource Directory, tentukan penentu resource untuk varian:

   1. Pilih penentu dari daftar Penentu yang tersedia.
   2. Klik tombol Add .
   3. Masukkan nilai yang diperlukan.
   4. Ulangi langkah-langkah ini untuk menambahkan penentu lainnya.

6. Setelah Anda menambahkan semua penentu, klik OK.

Jika Anda memiliki beberapa variasi tata letak yang sama, Anda dapat beralih di antara tata letak tersebut dengan memilih varian dari menu drop-down Action to switch and create qualifier for layout files.

Untuk mengetahui informasi selengkapnya tentang cara membuat tata letak untuk layar yang berbeda, lihat Mendukung berbagai ukuran layar.

Mengonversikan tampilan atau tata letak

Anda dapat mengonversi tampilan ke jenis tampilan lain, dan mengonversi tata letak ke jenis tata letak lain:

1. Klik tombol Design di pojok kanan atas jendela editor.
2. Di Component Tree, klik kanan tampilan atau tata letak, lalu klik Convert view.
3. Pada dialog yang muncul, pilih jenis baru tampilan atau tata letak, kemudian klik Apply.

Mengonversikan tata letak ke ConstraintLayout

Untuk meningkatkan performa tata letak, konversi tata letak lama ke ConstraintLayout. ConstraintLayout menggunakan sistem tata letak berbasis batasan yang memungkinkan Anda mem-build sebagian besar tata letak tanpa kelompok tampilan bertingkat.

Untuk mengonversi tata letak saat ini ke ConstraintLayout, lakukan langkah berikut:

1. Buka tata letak yang ada di Android Studio.
2. Klik ikon Design di pojok kanan atas jendela editor.
3. Di Component Tree, klik kanan tata letak, lalu klik Convert your-layout-type to ConstraintLayout.

Untuk informasi selengkapnya tentang ConstraintLayout, lihat Membuat UI Responsif dengan ConstraintLayout.

Menemukan item di Palette

Untuk menelusuri tampilan atau kelompok tampilan berdasarkan nama di Palette, klik tombol Search di bagian atas palet. Atau, Anda dapat mengetik nama item setiap kali jendela Palette mengarahkan fokus.

Di Palette, Anda dapat menemukan item yang sering digunakan dalam kategori Common. Untuk menambahkan item ke kategori ini, klik kanan tampilan atau kelompok tampilan di Palette, lalu klik Favorite di menu konteks.

Membuka dokumentasi dari Palette

Untuk membuka dokumentasi referensi Android Developers untuk tampilan atau kelompok tampilan, pilih elemen UI di Palette dan tekan Shift+F1.

Untuk melihat dokumentasi Panduan Materi untuk tampilan atau kelompok tampilan, klik kanan elemen UI di Palette dan pilih Material Guidelines dari menu konteks. Jika tidak ada entri tertentu untuk item, perintah akan membuka halaman beranda dokumentasi Panduan Material.

Menambahkan tampilan ke tata letak Anda

Untuk mulai membuat tata letak, tarik tampilan dan grup tampilan dari Palette ke editor desain. Saat Anda menempatkan tampilan dalam tata letak, editor akan menampilkan informasi tentang hubungan tampilan dengan tata letak lainnya.

Jika menggunakan ConstraintLayout, Anda dapat otomatis membuat batasan dengan menggunakan fitur Infer Constraints dan Autoconnect.

Mengedit atribut tampilan

Gambar 5. Panel Attributes.

Anda dapat mengedit atribut tampilan dari panel Attributes di Layout Editor. Jendela ini hanya tersedia jika editor desain terbuka, jadi lihat tata letak Anda dalam mode Design atau Split untuk menggunakannya.

Saat Anda memilih tampilan, baik dengan mengklik tampilan di Component Tree atau di editor desain, panel Attributes akan menampilkan hal-hal berikut, seperti yang ditunjukkan pada gambar 5:

1. Declared Attributes: Mencantumkan atribut yang ditentukan dalam file tata letak. Untuk menambahkan atribut, klik tombol Add di bagian atas bagian tersebut.
2. Tata letak: Berisi kontrol untuk lebar dan tinggi tampilan. Jika tampilan dalam ConstraintLayout, bagian ini juga menunjukkan bias batasan dan mencantumkan batasan yang digunakan tampilan. Untuk informasi selengkapnya tentang mengontrol ukuran tampilan dengan ConstraintLayout, lihat Menyesuaikan ukuran tampilan.
3. Common Attributes: Mencantumkan atribut umum untuk tampilan yang dipilih. Untuk melihat semua atribut yang tersedia, luaskan bagian All Attributes di bagian bawah jendela.
4. Search: Memungkinkan Anda menelusuri atribut tampilan tertentu.

5. Ikon di sebelah kanan setiap nilai atribut menunjukkan apakah nilai atribut merupakan referensi resource. Indikator ini solid jika nilai merupakan referensi resource dan kosong saat nilai di-hardcode untuk membantu Anda mengenali sekilas nilai hardcode.

   Klik indikator di salah satu status untuk membuka dialog Resources, tempat Anda dapat memilih referensi resource untuk atribut yang sesuai.

6. Sorotan berwarna merah di sekitar nilai atribut menunjukkan adanya error pada nilai tersebut. Misalnya, error mungkin menunjukkan entri yang tidak valid untuk atribut yang menentukan tata letak.

   Sorotan berwarna oranye menunjukkan peringatan untuk nilai tersebut. Misalnya, peringatan mungkin muncul saat Anda menggunakan nilai hardcode di mana referensi resource diharapkan.

Menambahkan data contoh ke tampilan Anda

Karena banyak tata letak Android yang mengandalkan data runtime, mungkin sulit untuk memvisualisasikan tampilan dan nuansa tata letak saat mendesain aplikasi Anda. Anda dapat menambahkan contoh data pratinjau ke TextView, ImageView, atau RecyclerView dari dalam Layout Editor.

Catatan: Saat menambahkan data contoh ke View, Android Studio akan membuat perubahan ke project Anda seolah-olah Anda menggunakan data Anda sendiri. Kemudian, Anda dapat mengubah perubahan ini saat diperlukan.

Untuk menampilkan jendela Design-time View Attributes, klik kanan salah satu jenis tampilan ini, lalu pilih Set Sample Data, seperti ditunjukkan pada gambar 6.

Gambar 6. Jendela Design-time View Attributes.

Untuk TextView, Anda dapat memilih di antara kategori teks contoh yang berbeda. Saat menggunakan teks contoh, Android Studio akan mengisi text atribut dari TextView dengan data contoh pilihan Anda. Ingatlah bahwa Anda dapat memilih teks contoh melalui jendela Design-time View Attributes hanya jika atribut text kosong.

Gambar 7. TextView dengan data contoh.

Untuk ImageView, Anda dapat memilih di antara gambar contoh yang berbeda. Saat Anda memilih gambar contoh, Android Studio akan mengisi atribut tools:src dari ImageView (atau tools:srcCompat jika menggunakan AndroidX).

Gambar 8. ImageView dengan data contoh.

Untuk RecyclerView, Anda dapat memilih dari serangkaian template yang berisi gambar dan teks contoh. Saat menggunakan template ini, Android Studio akan menambahkan file ke direktori res/layout Anda, recycler_view_item.xml, yang berisi tata letak untuk data contoh. Android Studio juga menambahkan metadata ke RecyclerView untuk menampilkan data contoh dengan tepat.

Gambar 9. RecyclerView dengan data contoh.

Menampilkan peringatan dan error tata letak

Layout Editor memberi tahu Anda tentang masalah tata letak di samping tampilan yang sesuai di Component Tree dengan ikon tanda seru lingkaran merah untuk error, atau ikon tanda seru segitiga oranye untuk peringatan. Klik ikon untuk melihat detail selengkapnya.

Untuk melihat semua masalah umum pada jendela di bawah editor, klik Show Warnings and Errors ( atau ) dalam toolbar.

Mendownload font dan menerapkannya ke teks

Saat menggunakan Android 8.0 (level API 26) atau library Jetpack Core, Anda dapat memilih dari ratusan font dengan mengikuti langkah-langkah berikut:

1. Di Layout Editor, klik ikon Design untuk melihat tata letak di editor desain.
2. Pilih tampilan teks.
3. Di panel Attributes, luaskan textAppearance, lalu luaskan kotak fontFamily.
4. Scroll ke bawah daftar, lalu klik More Fonts untuk membuka dialog Resources.
5. Pada dialog Resources, untuk memilih font, jelajahi daftar atau ketik ke kotak penelusuran di bagian atas. Jika memilih font di bagian Downloadable, Anda dapat mengklik Create downloading font untuk memuat font saat runtime sebagai font yang dapat didownload atau mengklik Add font to project untuk memaketkan file font TTF dalam APK. Font yang tercantum pada Android disediakan oleh sistem Android, sehingga tidak perlu didownload atau dipaketkan dalam APK Anda.
6. Klik OK untuk menyelesaikan.

Layout Validation

Layout Validation adalah alat visual untuk melihat pratinjau tata letak secara serentak di berbagai perangkat dan konfigurasi tampilan, sehingga Anda dapat mendeteksi masalah tata letak lebih awal. Untuk mengakses fitur ini, klik tab Layout Validation di pojok kanan atas jendela IDE:

Gambar 10. Tab Layout Validation.

Untuk berganti-ganti konfigurasi yang tersedia, pilih salah satu pilihan berikut dari drop-down Reference Devices di bagian atas jendela Layout Validation:

• Reference Devices
• Kustom
• Color Blind
• Font Sizes

Gambar 11. Menu drop-down Reference Devices.

Reference Devices

Perangkat referensi (Reference devices) adalah serangkaian perangkat yang kami rekomendasikan untuk melakukan pengujian. Perangkat tersebut mencakup antarmuka ponsel, perangkat foldable, tablet, dan desktop. Anda harus melihat pratinjau tampilan tata letak Anda di rangkaian perangkat referensi ini:

Gambar 12. Pratinjau perangkat referensi di alat Layout Validation.

Kustom

Untuk menyesuaikan konfigurasi tampilan sebelum pratinjau, pilih berbagai setelan yang ada seperti bahasa, perangkat, atau orientasi layar:

Gambar 16. Mengonfigurasi tampilan kustom pada alat Layout Validation.

Color Blind

Agar aplikasi Anda mudah diakses pengguna buta warna, validasikan tata letak Anda dengan melakukan simulasi untuk jenis buta warna umum:

Gambar 13. Pratinjau simulasi buta warna pada alat Layout Validation

Font Sizes

Validasi tata letak di berbagai ukuran font dan mudahkan akses pengguna yang menderita gangguan penglihatan dengan mengujinya menggunakan font berukuran besar.

Gambar 14. Pratinjau ukuran font variabel pada alat Layout Validation.