Skip to content

Most visited

Recently visited

navigation

Membangun UI dengan Layout Editor

Di Layout Editor Android Studio, Anda bisa dengan cepat membangun layout dengan menyeret widget ke dalam editor desain visual sebagai ganti menulis XML layout secara manual. Editor ini bisa menampilkan pratinjau layout Anda dalam berbagai versi dan perangkat Android, dan Anda secara dinamis bisa mengubah ukuran layout untuk memastikannya berfungsi dengan baik pada berbagai ukuran layar. Layout Editor sangat berguna saat membangun layout baru dengan ConstraintLayout—pengelola layout yang disediakan dalam pustaka dukungan yang kompatibel dengan Android 2.3 (API level 9) dan yang lebih tinggi.

Laman ini menyediakan ringkasan fitur dan antarmuka Layout Editor. Untuk mengetahui selengkapnya tentang cara membangun layout dengan ConstraintLayout, lihat Membangun UI Responsif dengan ConstraintLayout.

Pengantar Editor

Layout Editor muncul bila Anda membuka file layout XML. Sesuai angka dalam gambar 1, region editor adalah seperti berikut:

  1. Palette: Menyediakan daftar widget dan layout yang bisa Anda seret ke dalam layout di editor.
  2. Component Tree: Menampilkan hierarki tampilan untuk layout Anda. Klik sebuah item di sini untuk melihatnya dipilih dalam editor.
  3. Toolbar: Menyediakan tombol untuk mengonfigurasi penampilan layout di editor dan untuk mengedit properti layout.
  4. Design Editor: Menampilkan layout Anda bersama tampilan Design dan Blueprint.
  5. Properties: Menyediakan kontrol properti untuk tampilan yang dipilih saat ini.

Gambar 1. Layout Editor menampilkan editor Design

Bila Anda membuka file layout XML, editor Design akan dibuka secara default (seperti yang ditampilkan dalam gambar 1). Untuk mengedit XML di editor Text, klik tab Text di bagian bawah jendela. Saat di editor Text, Anda juga bisa menampilkan editor Palette, Component Tree, dan Design (seperti yang ditampilkan dalam gambar 2) dengan mengeklik Preview di sisi kanan jendela. Akan tetapi, jendela Properties tidak tersedia dari editor Text.

Tip: Anda bisa beralih antara editor Design dan Text dengan menekan Control+Shift+panah Kanan/Kiri.

Gambar 2. Editor Text dengan jendela Preview dibuka

Mengubah penampilan pratinjau

Tombol-tombol di baris atas editor Design memungkinkan Anda mengonfigurasi penampilan layout dalam editor. Bilah alat ini juga tersedia dalam editor Text di jendela Preview.

Gambar 3. Tombol-tombol di bilah alat Layout Editor yang mengonfigurasi penampilan layout

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

  1. Desain dan cetak biru: Pilih cara Anda ingin menampilkan layout di editor. Tampilan Design menampilkan pratinjau berwarna dari layout Anda, sedangkan tampilan Blueprint hanya menampilkan garis luar setiap tampilan. Atau Anda bisa menampilkan Design + Blueprint berdampingan.

    Tip: Anda bisa beralih tampilan dengan menekan B.

  2. Orientasi layar: Memutar perangkat antara lanskap dan potret.
  3. Ukuran dan tipe perangkat: Pilih tipe perangkat (ponsel/tablet, Android TV, atau Android Wear) 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.

    Tip: Anda bisa mengubah ukuran perangkat dengan menyeret sudut kanan bawah layout.

  4. Versi API: Pilih versi Android tempat pratinjau layout Anda.
  5. Tema aplikasi: Pilih tema UI yang akan diterapkan pada pratinjau. Catatan: Ini hanya berfungsi untuk gaya layout yang didukung; sehingga banyak tema dalam daftar ini yang mengakibatkan kesalahan.
  6. Bahasa: 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 tarik-turun (lihat Melokalkan UI dengan Translations Editor).
  7. Varian Layout: Beralih ke salah satu layout alternatif Anda untuk file ini, atau buat yang baru (lihat Membuat varian layout di bawah).

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

Membuat Layout Baru

Saat menambahkan layout baru untuk aplikasi Anda, mulailah dengan membuat file layout dalam direktori layout/ default proyek Anda sehingga diterapkan pada semua konfigurasi perangkat. Setelah memiliki layout default, Anda bisa membuat variasi layout itu untuk konfigurasi perangkat tertentu (misalnya untuk layar ekstra besar)—jika itu yang Anda inginkan, lompat ke buat varian layout.

