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.
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 Editor
Layout Editor akan muncul bila Anda membuka file tata letak XML.
Gambar 1. Layout Editor
- Palette: Berisi berbagai tampilan dan kelompok tampilan yang dapat Anda tarik ke dalam tata letak.
- Component Tree: Menampilkan hierarki komponen dalam tata letak Anda.
- Toolbar: Klik tombol ini untuk mengonfigurasi tampilan tata letak di editor dan mengubah atribut tata letak.
- Design editor: Mengedit tata letak dalam tampilan Desain, tampilan Blueprint, atau keduanya.
- Attributes: Kontrol untuk atribut tampilan yang dipilih.
- View mode: Melihat tata letak Anda dalam mode Code
, Design
, atau Split
. Mode Split menampilkan jendela Code dan Design secara bersamaan.
- 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 jendela
Palette, Component Tree, dan Attributes tidak tersedia
saat mengedit tata letak Anda dalam tampilan 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 pratinjau
Tombol 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:
- Design and blueprint: Pilih cara Anda ingin melihat tata letak di
editor. 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. Anda juga dapat menekan
B
untuk melihat semua jenis tampilan ini. - Screen orientation and layout variants: Pilih antara orientasi layar lanskap dan
potret, atau pilih mode layar lain yang aplikasi Anda
sediakan dengan tata letak alternatif, seperti mode malam. Menu ini juga
berisi perintah-perintah untuk membuat varian tata letak baru.
Anda juga dapat menekan
O
untuk mengubah orientasi. 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, atau Anda dapat membuat AVD baru dengan memilih Add Device Definition dari daftar. Anda dapat mengubah ukuran perangkat dengan menarik sudut kanan bawah tata letak. Anda juga dapat menekan
D
untuk melihat seluruh daftar perangkat. Menguji tata letak pada Reference Devices ini akan membantu memastikan bahwa aplikasi Anda akan diskalakan dengan baik pada keadaan tata letak di perangkat sebenarnya.Gambar 3. Menu alat pilih perangkat dengan Reference Devices.
API version: Pilih versi Android untuk melihat pratinjau tata letak Anda.
App theme: Pilih tema UI mana yang akan diterapkan ke pratinjau. Perlu diperhatikan bahwa ini hanya berfungsi untuk gaya tata letak yang didukung, sehingga banyak tema dalam daftar ini menghasilkan kesalahan.
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 drop-down . Untuk informasi selengkapnya tentang menggunakan terjemahan, lihat Melokalkan UI dengan Editor Terjemahan.
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 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 menu utama Android Studio
- Di jendela Project, klik modul tempat Anda ingin menambahkan tata letak.
- Di menu utama, pilih File > New > XML > Layout XML File.
- Pada dialog yang muncul, berikan nama file, tag tata letak root, dan set sumber tempat tata letak berada.
- Klik Finish untuk membuat tata letak.
Menggunakan tampilan Project
- Pilih tampilan Project dari dalam jendela Project.
- Klik kanan direktori tata letak tempat Anda ingin menambahkan tata letak.
- Pada menu konteks yang muncul, klik New > Layout Resource File.
Menggunakan tampilan Android
- Pilih tampilan Android dari dalam jendela Project.
- Klik kanan folder
layout
. - Pada menu konteks yang muncul, pilih New > Layout Resource File.
Menggunakan Resource Manager
- Di Resource Manager, pilih tab Layout.
- 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:
- Buka file tata letak asli Anda, klik ikon Design
di pojok kanan atas jendela.
- Klik Orientation for Preview
(
) di toolbar.
- Dalam daftar drop-down, pilih varian yang disarankan, seperti Create Landscape Variant.
Membuat varian tata letak Anda sendiri
Jika ingin membuat varian tata letak Anda sendiri, lakukan langkah berikut:
- Buka file tata letak asli, lalu klik ikon Design
(
) di pojok kanan atas jendela.
- Klik Orientation for Preview
di toolbar.
- Di daftar drop-down, pilih Create Other....
- Pada dialog yang muncul, tentukan penentu resource untuk varian.
Pilih penentu dari daftar Penentu yang tersedia, lalu klik
tombol Add
. Ulangi langkah ini untuk menambahkan penentu lain sesuai kebutuhan.
- Setelah Anda menambahkan semua penentu, klik OK.
Jika memiliki beberapa variasi tata letak yang sama, Anda dapat beralih di antara
tata letak tersebut dengan mengklik Layout Variants
dan memilih dari daftar yang muncul.
Untuk informasi selengkapnya tentang cara membuat tata letak untuk layar yang berbeda, lihat Mendukung ukuran layar berbeda.
Mengonversi tampilan atau tata letak
Anda dapat mengonversi tampilan ke jenis tampilan lain, dan mengonversi tata letak ke jenis tata letak lain.
- Klik tombol Design di pojok kanan atas jendela editor.
- Di Component Tree, klik kanan tampilan atau tata letak, kemudian klik Convert view....
- Pada dialog yang muncul, pilih jenis baru tampilan atau tata letak, kemudian klik Apply.
Mengonversi tata letak ke ConstraintLayout
Untuk 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:
- Buka tata letak saat ini di Android Studio, lalu klik tombol Design di pojok kanan atas jendela editor.
- 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.
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 Palette
Untuk 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 Anda
Untuk 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:
- Bagian Declared Attributes mencantumkan atribut yang ditentukan dalam file
tata letak. Untuk menambahkan atribut, klik tombol Add
di kanan atas bagian.
- Bagian Layout 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 menggunakanConstraintLayout
, lihat Membuat UI Responsif dengan ConstraintLayout. - Bagian Common Attributes mencantumkan atribut umum untuk tampilan yang dipilih. Untuk melihat semua atribut yang tersedia, luaskan bagian All Attributes di bagian bawah jendela.
- Klik tombol Search untuk menelusuri atribut tampilan tertentu.
- Ikon di sebelah kanan setiap nilai atribut menunjukkan apakah
nilai atribut merupakan referensi resource. Indikator ini solid
jika nilai merupakan referensi resource dan kosong
jika nilai merupakan hard code. Indikator ini membantu Anda mengenali nilai hard code secara sekilas. Mengklik indikator pada salah satu status akan membuka jendela dialog Resource tempat Anda dapat memilih referensi resource untuk atribut terkait.
Sorotan berwarna merah di sekitar nilai atribut menunjukkan adanya error pada nilai tersebut. Error mungkin menunjukkan entri yang tidak valid untuk atribut yang mendefinisikan tata letak, seperti yang ditampilkan dalam sorotan berwarna merah pada gambar 3.
Sorotan berwarna oranye menunjukkan peringatan untuk nilai tersebut. Peringatan dapat muncul jika Anda menggunakan nilai hard code di tempat yang seharusnya bernilai referensi resource, misalnya.
Menambahkan data contoh ke tampilan Anda
Karena 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.
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 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 pada 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
Jika 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:
- Di Layout Editor, klik tombol Design
untuk melihat tata letak di editor desain.
- Klik pada tampilan teks.
- Di jendela Attributes, luaskan textAppearance, lalu luaskan kotak fontFamily.
- Scroll ke bawah daftar, lalu klik More Fonts untuk membuka dialog Resources.
- Dalam dialog Resources, pilih font dengan menjelajahi daftar atau dengan mengetik di kotak penelusuran di bagian atas. Jika Anda memilih font dari Downloadable, Anda dapat mengklik Create downloadable font untuk memuat font pada waktu proses sebagai font yang dapat didownload, atau mengklik Add font to project untuk memaketkan file font TTF di APK Anda. Perlu diperhatikan bahwa font yang tercantum pada Android disediakan oleh sistem Android, sehingga tidak perlu didownload atau disertakan dalam APK.
- Klik OK untuk menyelesaikan.