The Android Developer Challenge is back! Submit your idea before December 2.

Membuat UI dengan Layout Editor

Di Layout Editor, Anda bisa dengan cepat mem-build tata letak dengan menarik elemen UI ke dalam editor desain visual sebagai ganti menulis XML tata letak secara manual. Editor desain ini bisa menampilkan pratinjau tata letak Anda pada beragam versi dan perangkat Android, dan Anda bisa secara dinamis mengubah ukuran tata letak untuk memastikannya berfungsi dengan baik pada berbagai ukuran layar.

Layout Editor sangat berguna saat membangun tata letak baru dengan ConstraintLayout—pengelola tata letak yang disediakan dalam library dukungan yang kompatibel dengan Android 2.3 (API level 9) dan versi yang lebih tinggi.

Halaman ini menyediakan ringkasan Layout Editor. Untuk mempelajari dasar-dasar tata letak lebih lanjut, baca Layout. Untuk mempelajari lebih lanjut cara membuat tata letak dengan ConstraintLayout, baca Membuat UI Responsif dengan ConstraintLayout.

Pengantar Layout Editor

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

Sesuai nomor dalam gambar 1, region editor adalah seperti berikut:

  1. Palette: Daftar tampilan dan grup tampilan yang bisa Anda tarik ke dalam tata letak.
  2. Component Tree: Menampilkan hierarki tata letak Anda.
  3. Toolbar: Tombol untuk mengonfigurasi penampilan tata letak Anda di editor dan untuk mengubah beberapa atribut tata letak.
  4. Design Editor: Tata letak dalam tampilan Desain atau Cetak Biru, atau keduanya.
  5. Attributes: Kontrol untuk atribut tampilan yang dipilih.

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 di editor teks, klik tab Text di bagian bawah jendela. Sedangkan di editor teks, Anda juga bisa menampilkan Palette, Component Tree, dan editor desain dengan mengklik Preview di sisi kanan jendela. Jendela Attributes tidak tersedia dari editor teks.

Tips: Anda bisa beralih antara editor desain dan editor teks dengan menekan Alt + Shift + panah Kanan/Kiri (Control + Shift + panah Kanan/Kiri di Mac).

Mengubah penampilan pratinjau

Tombol-tombol di baris atas editor desain memungkinkan Anda mengonfigurasi penampilan tata letak dalam editor. Toolbar ini juga tersedia di jendela Preview editor teks.

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 menampilkan tata letak di editor; pilih tampilan Design (pratinjau sesungguhnya dari tata letak Anda), tampilan Blueprint (hanya outline untuk setiap tampilan), atau Design + Blueprint untuk tampilan berdampingan.

    Tips: Tekan B untuk beralih tampilan.

  2. Screen orientation and layout variants: Pilih antara orientasi layar lanskap dan potret, atau mode layar lainnya yang aplikasi Anda sediakan dengan tata letak alternatif, seperti mode malam. Menu ini juga berisi perintah-perintah untuk membuat varian tata letak baru.
  3. Device type and size: Pilih jenis perangkat (ponsel/tablet, Android TV, atau Wear OS) dan konfigurasi layar (ukuran dan kepadatan). Anda bisa memilih dari sejumlah tipe perangkat yang telah dikonfigurasi dan definisi AVD Anda sendiri, atau memulai AVD baru dengan memilih Add Device Definition dari daftar.

    Tips: Anda bisa mengubah ukuran perangkat dengan menarik pojok kanan bawah tata letak.

  4. API Version: Pilih versi Android untuk melihat pratinjau tata letak Anda.
  5. 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 yang menyebabkan error.)
  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 (baca Melokalkan UI dengan Translations Editor).

Catatan: Konfigurasi ini tidak berpengaruh pada kode atau manifes aplikasi (kecuali jika Anda memilih untuk menambahkan file tata letak baru dari Layout Variant); konfigurasi ini hanya memengaruhi pratinjau tata letak.

Membuat tata letak baru

Saat menambahkan tata letak baru untuk aplikasi Anda, mulailah dengan membuat file tata letak dalam direktori layout/ default project Anda agar diterapkan pada semua konfigurasi perangkat. Setelah memiliki tata letak default, Anda bisa membuat variasi tata letak untuk konfigurasi perangkat tertentu (misalnya untuk layar ekstra besar).

Ada beberapa macam cara untuk membuat tata letak baru, bergantung pada tampilan jendela Project Anda, tetapi prosedur berikut dapat diakses dari tampilan apa saja:

  1. Di jendela Project, klik modul (misalnya app) yang ingin Anda tambahkan tata letak.
  2. Di menu utama, pilih File > New > XML > Layout XML File.
  3. Dalam dialog yang muncul, masukkan nama file, tag tata letak akar, dan kumpulan sumber yang memiliki tata letak tersebut. Lalu, klik Finish.