Ada beberapa macam cara untuk membuat layout baru, bergantung pada tampilan jendela Project Anda, namun 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.

Gambar 4. Dialog untuk menambahkan file XML layout baru

Dua cara lain untuk memulai file layout baru (walaupun dialog yang muncul berbeda) adalah sebagai berikut:

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 asal dan pastikan Anda menampilkan editor Design (klik tab Design di bagian bawah jendela).
  2. Klik Layout Variants di bilah alat. Dalam daftar tarik-turun, 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.

Bila Anda memiliki beberapa variasi layout yang sama, Anda bisa dengan mudah berpindah layout dari daftar yang muncul bila Anda mengeklik Layout Variants .

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

Mengonversikan layout ke ConstraintLayout

ConstraintLayout adalah grup tampilan yang tersedia di pustaka Constraint Layout, yang telah disertakan bersama Android Studio 2.2 dan yang lebih tinggi. Layout ini dibangun dari nol bersama Layout Editor, jadi apa saja dapat diakses dari Design editor dan Anda tidak perlu mengedit XML secara manual. Yang paling penting, sistem layout berbasis batasan ini memungkinkan Anda membangun hampir semua layout tanpa menyarangkan grup tampilan apa pun.

Untuk meningkatkan kinerja layout, Anda harus mengonversi layout lama ke ConstraintLayout. Android Studio memiliki konverter bawaan untuk membantu Anda melakukan 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 layout kemudian klik Convert layout to ConstraintLayout.

Untuk mengetahui selengkapnya tentang cara membangun layout dengan ConstraintLayout, lihat Membangun UI Responsif dengan ConstraintLayout.

Menambahkan Tampilan ke Layout Anda

Membangun layout untuk aplikasi mengharuskan Anda memahami dasar-dasar layout, namun Android Studio menghilangkan kerumitan dalam mengerjakan langsung di file XML. Layout Editor membantu Anda menyelesaikan banyak pekerjaan dengan menyeret widget ke dalam editor Design dan memperbaiki atribut layout di jendela Properties .

Untuk mulai membangun layout Anda, seret saja tampilan dari panel Palette ke dalam editor Design. Saat Anda menempatkan sebuah tampilan di layout, editor akan menunjukkan hubungan tampilan itu dengan bagian layout selebihnya dengan cara semestinya menurut tipe layout di mana Anda menempatkannya.

Misalnya, video 1 menampilkan bagaimana menyeret TextView ke dalam ConstraintLayout akan membuat batasan di bawah dan diratakan ke kiri pada TextView di atas (dengan mengaktifkan Autoconnect).

Video 1.Layout Editor bisa menambahkan batasan bagi tampilan Anda bila menyeretnya ke dalam editor

Saat menyeret tampilan ke dalam layout selain ConstraintLayout, Layout Editor akan merespons berbeda, sesuai properti layout yang tersedia untuk layout itu.

Kesalahan yang terdeteksi di layout Anda akan dihitung di bilah alat. Untuk menampilkannya, klik Show Warnings and Errors .

Penampilan di editor Design adalah untuk pratinjau saja. Walaupun mengedit layout di editor Design bisa memberi Anda penampilan yang lebih akurat, Anda harus menjalankan aplikasi di emulator atau perangkat sungguhan untuk memverifikasi hasilnya.

Untuk informasi selengkapnya tentang cara kerja View API Android untuk membangun layout, lihat Dasar-dasar Layout. Atau untuk panduan menggunakan ConstraintLayout, lihat Membangun UI Responsif dengan ConstraintLayout.

Mengedit properti tampilan

Gambar 5. Jendela Properties

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

Pilih tampilan di editor untuk melihat dan mengedit properti umum bagi tampilan itu. Jika Anda perlu mengakses properti lainnya untuk tampilan itu, klik View all properties .

Bila tampilan yang dipilih adalah anak dari ConstraintLayout, jendela Properties akan menyertakan pemeriksa tampilan di bagian atas sejumlah kontrol, seperti yang ditampilkan dalam gambar 7. Untuk informasi selengkapnya tentang kontrol properti bagi tampilan di ConstraintLayout, lihat Membangun UI Responsif dengan ConstraintLayout.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)