Membuat UI dengan Layout Editor

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.

layout editor

Gambar 1. Layout Editor

  1. Palette: Berisi berbagai tampilan dan kelompok tampilan yang dapat Anda tarik ke dalam tata letak.
  2. Component Tree: Menampilkan hierarki komponen dalam tata letak Anda.
  3. Toolbar: Klik tombol ini untuk mengonfigurasi tampilan tata letak di editor dan mengubah atribut tata letak.
  4. Design editor: Mengedit tata letak dalam tampilan Desain, tampilan Blueprint, atau keduanya.
  5. Attributes: Kontrol untuk atribut tampilan yang dipilih.
  6. View mode: Melihat tata letak Anda dalam mode Code ikon mode kode, Design ikon mode desain, atau Split ikon mode terpisah. 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 ikon mode kode 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:

  1. 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.
  2. 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.

  3. 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.

  4. API version: Pilih versi Android untuk melihat pratinjau tata letak Anda.

  5. 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.

  6. 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

  1. Di jendela Project, klik modul tempat Anda ingin menambahkan tata letak.
  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 asli Anda, klik ikon Design ikon mode desain di pojok kanan atas jendela.
  2. Klik Orientation for Preview (orientasi untuk tombol pratinjau) di toolbar.
  3. 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:

  1. Buka file tata letak asli, lalu klik ikon Design (ikon mode desain) di pojok kanan atas jendela.
  2. Klik Orientation for Preview orientasi untuk tombol pratinjau di toolbar.
  3. Di daftar drop-down, pilih Create Other....
  4. Pada dialog yang muncul, tentukan penentu resource untuk varian. Pilih penentu dari daftar Penentu yang tersedia, lalu klik tombol Add tombol tambahkan penentu . Ulangi langkah ini untuk menambahkan penentu lain sesuai kebutuhan.
  5. 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 tombol varian tata letak 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.

  1. Klik tombol Design di pojok kanan atas jendela editor.
  2. Di Component Tree, klik kanan tampilan atau tata letak, kemudian klik Convert view....
  3. 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:

  1. Buka tata letak saat ini di Android Studio, lalu klik tombol Design di pojok kanan atas jendela editor.
  2. 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 tombol penelusuran palet 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:

  1. Bagian Declared Attributes mencantumkan atribut yang ditentukan dalam file tata letak. Untuk menambahkan atribut, klik tombol Add tombol tambahkan atribut di kanan atas bagian.
  2. 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 menggunakan ConstraintLayout, lihat Membuat UI Responsif dengan ConstraintLayout.
  3. Bagian Common Attributes mencantumkan atribut umum untuk tampilan yang dipilih. Untuk melihat semua atribut yang tersedia, luaskan bagian All Attributes di bagian bawah jendela.
  4. Klik tombol Search untuk menelusuri atribut tampilan tertentu.
  5. Ikon di sebelah kanan setiap nilai atribut menunjukkan apakah nilai atribut merupakan referensi resource. Indikator ini solid ikon indikator solid jika nilai merupakan referensi resource dan kosong ikon indikator 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.

  6. 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.

jendela atribut tampilan waktu desain

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.

tampilan teks dengan data contoh

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).

tampilan gambar dengan data contoh

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.

tampilan berulang dengan data contoh

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 ikon tanda seru lingkaran merah menunjukkan adanya error tata letak untuk error, atau ikon tanda seru segitiga oranye ikon tanda seru segitiga oranye menunjukkan peringatan tata letak untuk peringatan. Klik pada ikon untuk melihat detail selengkapnya.

Untuk melihat semua masalah umum pada jendela di bawah editor, klik Show Warnings and Errors (ikon tanda seru lingkaran merah menunjukkan adanya error tata letak atau ikon tanda seru segitiga oranye menunjukkan peringatan tata letak) 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:

  1. Di Layout Editor, klik tombol Design ikon mode desain untuk melihat tata letak di editor desain.
  2. Klik pada tampilan teks.
  3. Di jendela Attributes, luaskan textAppearance, lalu luaskan kotak fontFamily.
  4. Scroll ke bawah daftar, lalu klik More Fonts untuk membuka dialog Resources.
  5. 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.
  6. Klik OK untuk menyelesaikan.