Để bạn gỡ lỗi bố cục ứng dụng, Layout Inspector trong Android Studio sẽ hiện hệ phân cấp chế độ xem và cho phép bạn kiểm tra các thuộc tính của từng khung hiển thị (view). Với Layout Inspector (Trình kiểm tra bố cục), bạn có thể so sánh bố cục ứng dụng với mô hình thiết kế, hiện khung hiển thị phóng to hoặc 3D của ứng dụng và kiểm tra thông tin chi tiết về bố cục trong thời gian chạy. Công cụ này đặc biệt hữu ích khi bố cục được xây dựng trong thời gian chạy chứ không phải hoàn toàn bằng XML và bố cục đang hoạt động không như mong đợi.
Tính năng Xác thực bố cục cho phép bạn cùng lúc xem trước bố cục trên nhiều thiết bị và cấu hình màn hình (bao gồm cả nhiều kích thước phông chữ hoặc ngôn ngữ người dùng), giúp bạn dễ dàng kiểm thử các vấn đề phổ biến về bố cục.
Để mở Layout Inspector, hãy chạy ứng dụng của bạn trên một thiết bị hoặc trình mô phỏng đã kết nối, sau đó chọn Tools (Công cụ) > Layout Inspector (Trình kiểm tra bố cục).
Hình 1. Ảnh chụp nhanh trong Layout Inspector cho ứng dụng mẫu Sunflower (Hoa hướng dương). Layout Inspector hiện các thông tin sau đây từ trái sang phải: Component Tree (Cây thành phần), Layout Display (Màn hình bố cục) và Attributes (Thuộc tính).
- Component Tree (Cây thành phần): Hệ thống phân cấp khung hiển thị trong bố cục.
- Layout Display (Màn hình bố cục): Hiển thị bố cục ứng dụng như bố cục trên thiết bị hoặc trình mô phỏng, với các giới hạn bố cục cho từng khung hiển thị.
- Attributes (Thuộc tính): Các thuộc tính bố cục của khung hiển thị đã chọn. Layout Inspector yêu cầu khởi động lại hoạt động để truy cập vào những thuộc tính này. Để biết thêm thông tin, hãy xem phần Khởi động lại hoạt động.
Để tìm hiểu về Layout Editor (Trình chỉnh sửa bố cục), hãy xem phần Giới thiệu về Layout Editor.
Bản cập nhật trực tiếp
Layout Display (Màn hình bố cục) hiển thị bố cục ứng dụng như bố cục trên thiết bị hoặc trình mô phỏng, với các giới hạn bố cục cho từng khung hiển thị. Bạn có thể nhấp vào từng thành phần để kiểm tra.
Live Layout Inspector (Trình kiểm tra bố cục trực tiếp) cung cấp thông tin chi tiết đầy đủ theo thời gian thực về giao diện người dùng của ứng dụng ngay khi triển khai giao diện người dùng cho một thiết bị hoặc trình mô phỏng chạy API cấp 29 trở lên.
Để bật Live Layout Inspector, hãy chọn biểu tượng Live Updates (Bản cập nhật trực tiếp) 
trên thanh công cụ Layout Inspector (Trình kiểm tra bố cục).
Live Layout Inspector có một hệ phân cấp bố cục động, cập nhật Component Tree (Cây thành phần) và Layout Display (Màn hình bố cục) dưới dạng khung hiển thị khi thay đổi thiết bị.
Chọn hoặc tách riêng khung hiển thị
Khung hiển thị thường minh hoạ nội dung mà người dùng có thể nhìn thấy và tương tác cùng. Component Tree (Cây thành phần) cho thấy hệ phân cấp của ứng dụng theo thời gian thực theo từng thành phần khung hiển thị, giúp bạn gỡ lỗi bố cục ứng dụng vì bạn có thể hình dung các thành phần trong ứng dụng và những giá trị liên quan đến các thành phần đó.
Hãy nhấp vào khung hiển thị cần chọn trong Component Tree (Cây thành phần) hoặc Layout Display (Màn hình bố cục). Mọi thuộc tính bố cục cho khung hiển thị đã chọn đều xuất hiện trong bảng điều khiển Attributes (Thuộc tính).
Nếu bố cục có các khung hiển thị chồng chéo, bạn có thể chọn khung hiển thị không chính diện bằng một trong hai cách: nhấp vào khung đó ở Component Tree (Cây thành phần) hoặc xoay bố cục.
Khi xử lý các bố cục phức tạp, bạn có thể tách riêng từng khung hiển thị đơn lẻ để chỉ một tập hợp con của bố cục xuất hiện trong Component Tree (Cây thành phần) và hiển thị ở Layout Display (Màn hình bố cục).
Hình 2. Để tách riêng một khung hiển thị, hãy nhấp chuột phải vào khung đó trong Component Tree (Cây thành phần) rồi chọn Show Only Subtree (Chỉ hiện cây con) hoặc Show Only Parents (Chỉ hiện cây mẹ).
Để quay lại khung hiển thị toàn bộ, hãy nhấp chuột phải vào khung đó rồi chọn Show All (Hiện tất cả).
Ẩn đường viền bố cục và nhãn khung hiển thị
Để ẩn hộp giới hạn hoặc nhãn khung hiển thị cho thành phần bố cục, hãy nhấp vào biểu tượng View Options (Tuỳ chọn cho khung hiển thị) 
ở đầu phần Layout Display (Màn hình bố cục) rồi bật/tắt tuỳ chọn Show Borders (Hiện đường viền) hoặc Show View Label (Hiện nhãn khung hiển thị).
Hình 3. Để ẩn đường viền bố cục và nhãn khung hiển thị, hãy nhấp vào View Options (Tuỳ chọn cho khung hiển thị) thứ hai trên thanh công cụ Layout Inspector (Trình kiểm tra bố cục).
Chế độ 3D
Cuối cùng, Layout Display (Màn hình bố cục) sẽ hiện hình ảnh 3D nâng cao về hệ phân cấp chế độ xem của ứng dụng trong thời gian chạy. Để dùng tính năng này, trong cửa sổ Live Layout Inspector (Trình kiểm tra bố cục trực tiếp), hãy nhấp vào nút 3D Mode (Chế độ 3D) 
rồi xoay bằng cách kéo chuột.
Hình 4. Khung hiển thị 3D đã xoay của một Layout (Bố cục).
Hình 5. Để mở rộng hoặc thu gọn các lớp của Layout (Bố cục), hãy dùng thanh trượt Layer Spacing (Giãn cách lớp).
So sánh bố cục ứng dụng với lớp ảnh tham chiếu
Để so sánh bố cục ứng dụng của bạn với hình ảnh tham chiếu, chẳng hạn như với bản minh hoạ giao diện người dùng, bạn có thể tải lớp ảnh bitmap trong Layout Inspector (Trình kiểm tra bố cục).
- Để tải lớp phủ, hãy chọn mục Load Overlay (Tải lớp phủ)
trong thanh công cụ Layout Inspector (Trình kiểm tra bố cục). Lớp phủ được điều chỉnh theo tỷ lệ vừa vặn với bố cục. - Để điều chỉnh độ trong suốt của lớp phủ, hãy dùng thanh trượt Overlay Alpha (Lớp phủ Alpha).
- Để xoá lớp phủ, hãy nhấp vào biểu tượng Clear Overlay (Xoá lớp phủ)
.
Ghi lại ảnh chụp nhanh về hệ thống phân cấp bố cục
Layout Inspector (Trình kiểm tra bố cục) cho phép bạn lưu ảnh chụp nhanh về hệ phân cấp bố cục của ứng dụng đang chạy để bạn có thể dễ dàng chia sẻ với người khác hoặc lưu lại để tham khảo sau.
Ảnh chụp nhanh ghi lại dữ liệu mà bạn thường thấy khi sử dụng Layout Inspector, bao gồm cả thông tin kết xuất chi tiết ở dạng 3D về bố cục, cây thành phần của Khung hiển thị, Compose hoặc bố cục kết hợp và các thuộc tính chi tiết của mỗi thành phần trong giao diện người dùng. Để lưu ảnh chụp nhanh, hãy làm như sau:
- Mở trình Layout Inspector (Trình kiểm tra bố cục).
- Layout Inspector (Trình kiểm tra bố cục) sẽ tự động kết nối với quá trình của ứng dụng. Nếu không, hãy chọn quá trình xử lý ứng dụng từ trình đơn thả xuống.
- Khi bạn muốn ghi lại ảnh chụp nhanh, hãy nhấp vào biểu tượng Export snapshot (Xuất ảnh chụp nhanh)
trên thanh công cụ của Layout Inspector. - Trong hộp thoại hệ thống vừa xuất hiện, hãy chỉ định tên và vị trí bạn muốn
lưu ảnh chụp nhanh. Hãy nhớ lưu tệp có đuôi là
*.li.
Sau đó, bạn có thể tải ảnh chụp nhanh của Layout Inspector bằng cách chọn File > Open (Tệp > Mở) trên thanh trình đơn chính rồi mở tệp *.li.
Hình 6. Chụp ảnh nhanh trong Layout Inspector.
Kiểm tra Compose
Layout Inspector cho phép bạn kiểm tra bố cục Compose bên trong một ứng dụng đang chạy ở trình mô phỏng hoặc thiết bị thực tế. Bạn có thể dùng Layout Inspector (Trình kiểm tra bố cục) để kiểm tra tần suất kết hợp lại hoặc bỏ qua thành phần kết hợp (composable), từ đó xác định vấn đề của ứng dụng. Ví dụ: một số lỗi lập trình có thể khiến giao diện người dùng kết hợp lại quá mức, dẫn đến hiệu suất kém. Một số lỗi lập trình có thể ngăn giao diện người dùng kết hợp lại, từ đó khiến các thay đổi của giao diện người dùng không xuất hiện được trên màn hình.
Số lần kết hợp lại ở Compose trong Layout Inspector
Khi gỡ lỗi bố cục Compose, bạn cần phải biết thời điểm thành phần kết hợp được kết hợp lại để nhận định liệu giao diện người dùng có được triển khai đúng cách hay không. Ví dụ: nếu quá trình kết hợp lại xảy ra quá nhiều lần, có thể ứng dụng của bạn làm nhiều việc hơn mức cần thiết. Mặt khác, những thành phần không kết hợp lại như bạn dự kiến có thể là nguyên nhân dẫn đến các hành vi không mong muốn.
Layout Inspector cho bạn biết thời điểm các thành phần kết hợp riêng biệt trong hệ phân cấp bố cục kết hợp lại hoặc bỏ qua khi bạn tương tác với ứng dụng. Trong Android Studio Electric Eel, các thành phần kết hợp lại được làm nổi bật để giúp bạn xác định vị trí kết hợp lại trong giao diện người dùng.
Hình 7. Các lần kết hợp lại được làm nổi bật trong Layout Inspector.
Phần được làm nổi bật hiển thị lớp phủ chuyển màu của thành phần kết hợp trong phần hình ảnh của Layout Inspector, và dần biến mất để bạn có thể biết được vị trí có thể tìm thấy thành phần kết hợp có số lần kết hợp lại nhiều nhất trong giao diện người dùng. Nếu một thành phần kết hợp đang kết hợp lại với tỷ lệ cao hơn thành phần kết hợp khác, thì thành phần kết hợp đầu tiên sẽ nhận được màu lớp phủ chuyển màu đậm hơn.
Để xem số lần kết hợp lại, hãy đảm bảo ứng dụng của bạn đang sử dụng API cấp 29 trở lên và Compose 1.2.0-alpha03 trở lên. Sau đó, hãy triển khai ứng dụng như bình thường.
Hình 8. Bộ đếm số lần kết hợp và bỏ qua trong Layout Inspector.
Mở cửa sổ Layout Inspector (Trình kiểm tra bố cục) rồi kết nối với quá trình của ứng dụng. Trong Component Tree (Cây thành phần), có 2 cột xuất hiện bên cạnh hệ phân cấp bố cục. Cột đầu tiên cho biết số lần kết hợp cho mỗi nút và cột thứ hai hiển thị số lần bỏ qua cho mỗi nút. Khi chọn một nút thành phần kết hợp, bạn sẽ thấy các kích thước và tham số của thành phần kết hợp, trừ phi đó là một hàm cùng dòng. Trong trường hợp như vậy, tham số không thể hiển thị. Bạn cũng có thể xem thông tin tương tự trong ngăn Attributes (Thuộc tính) khi chọn một thành phần kết hợp từ Component Tree (Cây thành phần) hoặc Layout Display (Màn hình bố cục).
Khi đặt lại bộ đếm, bạn sẽ nắm được các lần kết hợp lại hoặc bỏ qua trong một tương tác cụ thể với ứng dụng của mình. Nếu bạn muốn đặt lại bộ đếm, hãy nhấp vào Reset (Đặt lại) ở gần đầu ngăn Component Tree (Cây thành phần).
Hình 9. Bật bộ đếm số lần kết hợp và bỏ qua trong Layout Inspector.
Ngữ nghĩa trong Compose
Trong Compose, Semantics (Ngữ nghĩa) sẽ mô tả giao diện người dùng theo cách mà các dịch vụ Accessibility (Hỗ trợ tiếp cận) và khung Testing (Kiểm thử) có thể hiểu. Bạn có thể dùng Layout Inspector (Trình kiểm tra bố cục) để kiểm tra thông tin ngữ nghĩa trong bố cục Compose.
Hình 10. Thông tin ngữ nghĩa hiển thị thông qua Layout Inspector.
Khi chọn nút Compose, hãy dùng cửa sổ Attributes (Thuộc tính) để kiểm tra xem liệu nút đó trực tiếp khai báo thông tin ngữ nghĩa, hợp nhất ngữ nghĩa của các phần tử con hay thực hiện cả hai việc này. Để nhanh chóng xác định nút nào có chứa ngữ nghĩa, bất kể là đã khai báo hay hợp nhất, hãy dùng trình đơn thả xuống View options (Tuỳ chọn cho khung hiển thị) trong cửa sổ Component Tree (Cây thành phần) rồi chọn Highlight Semantics Layers (Làm nổi bật các lớp ngữ nghĩa). Thao tác này chỉ làm nổi bật các nút trong cây chứa ngữ nghĩa và bạn có thể dùng bàn phím để nhanh chóng di chuyển giữa những nút đó.
Tránh tình trạng hoạt động khởi động lại
Layout Inspector cần một trong các chế độ cài đặt chung sau đây để hoạt động đúng cách. Nếu bạn không chỉ định chế độ cài đặt chung, Layout Inspector sẽ tự động đặt một chế độ như vậy.
adb shell settings put global debug_view_attributes_application_package <processname>Tuỳ chọn này tạo thêm thông tin để kiểm tra quy trình đã chỉ định.
adb shell settings put global debug_view_attributes 1Tuỳ chọn này tạo thêm thông tin để kiểm tra tất cả các quy trình trên thiết bị.
Việc thay đổi một chế độ cài đặt chung có thể khiến hoạt động khởi động lại. Để hoạt động không khởi động lại, bạn có thể thay đổi chế độ cài đặt trong Android Studio hoặc thay đổi Developer Options (Tuỳ chọn cho nhà phát triển) ở phần cài đặt của thiết bị.
Để bật tính năng tự động làm mới trong Android Studio, hãy mở Run/Debug Configurations (Cấu hình chạy/gỡ lỗi) bằng cách chọn Run (Chạy) > Edit Configurations (Chỉnh sửa cấu hình) trên trình đơn. Sau đó, hãy chuyển đến thẻ Miscellaneous (Khác) rồi chọn ô Connect to Layout Inspector without restarting activity (Kết nối với Layout Inspector mà không cần khởi động lại hoạt động) trong Layout Inspector Options (Tuỳ chọn cho Layout Inspector).
Hình 11 Bật tính năng tự động làm mới trong Run/Debug Configurations (Cấu hình chạy/gỡ lỗi).
Ngoài ra, hãy bật các tuỳ chọn cho nhà phát triển trên thiết bị của bạn rồi bật tuỳ chọn Cho phép kiểm tra thuộc tính khung hiển thị trong phần cài đặt dành cho nhà phát triển của thiết bị.
Xác thực bố cục
Layout Validation (Xác thực bố cục) là một công cụ trực quan giúp bạn cùng lúc xem trước bố cục của nhiều kiểu thiết bị và cấu hình, giúp bạn phát hiện vấn đề trong bố cục ngay từ những bước đầu tiên. Để dùng tính năng này, hãy nhấp vào thẻ Layout Validation (Xác thực bố cục) ở góc trên cùng bên phải của cửa sổ IDE:
Hình 12 Thẻ Layout Validation (Xác thực bố cục).
Để chuyển đổi giữa các nhóm cấu hình có sẵn, hãy chọn một trong các tuỳ chọn sau trên trình đơn thả xuống Reference Devices (Thiết bị tham chiếu) ở đầu cửa sổ Layout Validation (Xác thực bố cục):
- Thiết bị tham chiếu
- Tuỳ chỉnh
- Mù màu
- Kích thước phông chữ
Hình 13. Tuỳ chọn trên trình đơn thả xuống Reference Devices (Thiết bị tham chiếu).
Thiết bị tham chiếu
Reference Devices (Thiết bị tham chiếu) là một tập hợp thiết bị mà chúng tôi khuyên bạn nên kiểm thử. Trong đó có các giao diện điện thoại, thiết bị gập, máy tính bảng và máy tính để bàn. Bạn nên xem trước cách bố cục thể hiện trên tập hợp thiết bị tham chiếu này:
Hình 14. Bản xem trước thiết bị tham chiếu trong công cụ Layout Validation (Xác thực bố cục).
Tuỳ chỉnh
Nhằm tuỳ chỉnh cấu hình hiển thị để xem trước, hãy chọn trong nhiều chế độ cài đặt, bao gồm cả ngôn ngữ, thiết bị hoặc hướng màn hình:
Hình 15. Định cấu hình màn hình tuỳ chỉnh trong công cụ Layout Validation (Xác thực bố cục).
Mù màu
Để giúp người dùng bị mù màu dễ tiếp cận ứng dụng của bạn hơn, hãy xác thực bố cục bằng cách mô phỏng các loại mù màu thường gặp:
Hình 16. Xem trước bản mô phỏng mù màu trong công cụ Layout Validation (Xác thực bố cục).
Kích thước phông chữ
Xác thực bố cục ở nhiều kích thước phông chữ và cải thiện khả năng tiếp cận ứng dụng cho người dùng khiếm thị bằng cách kiểm thử bố cục với phông chữ lớn hơn:
Hình 17. Bản xem trước nhiều kích thước phông chữ trong công cụ Layout Validation (Xác thực bố cục).