Save the date! Android Dev Summit is coming to Sunnyvale, CA on Oct 23-24, 2019.

Mem-build UI dengan Layout Editor

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

Layout Editor sangat andal saat mem-build layout baru dengan ConstraintLayout——pengelola layout yang disediakan dalam library dukungan yang kompatibel dengan Android 2.3 (API level 9) dan yang lebih tinggi.

Halaman ini menyediakan ringkasan Layout Editor. Untuk mempelajari lebih lanjut dasar-dasar layout, lihat Layout. Untuk mempelajari lebih lanjut tentang cara mem-build layout dengan ConstraintLayout, lihat Mem-build UI Responsif dengan ConstraintLayout.

Pengantar Layout Editor

Layout Editor muncul bila Anda membuka file layout XML.

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

  1. Palette: Daftar tampilan dan grup tampilan yang bisa Anda tarik ke dalam layout.
  2. Component Tree: Hierarki tampilan untuk layout Anda.
  3. Toolbar: Tombol untuk mengonfigurasi penampilan layout Anda di editor dan untuk mengubah beberapa atribut layout.
  4. Design editor: Layout di tampilan Design atau Blueprint, atau keduanya.
  5. Attributes: Kontrol untuk atribut tampilan yang dipilih.

Gambar 1. Layout Editor

Bila Anda membuka file layout XML, editor desain akan dibuka secara default (seperti yang ditampilkan dalam gambar 1).

Untuk mengedit XML layout 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 layout dalam editor. Toolbar ini juga tersedia dalam jendela Preview editor teks.

Gambar 2. Tombol-tombol di toolbar Layout Editor yang mengonfigurasi tampilan layout

Sesuai nomor dalam gambar 2, tombol yang tersedia adalah seperti berikut:

  1. Design and blueprint: Pilih cara Anda ingin menampilkan layout di editor; pilih tampilan Design (pratinjau sesungguhnya layout Anda), tampilan Blueprint (hanya outline untuk setiap tampilan), atau Design + Blueprint untuk tampilan berdampingan.

    Tips: Tekan B untuk berpindah-pindah tampilan.

  2. Screen orientation and layout variants: Pilih antara orientasi layar lanskap dan potret, atau mode layar lainnya yang akan disediakan layout alternatifnya oleh aplikasi Anda, misalnya mode malam. Menu ini juga berisi perintah-perintah untuk membuat varian layout baru.
  3. Device type and size: Pilih tipe 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 mulailah AVD baru dengan memilih Add Device Definition dari daftar.

    Tips: Anda bisa mengubah ukuran perangkat dengan menarik sudut kanan bawah layout.

  4. API version: Pilih versi Android tempat pratinjau layout Anda.
  5. App theme: Pilih tema UI yang akan diterapkan pada pratinjau. (Ini hanya berfungsi untuk gaya layout yang didukung; sehingga banyak tema dalam daftar ini yang mengakibatkan error.)
  6. Language: Pilih bahasa untuk menampilkan string UI Anda. Daftar ini hanya menampilkan bahasa yang tersedia dalam sumber daya string Anda. Jika Anda ingin mengedit terjemahan, klik Edit Translations dari menu drop-down (lihat Melokalkan UI dengan Translations Editor).

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

Membuat layout baru

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

Ada beberapa macam cara untuk membuat layout 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 layout.
  2. Di menu utama, pilih File > New > XML > Layout XML File.
  3. Dalam dialog yang muncul, masukkan nama file, tag layout akar, dan set sumber yang memiliki layout tersebut. Kemudian klik Finish.

Dua cara lain untuk memulai file layout 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 layout tempat Anda ingin menambahkan layout 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 layout

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

  1. Buka file layout 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 dan lanjutkan ke langkah berikutnya.
  3. Dalam dialog yang muncul, Anda hanya perlu mendefinisikan qualifier sumber daya untuk nama direktori tersebut. Anda bisa mengetikkannya dalam Directory name atau pilih dari daftar Available qualifiers, satu per satu, dan klik Add .
  4. Setelah Anda menambahkan semua qualifier, klik OK.

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

Untuk informasi selengkapnya tentang cara membuat layout pada layar yang berbeda, lihat Mendukung Ukuran Layar Berbeda.

Mengonversi tampilan atau layout

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

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

Mengonversi layout ke ConstraintLayout

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

Untuk meningkatkan kinerja layout, Anda harus mengonversi layout lama ke ConstraintLayout.

Untuk mengonversi layout yang ada ke ConstraintLayout, lakukan yang berikut ini:

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

Perintah untuk mengonversi layout secara spesifik ke ConstraintLayout lebih cerdas dalam hal menduga batasan dan memelihara layout daripada sekadar perintah Convert view yang dijelaskan di bagian sebelumnya.