Cara lain untuk memulai file tata letak baru (walaupun dialog yang muncul berbeda) adalah sebagai berikut:

  • Jika Anda memilih tampilan Project di jendela Project: buka direktori res untuk modul aplikasi Anda, klik kanan direktori tata letak tempat Anda ingin menambahkan tata letak kemudian klik New > Layout resource file.
  • Jika Anda telah memilih tampilan Android di jendela Project: klik kanan folder layout kemudian pilih New > Layout resource file.

Membuat varian tata letak

Jika Anda sudah memiliki tata letak dan ingin membuat versi alternatifnya untuk mengoptimalkan tata letak bagi orientasi atau ukuran layar yang berbeda, ikuti langkah-langkah ini:

  1. Buka file tata letak asli dan pastikan Anda menampilkan editor desain (klik tab Design di bagian bawah jendela).
  2. Klik Orientation for Preview di toolbar. Dalam daftar drop-down, klik varian yang diusulkan misalnya Create Landscape Variant dan selesai, atau klik Create Other lalu lanjutkan ke langkah berikutnya.
  3. Dalam dialog yang muncul, Anda hanya perlu mendefinisikan qualifier resource untuk nama direktori tersebut. Anda bisa mengetikkannya dalam Directory name atau memilih dari daftar Available qualifiers, satu per satu, dan mengklik Add .
  4. Setelah menambahkan semua qualifier, klik OK.

Jika Anda memiliki beberapa variasi tata letak yang sama, Anda bisa dengan mudah beralih tata letak dari daftar yang muncul saat mengklik Layout Variants .

Untuk mengetahui informasi selengkapnya tentang cara membuat tata letak pada layar yang berbeda, baca Mendukung Ukuran Layar Berbeda.

Mengonversi tampilan atau tata letak

Anda bisa mengonversi suatu tampilan ke jenis tampilan lain, dan Anda bisa mengonversi tata letak (grup tampilan) ke jenis tata letak lain.

  1. Klik tab Design di bagian bawah jendela editor.
  2. Di Component Tree, klik kanan tampilan atau tata letak, kemudian klik Convert view.
  3. Dalam dialog yang muncul, pilih tipe baru tampilan atau tata letak, kemudian klik Apply.

Mengonversikan tata letak ke ConstraintLayout

ConstraintLayout adalah grup tampilan yang tersedia di library Constraint Layout, yang telah disertakan bersama Android Studio 2.2 dan versi yang lebih tinggi. Tata letak ini dibuat dari nol dengan Layout Editor, jadi apa pun dapat diakses dari editor desain dan Anda tidak perlu mengedit XML secara manual. Yang paling penting, sistem tata letak berbasis batasan ini memungkinkan Anda membuat hampir semua tata letak tanpa grup tampilan tersarang.

Untuk meningkatkan performa tata letak, Anda harus mengonversi tata letak lama ke ConstraintLayout.

Untuk mengonversi tata letak yang ada ke ConstraintLayout, lakukan langkah-langkah berikut ini:

  1. Buka tata letak yang ada di Android Studio dan klik tab Design di bagian bawah jendela editor.
  2. Di jendela Component Tree, klik kanan tata letak kemudian klik Convert layout to ConstraintLayout.

Perintah untuk mengonversi tata letak secara spesifik ke ConstraintLayout lebih cerdas dalam hal perkiraan batasan dan pemeliharaan tata letak daripada perintah Convert view sederhana yang dijelaskan di bagian sebelumnya.

Untuk mempelajari lebih lanjut cara membuat tata letak dengan ConstraintLayout, baca Membuat UI Responsif dengan ConstraintLayout.

Menemukan item di Palette

Untuk menelusuri tampilan atau grup tampilan berdasarkan nama di Palette, klik tombol Search di sisi atas palet, atau mulai ketik nama item ketika jendela Palette aktif.

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

Membuka dokumentasi dari Palette

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

Untuk membuka dokumentasi Panduan Material untuk tampilan atau grup tampilan, klik kanan elemen UI di Palette lalu pilih Material Guidelines dari menu konteks. Jika tidak ada entri spesifik untuk item tersebut, perintah ini 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 Anda menggunakan ConstraintLayout, Anda bisa secara otomatis membuat batasan dengan menggunakan fitur Infer Constraints dan Autoconnect.

Mengedit tampilan atribut

Gambar 3. Jendela Attributes

Sebagai ganti mengedit atribut tampilan di XML, Anda bisa melakukannya dari jendela Attributes (di sisi kanan Layout Editor). Jendela ini hanya tersedia jika editor desain terbuka, jadi pastikan Anda telah memilih tab Design di bagian bawah jendela.

