Men-debug tata letak dengan Layout Inspector dan Layout Validation

Layout Inspector di Android Studio memungkinkan Anda men-debug tata letak aplikasi dengan menampilkan hierarki tampilan dan memungkinkan Anda memeriksa properti setiap tampilan. Dengan Layout Inspector, Anda dapat membandingkan tata letak aplikasi dengan mockup desain, menampilkan tampilan aplikasi yang diperbesar atau 3D, dan memeriksa detail tata letaknya saat runtime. Alat ini sangat berguna jika tata letak Anda dibuat saat runtime, tidak sepenuhnya dalam XML dan tata letak berperilaku secara tidak terduga.

Layout Validation memungkinkan Anda melihat pratinjau tata letak di berbagai perangkat dan konfigurasi tampilan secara bersamaan, termasuk ukuran font variabel atau bahasa pengguna, sehingga memudahkan pengujian berbagai masalah tata letak umum.

Untuk membuka Layout Inspector, jalankan aplikasi Anda pada emulator atau perangkat yang terhubung, lalu pilih Tools >Layout Inspector.

Snapshot Layout Inspector untuk aplikasi contoh Sunflower

Gambar 1. Snapshot Layout Inspector untuk aplikasi contoh Sunflower. Layout Inspector menampilkan hal berikut dari kiri ke kanan: Component Tree (Hierarki Komponen), Layout Display (Tampilan Tata Letak), dan Attributes (Atribut).

  • Component Tree: Hierarki tampilan dalam tata letak.
  • Layout Display: Rendering tata letak aplikasi seperti yang ditampilkan pada perangkat atau emulator, dengan batas tata letak yang ditampilkan untuk setiap tampilan.
  • Attributes: Atribut tata letak untuk tampilan yang dipilih. Layout Inspector memerlukan mulai ulang aktivitas untuk mengakses atribut. Untuk informasi selengkapnya, lihat Memulai ulang aktivitas.

Untuk mempelajari Layout Editor, lihat Pengantar Layout Editor.

Live Updates

Layout Display merender tata letak aplikasi seperti yang tampak pada perangkat atau emulator, dengan batas tata letak yang ditampilkan untuk setiap tampilan. Anda dapat mengklik setiap komponen untuk memeriksanya.

Live Layout Inspector memberikan insight real-time lengkap ke UI aplikasi saat di-deploy ke perangkat atau emulator yang menjalankan API level 29 atau lebih tinggi.

Untuk mengaktifkan Live Layout Inspector, pilih opsi Live Updates dari toolbar Layout Inspector.

Live Layout Inspector menyertakan hierarki tata letak dinamis, sehingga Component Tree, dan Layout Display juga akan diperbarui jika tampilan perangkat berubah.

Memilih atau memisahkan tampilan

Tampilan biasanya menggambar sesuatu yang terlihat, dan pengguna dapat berinteraksi dengannya. Component Tree menampilkan hierarki aplikasi secara real time dengan setiap komponen tampilan, yang membantu Anda men-debug tata letak aplikasi karena dapat memvisualisasikan elemen dalam aplikasi dan nilai yang terkait dengannya.

Untuk memilih tampilan, klik tampilan di Component Tree atau Layout Display. Semua atribut tata letak untuk tampilan yang dipilih akan muncul dalam panel Attributes.

Jika tata letak menyertakan tampilan tumpang tindih, Anda dapat memilih tampilan di urutan belakang dengan mengkliknya di Component Tree, atau dengan memutar tata letak.

Jika mengerjakan tata letak yang rumit, Anda dapat memisahkan setiap tampilan sehingga hanya bagian tertentu dari tata letak yang diperlihatkan dalam Component Tree dan dirender dalam Layout Display.

Menu tampilan terpisah

Gambar 2. Untuk memisahkan tampilan, klik kanan tampilan di Component Tree dan pilih Show Only Subtree atau Show Only Parents.

Untuk kembali ke tampilan penuh, klik kanan tampilan, lalu pilih Show All.

Menyembunyikan batas tata letak dan label tampilan

Untuk menyembunyikan kotak pembatas atau label tampilan elemen tata letak, klik View Options Tombol Opsi Tampilan di bagian atas Layout Display, lalu ganti ke Show Borders atau Show View Label.

Menu drop-down opsi Tampilan

Gambar 3. Untuk menyembunyikan batas tata letak dan label tampilan, klik View Options kedua di toolbar Layout Inspector.

Mode 3D

Layout Display menampilkan visualisasi 3D yang canggih dari hierarki tampilan aplikasi Anda saat runtime. Untuk menggunakan fitur ini, di jendela Live Layout Inspector, klik tombol 3D Mode Tombol 3D, lalu putar dengan menarik mouse.

