Google berkomitmen untuk mendorong terwujudnya keadilan rasial bagi komunitas Kulit Hitam. Lihat caranya.

Men-debug tata letak Anda dengan Layout Inspector

Layout Inspector di Android Studio memungkinkan Anda membandingkan tata letak aplikasi dengan tiruan desain, menampilkan tampilan aplikasi yang diperbesar, dan memeriksa detail tata letak tersebut pada waktu proses. Fitur ini berguna ketika tata letak Anda di-build pada waktu proses dan bukan keseluruhan dalam XML, serta ketika tata letak berperilaku tidak terduga.

Banyak fungsi di Layout Inspector yang sebelumnya disediakan oleh fitur Hierarchy Viewer dan Pixel Perfect yang tidak digunakan lagi.

Membuka Layout Inspector

Untuk membuka Layout Inspector, lakukan langkah berikut:

  1. Jalankan aplikasi Anda pada emulator atau perangkat yang terhubung.
  2. Klik Tool > Layout Inspector.
  3. Pada dialog Choose Process yang muncul, pilih proses aplikasi yang ingin Anda periksa, lalu klik OK.

    Gambar 1. Dialog Choose Process

    Secara default, dialog Choose Process hanya mencantumkan proses untuk project yang saat ini terbuka di Android Studio dan berjalan pada perangkat atau emulator. Jika Anda ingin memeriksa aplikasi lain yang ada di perangkat, centang Show all processes. Jika menggunakan perangkat yang telah di-root atau emulator tanpa Google Play Store, Anda akan melihat semua aplikasi yang sedang berjalan. Jika tidak, Anda hanya akan melihat aplikasi yang dapat di-debug.

Layout Inspector mengambil snapshot, menyimpannya sebagai file .li, dan membukanya.

Seperti dalam gambar 2, Layout Inspector menampilkan hal berikut:

  1. View Tree: Hierarki tampilan dalam tata letak.
  2. Toolbar Layout Inspector: Fitur untuk Layout Inspector.
  3. Screenshot: Screenshot tata letak aplikasi seperti yang muncul di perangkat Anda, dengan batas tata letak yang terlihat untuk setiap tampilan.
  4. Properties Table: Properti tata letak untuk tampilan yang dipilih.

Gambar 2. Layout Inspector

Memilih tampilan

Untuk memilih tampilan, klik tampilan dalam View Tree atau screenshot. Semua atribut tata letak untuk tampilan yang dipilih akan muncul dalam Properties Table.

Jika tata letak Anda berisi tampilan yang tumpang tindih, hanya tampilan di depan yang dapat diklik dalam screenshot. Untuk memilih tampilan yang tidak berada di depan, klik tampilan dalam View Tree.

Memisahkan tampilan

Untuk bekerja dengan tata letak yang rumit, Anda dapat memisahkan tampilan individual sehingga hanya satu subset tata letak yang ditunjukkan dalam View Tree dan dirender dalam screenshot.

Anda hanya dapat memisahkan tampilan ketika perangkat masih terhubung. Memisahkan tampilan mengharuskan perangkat merender tata letak agar Layout Inspector dapat mengambil screenshot lain.

Untuk memisahkan tampilan, lakukan salah satu cara berikut:

  • Klik dua kali tampilan dalam screenshot.
  • Klik kanan tampilan dalam View Tree, lalu pilih Render Subtree Preview.

Untuk kembali ke tampilan yang memuatnya, klik panah di sudut kiri atas Tree View.

Menyembunyikan batas tata letak

Agar dapat menyembunyikan kotak pembatas untuk elemen tata letak, klik kanan elemen dalam View Tree, lalu batalkan pilihan Show layout bounds.

Elemen tata letak dengan Show layout bounds yang batal dipilih tidak dapat dipilih dengan cara mengklik dalam screenshot.

Memperbesar dan menggunakan petak referensi untuk memeriksa detail tata letak

Anda dapat mengontrol overlay petak dan tingkat zoom screenshot menggunakan tombol di toolbar Layout Editor:

  • Untuk memperbesar screenshot, klik Zoom In .
  • Untuk memperkecil screenshot, klik Zoom Out .
  • Untuk menampilkan tata letak dengan perbesaran di mana satu piksel dalam screenshotnya sesuai dengan piksel pada perangkat, klik Actual Size .
  • Untuk menempatkan petak piksel, klik Grid . Petak hanya tersedia pada level zoom tinggi.

Membandingkan tata letak aplikasi dengan overlay gambar referensi

Untuk membandingkan tata letak aplikasi Anda dengan gambar referensi, seperti tiruan UI, Anda dapat memuat overlay gambar bitmap di Layout Inspector.

  • Untuk memuat overlay, klik Load Overlay di bagian atas Layout Inspector. Overlay diskalakan agar sesuai dengan tata letak.
  • Untuk menyesuaikan transparansi overlay, gunakan penggeser Alpha.
  • Untuk menghapus overlay, klik Clear Overlay .

Mengambil screenshot baru untuk merekam perubahan tata letak

Jika tata letak perangkat berubah, Layout Inspector tidak akan mengupdate secara otomatis. Untuk merekam perubahan tata letak, buat screenshot baru dengan mengklik kembali Tools > Layout Inspector.

Tiap screenshot disimpan dalam file .li yang terpisah di project-name/captures/ dan terbuka di tab baru.

Gambar 3. Snapshot Layout Inspector (file .li ) di jendela Project

Anda dapat memuat ulang screenshot sebelumnya dengan mengklik dua kali file .li dalam project-name/captures/.