Layout Editor memungkinkan Anda membuat tata letak dengan cepat dengan menyeret elemen UI ke editor desain visual, alih-alih menulis XML tata letak secara manual. Editor desain ini dapat menampilkan pratinjau tata letak Anda pada beragam versi dan perangkat Android, dan Anda dapat secara dinamis mengubah ukuran tata letak untuk memastikannya berfungsi dengan baik pada berbagai ukuran layar. Show
Layout Editor sangat canggih ketika membuat tata letak dengan ConstraintLayout, pengelola tata letak yang kompatibel dengan Android 2.3 (API level 9) dan yang lebih baru. Halaman ini menyediakan ringkasan Layout Editor. Untuk mempelajari dasar-dasar tata letak lebih lanjut, lihat Layouts. Pengantar Layout EditorLayout Editor akan muncul bila Anda membuka file tata letak XML. Gambar 1. Layout 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 Tips: Anda dapat beralih antara editor desain dan teks dengan menekan Alt + Shift + Right/Left arrow (Control + Shift + Right/Left arrow di Mac). Mengubah penampilan pratinjauTombol di baris atas editor desain memungkinkan Anda mengonfigurasi tampilan tata letak di editor. Gambar 2. Tombol di toolbar Layout Editor yang mengonfigurasi penampilan tata letak Sesuai nomor dalam gambar 2, tombol yang tersedia adalah seperti berikut:
Membuat tata letak baruSaat 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 tata letak default didapatkan, Anda dapat membuat variasi tata letak untuk konfigurasi perangkat tertentu, seperti untuk layar besar. Anda dapat membuat tata letak baru dengan salah satu cara berikut:
Menggunakan tampilan Project
Menggunakan tampilan Android
Menggunakan Resource Manager
Menggunakan varian tata letak untuk mengoptimalkan berbagai layarVarian tata letak adalah versi alternatif dari tata letak saat ini yang dioptimalkan untuk ukuran atau orientasi layar tertentu. Menggunakan varian tata letak yang disarankanAndroid Studio menyertakan varian tata letak umum yang dapat Anda gunakan dalam project. Untuk menggunakan varian tata letak yang disarankan, lakukan hal berikut:
Membuat varian tata letak Anda sendiriJika ingin membuat varian tata letak Anda sendiri, lakukan langkah berikut:
Jika memiliki beberapa variasi tata letak yang sama, Anda dapat beralih di antara tata letak tersebut dengan mengklik Layout Variants Untuk informasi selengkapnya tentang cara membuat tata letak untuk layar yang berbeda, lihat Mendukung ukuran layar berbeda. Mengonversi tampilan atau tata letakAnda dapat mengonversi tampilan ke jenis tampilan lain, dan mengonversi tata letak ke jenis tata letak lain.
Mengonversi tata letak ke ConstraintLayoutUntuk meningkatkan performa tata letak, Anda harus mengonversi tata letak lama ke ConstraintLayout. ConstraintLayout menggunakan sistem tata letak berbasis batasan yang memungkinkan Anda membuat banyak tata letak tanpa kelompok tampilan yang bertumpuk. Untuk mengonversi tata letak saat ini ke ConstraintLayout, lakukan langkah berikut:
Untuk informasi selengkapnya tentang ConstraintLayout, lihat Membuat UI Responsif dengan ConstraintLayout. Menemukan item di PaletteUntuk menelusuri tampilan atau kelompok tampilan berdasarkan nama di Palette, klik tombol Search Anda dapat menemukan item yang sering digunakan dalam kategori Common di Palette. Untuk menambahkan item ke kategori ini, klik kanan pada tampilan atau kelompok tampilan di Palette, lalu klik Favorite di menu konteks. Membuka dokumentasi dari PaletteUntuk membuka dokumentasi referensi Developer Android 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 AndaUntuk mulai membuat tata letak Anda, tarik saja tampilan dan grup tampilan dari Palette ke dalam 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 4. Jendela Attributes Anda dapat mengedit atribut tampilan dari jendela Attributes di sebelah kanan Layout Editor. Jendela ini hanya tersedia saat editor desain terbuka, jadi pastikan Anda menggunakan mode Design atau Split untuk melihat tata letak. Saat Anda memilih tampilan, baik dengan mengklik tampilan di Component Tree atau di editor desain, jendela Attributes menampilkan hal berikut, seperti yang ditunjukkan pada gambar 4:
Menambahkan data contoh ke tampilan AndaKarena banyak tata letak Android yang mengandalkan data waktu proses, mungkin akan sulit untuk memvisualisasikan tampilan dan nuansa tata letak sembari mendesain aplikasi Anda. Di Android Studio 3.2 dan versi yang lebih baru, 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.Anda dapat mengklik kanan salah satu jenis tampilan ini dan memilih Set Sample Data untuk menampilkan jendela Design-time View Attributes, seperti yang ditunjukkan pada gambar 5. Gambar 5. Jendela Design-time View Attributes Pada 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 6. TextView dengan data contoh Pada 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 Support Library). Gambar 7. ImageView dengan data contoh Pada RecyclerView, Anda dapat memilih di antara set 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 8. RecyclerView dengan data contoh Menampilkan peringatan dan error tata letakLayout Editor memberi tahu Anda tentang masalah tata letak di samping tampilan yang sesuai di Component Tree dengan ikon tanda seru lingkaran merah Untuk melihat semua masalah umum pada jendela di bawah editor, klik Show Warnings and Errors ( Mendownload font dan menerapkannya ke teksJika menggunakan Android 8.0 (API level 26) atau Android Support Library 26.0.0 atau yang lebih tinggi, Anda dapat memilih ratusan font dengan mengikuti langkah-langkah berikut:
|