Layout Inspector: tampilan 3D

Gambar 4. Tampilan 3D dari Tata Letak yang diputar.

Layout inspector: layer spacing view (tampilan jarak layar)

Gambar 5. Untuk meluaskan atau menciutkan lapisan Layout, gunakan penggeser Layer Spacing.

Membandingkan tata letak aplikasi dengan gambar overlay referensi

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

  • Untuk memuat overlay, pilih opsi Load Overlay dari toolbar Layout Inspector. Overlay diskalakan agar menyesuaikan tata letak.
  • Untuk menyesuaikan transparansi overlay, gunakan penggeser Overlay Alpha.
  • Untuk menghapus overlay, klik Clear Overlay .

Layout Validation

Layout Validation adalah alat visual untuk melihat pratinjau tata letak secara serentak di berbagai perangkat dan konfigurasi tampilan, sehingga Anda dapat mendeteksi masalah tata letak lebih awal. Untuk mengakses alat ini, klik tab Layout Validation di pojok kanan atas jendela IDE:

Screenshot tab Layout Validation

Gambar 6. Tab Layout Validation.

Untuk berganti-ganti konfigurasi yang tersedia, pilih salah satu pilihan berikut dari menu dropdown Reference Devices di bagian atas jendela Layout Validation:

  • Reference Devices
  • Kustom
  • Color Blind
  • Font Sizes

Screenshot menu dropdown di alat Layout Validation

Gambar 7. Opsi menu dropdown Reference Devices.

Reference Devices

Perangkat referensi (Reference devices) adalah serangkaian perangkat yang kami rekomendasikan untuk melakukan pengujian. Perangkat tersebut mencakup antarmuka ponsel, perangkat foldable, tablet, dan desktop. Anda harus melihat pratinjau tampilan tata letak Anda di rangkaian perangkat referensi ini:

Screenshot pratinjau tata letak untuk berbagai perangkat referensi

Gambar 8. Pratinjau perangkat referensi di alat Layout Validation.

Kustom

Untuk menyesuaikan konfigurasi tampilan sebelum pratinjau, pilih berbagai setelan yang ada seperti bahasa, perangkat, atau orientasi layar:

Menyesuaikan tampilan perangkat di alat Layout Validation

Gambar 9. Mengonfigurasi tampilan kustom pada alat Layout Validation.

Color Blind

Agar aplikasi Anda mudah diakses pengguna buta warna, validasikan tata letak Anda dengan melakukan simulasi untuk jenis buta warna umum:

Screenshot pratinjau simulasi untuk berbagai jenis buta warna

Gambar 10. Pratinjau simulasi buta warna pada alat Layout Validation

Font Sizes

Validasi tata letak di berbagai ukuran font dan mudahkan akses pengguna yang menderita gangguan penglihatan dengan mengujinya menggunakan font berukuran besar.

Pratinjau tata letak aplikasi di berbagai ukuran font dengan error tata letak yang terlihat untuk font besar

Gambar 11. Pratinjau ukuran font variabel pada alat Layout Validation.

Mengambil snapshot hierarki tata letak

Layout Inspector memungkinkan Anda menyimpan snapshot hierarki tata letak aplikasi yang sedang berjalan sehingga Anda dapat membagikannya dengan mudah kepada orang lain atau menunjukkannya nanti.

Snapshot mengambil data yang biasanya akan Anda lihat saat menggunakan Layout Inspector, termasuk rendering 3D mendetail dari tata letak, hierarki komponen tata letak Tampilan, Compose, atau hybrid, serta atribut mendetail untuk setiap komponen UI Anda. Untuk menyimpan snapshot, lakukan hal berikut:

  1. Buka layout inspector.
  2. Layout Inspector akan terhubung ke proses aplikasi Anda secara otomatis. Jika tidak, pilih proses aplikasi dari menu dropdown.
  3. Jika Anda ingin mengambil snapshot, klik Export snapshot Ikon
ekspor dari toolbar Layout Inspector.
  4. Pada dialog sistem yang muncul, tentukan nama dan lokasi yang diinginkan untuk menyimpan snapshot. Pastikan untuk menyimpan file dengan ekstensi *.li.

Anda dapat memuat snapshot Layout Inspector dengan memilih File > Open dari panel menu utama, dan membuka file *.li.

GIF snapshot Layout Inspector

Gambar 12. Mengambil snapshot di Layout Inspector.

Memeriksa Compose

Layout Inspector memungkinkan Anda memeriksa tata letak Compose di dalam aplikasi yang berjalan di emulator atau perangkat fisik. Anda dapat menggunakan Layout Inspector untuk memeriksa seberapa sering composable direkomposisi atau dilewati, yang dapat membantu mengidentifikasi masalah pada aplikasi. Misalnya, beberapa error coding dapat memaksa UI Anda untuk merekomposisi secara berlebihan, yang dapat menyebabkan performa yang buruk. Beberapa error coding dapat mencegah rekomposisi UI Anda dan, oleh karena itu, mencegah perubahan UI Anda muncul di layar.