Saat Anda memilih tampilan — baik dengan mengkliknya di Component Tree maupun pada editor desain — jendela Attributes akan menampilkan hal-hal berikut, seperti yang ditunjukkan pada gambar 3:

  1. Bagian Declared Attributes, yang mencantumkan atribut yang ditentukan dalam file tata letak. Untuk menambahkan atribut, klik Add di sisi atas bagian tersebut.
  2. Pemeriksa tampilan beserta berbagai kontrol untuk gaya lebar/tinggi. Untuk tampilan dalam ConstraintLayout, bagian ini juga menunjukkan bias batasan dan daftar batasan yang digunakan oleh tampilan. Untuk mengetahui informasi selengkapnya, baca Membuat UI yang Responsif dengan ConstraintLayout.
  3. Daftar atribut umum untuk tampilan yang dipilih. Untuk melihat semua atribut yang tersedia, perluas bagian All Attributes di bagian bawah jendela.
  4. Tombol Penelusuran. Klik tombol ini untuk menelusuri atribut tampilan tertentu.
  5. Indikator di sebelah kanan tiap nilai atribut solid jika nilainya merupakan referensi resource, dan kosong jika tidak. Ini memungkinkan Anda mengenali sekilas nilai hard code. Mengklik indikator dalam kedua kondisi tersebut akan membuka jendela dialog Resources, di mana Anda bisa memilih referensi resource untuk atribut yang sesuai.
  6. Atribut dengan error atau peringatan akan ditandai, dengan tanda highlight warna merah untuk error dan highlight warna oranye untuk peringatan. Salah satu contoh error adalah entri tidak valid dalam atribut yang mendefinisikan tata letak (seperti yang ditunjukkan gambar). Salah satu contoh peringatan adalah penggunaan nilai hard code sementara yang diharapkan adalah referensi resource (seperti gambar).

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 sambil mendesain aplikasi Anda. Di Android Studio 3.2 dan versi yang lebih baru, Anda bisa menambahkan contoh data pratinjau ke TextView, ImageView, atau RecyclerView dari dalam Layout Editor.

Anda bisa mengklik kanan salah satu jenis tampilan ini dan memilih Set Sample Data untuk menampilkan jendela Design-time View Attributes, seperti yang ditunjukkan pada gambar 4.

Gambar 4. Jendela Design-time View Attributes

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

Gambar 5. TextView dengan data contoh

Pada ImageView, Anda bisa memilih di antara gambar contoh yang berbeda. Jika Anda memilih gambar contoh, Android Studio akan mengisi atribut tools:src dari ImageView (atau tools:srcCompat jika menggunakan Library Dukungan).

Gambar 6. ImageView dengan data contoh

Pada RecyclerView, Anda bisa memilih di antara set template yang berisi gambar dan teks contoh. Jika menggunakan template ini, Android Studio akan menambahkan file ke direktori res/layout, recycler_view_item.xml, yang berisi tata letak untuk data contoh. Android Studio juga menambahkan metadata untuk RecyclerView guna menampilkan data contoh dengan tepat.

Gambar 7. RecyclerView dengan data contoh

Menampilkan peringatan dan error tata letak

Jika ada masalah pada tata letak Anda, masalah ini akan ditunjukkan di Component Tree dengan ikon tanda seru ( atau ) di sebelah tampilan terkait. Untuk melihat detail error, klik ikon tersebut.

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

Dari jendela ini Anda juga bisa mengaktifkan Show issues on the preview, yang akan menambahkan sebuah ikon peringatan atau error ke setiap tampilan yang bersangkutan dalam pratinjau (di tampilan desain saja, bukan tampilan blueprint).

Mendownload font dan menerapkannya ke teks

Saat menggunakan Android 8.0 (API level 26) atau Android Support Library 26.0.0 atau versi yang lebih tinggi, Anda bisa memilih dari ratusan font dengan mengikuti langkah-langkah ini:

  1. Di Layout Editor, klik tab Design untuk melihat tata letak Anda di editor desain.
  2. Klik tampilan teks.
  3. Di jendela Attributes, luaskan textAppearance kemudian klik untuk meluaskan kotak fontFamily.
  4. Scroll ke bawah daftar, lalu More Fonts untuk membuka dialog Resources.
  5. Di dialog Resources, pilih font dengan menjelajahi daftar atau mengetikkan ke kotak penelusuran di atas. Jika memilih salah satu yang tercantum dalam Downloadable, Anda bisa mengklik Create downloadable font untuk memuat font pada waktu proses (sebagai font yang bisa didownload ), atau mengklik Add font to project untuk mengemas file font TTF di APK. (Font yang tercantum di Android akan tersedia di sistem Android, jadi tidak perlu didownload atau digabungkan dalam APK.)
  6. Klik OK.