Cara Membuat UI Android Menggunakan Layout Editor

825

Daftar Isi ;

Anda dapat menggunakan Layout Editor untuk membuat tata letak dengan cepat dengan menyeret elemen UI ke Editor Desain Visual alih-alih mengetik XML tata letak secara manual. Editor desain ini dapat mempratinjau tata letak berbagai versi dan perangkat Android dan mengubah ukuran tata letak secara dinamis untuk memastikannya berfungsi dengan baik pada ukuran layar yang berbeda.

Layout Editor

Editor tata letak muncul saat Anda membuka file tata letak XML.

Palette: Ini berisi berbagai tampilan dan grup tampilan yang dapat Anda seret ke dalam tata letak.
Component Tree: Menampilkan hierarki komponen dalam tata letak.
Toolbar: Klik tombol ini untuk mengonfigurasi tata letak editor dan mengubah atribut tata letak.
Design editor: Edit tata letak dalam tampilan Desain, tampilan Blueprint, atau keduanya.
Attributes: Kontrol untuk atribut tampilan yang dipilih.
View mode: Untuk melihat tata letak Anda dalam mode Code, Design, Split.
Zoom and pan controls: Untuk Mengontrol ukuran pratinjau editor

Saat Anda membuka file tata letak XML, Editor Desain berjalan secara default, seperti yang ditunjukkan pada Gambar. Untuk mengubah tata letak editor teks XML, klik tombol Code di ikon Mode Kode di sudut kanan atas jendela. Perhatikan bahwa Palette, Component Tree, dan Attributes tidak tersedia jika Anda mengubah tata letak tampilan kode.

Merubah Tampilan pratinjau

Gunakan tombol di bagian atas Editor Desain untuk mengonfigurasi tata letak editor.

Design and blueprint: Pilih bagaimana Anda ingin tata letak terlihat di editor. Pilih desain untuk melihat pratinjau tata letak yang diberikan. Pilih Cetak Biru untuk melihat hanya garis luar dari setiap tampilan. Untuk melihat dua tampilan berdampingan, pilih Desain + Cetak Biru. Tekan B untuk menampilkan jenis tampilan ini.
Screen orientation and layout variants: Pilih antara orientasi layar lanskap dan potret, atau pilih mode layar lainnya. Aplikasi ini menawarkan pengaturan alternatif, seperti mode malam. Menu ini juga berisi perintah untuk membuat variasi layout baru. Anda juga dapat menggunakan tombol O untuk mengubah arah.
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 dikonfigurasikan sebelumnya dalam definisi AVD Anda sendiri, atau membuat AVD baru dengan menambahkan definisi perangkat dari daftar. Anda dapat mengubah ukuran perangkat dengan menyeret di sudut kanan bawah tata letak. Tekan D untuk melihat daftar lengkap perangkat.
API version: Pilih versi Android untuk melihat tata letak.
App theme: Pilih tema UI yang ingin Anda gunakan di pratinjau. Perhatikan bahwa ini hanya berfungsi untuk gaya tata letak yang didukung, karena banyak topik dalam daftar menghasilkan kesalahan.
Language: Pilih bahasa untuk menampilkan string antarmuka pengguna. Daftar ini hanya menampilkan bahasa yang tersedia di sumber daya string. Untuk mengedit terjemahan, klik Edit Terjemahan di menu tarik-turun. Untuk informasi selengkapnya tentang menggunakan terjemahan, lihat Menemukan Antarmuka dengan Editor Terjemahan.

Membuat tata letak baru

Saat menambahkan layout baru ke aplikasi, Anda harus terlebih dahulu membuat file layout default di direktori project layout/default agar bisa digunakan di semua konfigurasi perangkat. Jika Anda memiliki tata letak default, Anda dapat membuat varian tata letak untuk konfigurasi perangkat tertentu serta layar besar.

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