Jumlah rekomposisi Compose di Layout Inspector

Saat men-debug tata letak Compose, mengetahui kapan rekomposisi composable penting untuk dipahami jika UI Anda diterapkan dengan benar. Misalnya, jika rekomposisi terlalu sering, aplikasi Anda mungkin melakukan lebih banyak pekerjaan daripada yang diperlukan. Di sisi lain, komponen yang tidak merekomposisi saat Anda mengharapkannya dapat menyebabkan perilaku yang tidak terduga.

Layout Inspector memungkinkan Anda melihat kapan composable terpisah di hierarki tata letak telah direkomposisi atau dilewati. Informasi ini ditampilkan langsung, saat Anda berinteraksi dengan aplikasi.

Untuk memulai, pastikan aplikasi Anda menggunakan API level 29 atau yang lebih tinggi, dan Compose 1.2.0-alpha03 atau yang lebih tinggi. Kemudian, deploy aplikasi seperti biasa.

Penghitung komposisi dan lewati di Layout Inspector

Gambar 13. Penghitung komposisi dan lewati di Layout Inspector.

Buka jendela Layout Inspector dan hubungkan ke proses aplikasi Anda. Pada Component Tree, ada dua kolom yang muncul di samping hierarki tata letak. Kolom pertama menampilkan jumlah komposisi untuk setiap node dan kolom kedua menampilkan jumlah lewati untuk setiap node. Memilih node composable akan menampilkan dimensi dan parameter composable, kecuali jika node composable merupakan fungsi inline, dalam hal ini parameter tidak dapat ditampilkan. Anda juga dapat melihat informasi serupa di panel Attributes saat memilih composable dari Component Tree atau Layout Display.

Mereset jumlah dapat membantu Anda memahami rekomposisi atau lewati selama interaksi tertentu dengan aplikasi Anda. Jika Anda ingin mereset jumlah, klik Reset di dekat bagian atas panel Component Tree.

Mengaktifkan penghitung komposisi dan lewati di Layout Inspector

Gambar 14. Mengaktifkan penghitung komposisi dan lewati di Layout Inspector.

Semantik Compose

Di Compose, Semantik mendeskripsikan UI dengan cara alternatif yang dapat dipahami untuk layanan Aksesibilitas dan untuk framework Pengujian. Anda dapat menggunakan Layout Inspector untuk memeriksa informasi semantik di tata letak Compose.

Informasi semantik yang ditampilkan menggunakan Layout Inspector

Gambar 15. Informasi semantik yang ditampilkan menggunakan Layout Inspector.

Saat memilih node Compose, gunakan panel Attributes untuk memeriksa apakah node mendeklarasikan informasi semantik secara langsung, menggabungkan semantik dari turunannya, atau keduanya. Untuk mengidentifikasi node yang menyertakan semantik dengan cepat, baik dideklarasikan ataupun digabungkan, gunakan menu dropdown View options di panel Component Tree dan pilih Highlight Semantics Layers. Tindakan ini hanya akan menandai node dalam hierarki yang menyertakan semantik, dan Anda dapat menggunakan keyboard untuk berpindah antar-node dengan cepat.

Menghindari mulai ulang aktivitas

Layout Inspector memerlukan salah satu setelan global berikut agar berfungsi dengan benar. Jika Anda tidak menentukan setelan global, Layout Inspector akan otomatis menyetelnya.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Opsi ini menghasilkan informasi tambahan untuk pemeriksaan proses yang ditentukan.

  2. adb shell settings put global debug_view_attributes 1

    Opsi ini menghasilkan informasi tambahan untuk pemeriksaan pada semua proses di perangkat.

Mengubah setelan global dapat menyebabkan mulai ulang aktivitas. Untuk menghindari mulai ulang aktivitas, Anda dapat mengubah setelan di Android Studio atau mengubah Opsi Developer di setelan perangkat.

Untuk mengaktifkan refresh otomatis di Android Studio, buka Run/Debug Configurations dengan memilih Run > Edit Configurations dari menu. Kemudian, buka tab Miscellaneous dan centang kotak Connect to Layout Inspector without restarting activity di bagian Layout Inspector Options.

Opsi mulai ulang aktivitas dalam konfigurasi Run

Gambar 16. Mengaktifkan refresh otomatis dari Konfigurasi Run/Debug.

Atau, aktifkan opsi developer perangkat Anda, lalu aktifkan Enable view attribute inspection dari setelan developer perangkat.