Untuk mempelajari lebih lanjut tentang cara mem-build layout dengan ConstraintLayout, lihat Mem-build UI Responsif dengan ConstraintLayout.

Menemukan item di Palette

Untuk menelusuri suatu tampilan atau grup tampilan berdasarkan nama dalam Palette, klik tombol Search di bagian atas palet, atau cukup dengan mulai mengetikkan nama item tersebut saat jendela Palette aktif.

Anda bisa menemukan item yang sering digunakan dalam kategori Common di Palette. Untuk menambahkan sebuah item ke kategori ini, klik-kanan pada tampilan atau grup tampilan di Palette dan 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 pada elemen UI di Palette dan pilih Material Guidelines dari menu konteks. Jika tidak ada entri spesifik untuk item tersebut, maka perintah ini akan membuka halaman beranda dokumentasi Panduan Material.

Menambahkan tampilan ke layout Anda

Untuk mulai mem-build layout Anda, tarik saja tampilan dan grup tampilan dari Palette ke dalam editor desain. Saat Anda menempatkan sebuah tampilan di layout, editor akan menampilkan informasi tentang hubungan tampilan tersebut dengan bagian layout selebihnya.

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 bila editor desain terbuka, jadi pastikan Anda telah memilih tab Design di bagian bawah jendela.

Bila Anda memilih sebuah tampilan—baik dengan mengkliknya di Component Tree atau di editor desain—jendela Attributes akan menampilkan yang berikut ini, sebagaimana ditunjukkan dalam gambar 3:

  1. Pemeriksa tampilan beserta berbagai kontrol untuk gaya lebar/tinggi, margin, dan bias (hanya tersedia untuk tampilan di ConstraintLayout). Untuk informasi selengkapnya, lihat Mem-build UI Responsif dengan ConstraintLayout.
  2. Daftar atribut umum untuk tampilan yang dipilih. Untuk melihat semua atribut yang tersedia, klik View all attributes di bagian atas jendela.
  3. Atribut favorit yang pernah Anda pilih. Untuk menambahkan atribut, klik View all attributes kemudian klik tanda bintang yang muncul bila Anda mengarahkan kursor mouse di atas sisi kiri nama atribut.

Untuk menelusuri atribut tampilan spesifik, klik View all attributes kemudian klik Search di bagian atas jendela.

Tambahkan data sampel ke tampilan Anda

Karena banyak layout Android yang mengandalkan data waktu proses, mungkin akan sulit untuk memvisualisasikan tampilan dan nuansa layout sambil merancang aplikasi Anda. Di Android Studio 3.2 dan yang lebih baru, Anda bisa menambahkan data pratinjau sampel TextView, ImageView, atau RecyclerView dari dalam Layout Editor.

Saat Anda mengarahkan kursor mouse ke tampilan, tombol atribut waktu-desain akan muncul di tampilan jendela Design. Klik tombol ini untuk menampilkan jendela Design-time View Attributes, seperti yang ditampilkan di gambar 4.

Jendela Figure 4. The Design-time View Attributes

Pada TextView, Anda bisa memilih di antara kategori teks sampel yang berbeda. Saat menggunakan teks sampel, Android Studio mengisikan text atribut TextView dengan data sampel pilihan Anda. Ingat bahwa Anda bisa memilih teks sampel melalui jendela Design-time View Attributes hanya jika atribut text kosong.

Figure 5. A TextView dengan sampel data

Pada ImageView, Anda bisa memilih di antara gambar sampel yang berbeda. Saat Anda memilih gambar sampel, Android Studio akan mengisikan atribut tools:src ImageView (atau tools:srcCompat jika menggunakan Support Library).

Figure 6. ImageView dengan data sampel

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

Figure 7. RecyclerView dengan data sampel

Menampilkan peringatan dan error layout

Jika ada masalah yang terdeteksi di layout Anda, masalah itu akan ditunjukkan di Component Tree bersama ikon tanda seru ( atau ) di sebelah tampilan yang bersangkutan. Untuk melihat detail error, klik ikon tersebut.

Untuk melihat semua masalah yang diketahui dalam jendela di bawah editor, klik Show Warnings and Errors ( atau ) di 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 yang lebih tinggi, Anda bisa memilih dari ratusan font dengan mengikuti langkah-langkah ini:

  1. Di Layout Editor, klik tab Design untuk melihat layout 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 dan klik More Fonts untuk membuka dialog Resources.
  5. Dalam dialog Resources, pilih font dengan menjelajahi daftar atau mengetikkan ke kotak penelusuran di atas. Jika Anda memilih yang dicantumkan pada Downloadable, maka 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 Anda. (Font yang dicantumkan pada Android disediakan di sistem Android, jadi tidak perlu didownload atau dikemas di APK Anda.)
  6. Klik OK.