Debug your layout with Layout Inspector and Layout Validation

The Layout Inspector in Android Studio allows you to debug the layout of your app by showing a view hierarchy and allowing you to inspect the properties of each view. With the Layout Inspector, you can compare your app layout with design mockups, display a magnified or 3D view of your app, and examine details of its layout at runtime. This is especially useful when your layout is built at runtime rather than entirely in XML and the layout is behaving unexpectedly.

Layout Validation allows you to simultaneously preview layouts on different devices and display configurations, including variable font sizes or user languages, making it easy to test for a variety of common layout problems.

To open the Layout Inspector, run your app on a connected device or emulator, and then select Tools > Layout Inspector.

Layout inspector snapshot for the Sunflower sample app

Figure 1. Layout Inspector snapshot for the Sunflower sample app. The Layout Inspector displays the following from left to right: Component Tree, Layout Display, and Attributes.

  • Component Tree: The hierarchy of views in the layout.
  • Layout Display: Rendering of the app's layout as it appears on your device or emulator, with layout bounds shown for each view.
  • Attributes: The layout attributes for the selected view. Layout Inspector requires an activity restart to access the attributes. For more information, see Activity restart.

To learn about the Layout Editor, see Introduction to the Layout Editor.

Live Updates

The Layout Display renders your app's layout as it appears on your device or emulator, with layout bounds shown for each view. You can click on each component to inspect it.

The Live Layout Inspector provides complete, real-time insights into your app’s UI while it’s deployed to a device or emulator running API level 29 or higher.

To enable the Live Layout Inspector, select the Live Updates option from the Layout Inspector toolbar.

The Live Layout Inspector includes a dynamic layout hierarchy, updating the Component Tree and Layout Display as views on the device change.

Select or isolate a view

A view usually draws something the user can see and interact with. The Component Tree shows your app's hierarchy in real time with each view component, which helps you debug your app's layout because you can visualize the elements within your app and the values associated with them.

To select a view, click it in the Component Tree or the Layout Display. All of the layout attributes for the selected view appear in the Attributes panel.

If your layout includes overlapping views, you can select a view that is not in front by clicking it in the Component Tree or by rotating the layout.

To work with complex layouts, you can isolate individual views so that only a subset of the layout is shown in the Component Tree and rendered in the Layout Display.

Isolate view menu

Figure 2. To isolate a view, right-click the view in the Component Tree and select Show Only Subtree or Show Only Parents.

To return to the full view, right-click the view and select Show All.

Hide layout borders and view labels

To hide the bounding box or view labels for a layout element, click View Options View Options button at the top of the Layout Display and toggle Show Borders or Show View Label.

View options drop down menu

Figure 3. To hide layout borders and view labels, click on the second View Options in the Layout Inspector toolbar.

3D mode

The Layout Display features an advanced 3D visualization of your app’s view hierarchy at runtime. To use this feature, in the Live Layout Inspector window, click on the 3D Mode button 3D button and rotate it by dragging the mouse.

Layout Inspector: 3D view

Figure 4. Rotated 3D view of a Layout.

Layout inspector: layer spacing view

Figure 5. To expand or contract the layers of the Layout, use the Layer Spacing slider.

Compare app layout to a reference image overlay

To compare your app layout with a reference image, such as a UI mockup, you can load a bitmap image overlay in the Layout Inspector.

  • To load an overlay, select the Load Overlay option from the Layout Inspector toolbar. The overlay is scaled to fit the layout.
  • To adjust the transparency of the overlay, use the Overlay Alpha slider.
  • To remove the overlay, click Clear Overlay .

Layout Validation

Layout Validation is a visual tool for simultaneously previewing layouts for different devices and display configurations, helping you catch problems in your layouts earlier in the process. To access this feature, click on the Layout Validation tab in the top-right corner of the IDE window:

Screenshot of Layout Validation tab

Figure 6. Layout Validation tab.

To switch between the available configuration sets, select one of the following from the Reference Devices dropdown at the top of the Layout Validation window:

  • Reference Devices
  • Custom
  • Color Blind
  • Font Sizes

Screenshot of dropdown menu in the Layout Validation tool

Figure 7. Reference Devices dropdown menu option.

Reference Devices

Reference devices are a set of devices that we recommend you test against. They include phone, foldable, tablet, and desktop interfaces. You should preview how your layout appears on this set of reference devices:

Screenshot of layout previews for different reference devices

Figure 8. Reference device previews in the Layout Validation tool.

Custom

To customize a display configuration to preview, choose from a variety of settings including language, device, or screen orientation:

Customize a device display in the Layout Validation tool

Figure 9. Configure a custom display in the Layout Validation tool.

Color Blind

To help make your app more accessible for users who are color blind, validate your layout with simulations of common types of color blindness:

Screenshot of simulation previews for different types of color blindness

Figure 10. Color blindness simulation previews in the Layout Validation tool.

Font Sizes

Validate your layouts at various font sizes, and improve your app's accessibility for visually impaired users by testing your layouts with larger fonts:

Previews of app layouts at different font sizes with visible layout errors for large fonts

Figure 11. Variable font size previews in the Layout Validation tool.

Capture layout hierarchy snapshots

Layout Inspector allows you to save snapshots of your running app’s layout hierarchy, so that you can easily share them with others or refer to them later.

Snapshots capture the data you would typically see when using the Layout Inspector, including a detailed 3D rendering of your layout, the component tree of your View, Compose, or hybrid layout, and detailed attributes for each component of your UI. To save a snapshot, do the following:

  1. Open the layout inspector.
  2. The Layout Inspector should connect to your app process automatically. If not, select the app process from the dropdown menu.
  3. When you want to capture a snapshot, click Export snapshot Export
icon from the Layout Inspector toolbar.
  4. In the system dialog that appears, specify the name and location you want to save your snapshot. Make sure to save the file with a *.li extension.

You can then load a Layout Inspector snapshot by selecting File > Open from the main menu bar, and opening a *.li file.

Layout Inspector snapshot gif

Figure 12. Taking a snapshot in the Layout Inspector.

Inspect Compose

Layout Inspector allows you to inspect a Compose layout inside a running app in an emulator or physical device. You can use the Layout Inspector to check how often a composable is recomposed or skipped, which can help identify issues with your app. For example, some coding errors might force your UI to recompose excessively, which can cause poor performance. Some coding errors can prevent your UI from recomposing and, therefore, preventing your UI changes from showing up on the screen.

Compose recomposition counts in Layout Inspector

When debugging your Compose layouts, knowing when composables recompose is important in understanding whether your UI is implemented properly. For example, if it's recomposing too many times, your app might be doing more work than is necessary. On the other hand, components that don't recompose when you expect them to can lead to unexpected behaviors.

The Layout Inspector allows you to see when discrete composables in your layout hierarchy have either recomposed or skipped. This information is shown live, while you interact with your app.

To get started, make sure your app is using an API level of 29 or higher, and Compose 1.2.0-alpha03 or higher. Then, deploy your app as you normally would.

Composition and skip counter in Layout Inspector

Figure 13. The composition and skip counter in Layout Inspector.

Open the Layout Inspector window and connect to your app process. In the Component Tree, there are two columns that appear next to the layout hierarchy. The first column shows the number of compositions for each node and the second column displays the number of skips for each node. Selecting a composable node will show the dimensions and parameters of the composable, unless it's an inline function, in which case the parameters can't be shown. You can also see similar information in the Attributes pane when you select a composable from the Component Tree or the Layout Display.

Resetting the count can help you understand recompositions or skips during a specific interaction with your app. If you want to reset the count, click Reset near the top of the Component Tree pane.

Enable the composition and skip counter in Layout Inspector

Figure 14. Enable the composition and skip counter in Layout Inspector.

Compose semantics

In Compose, Semantics describe your UI in an alternative manner that is understandable for Accessibility services and for the Testing framework. You can use the Layout Inspector to inspect semantic information in your Compose layouts.

Semantic information displayed using the Layout Inspector

Figure 15. Semantic information displayed using the Layout Inspector.

When selecting a Compose node, use the Attributes pane to check whether it declares semantic information directly, merges semantics from its children, or both. To quickly identify which nodes include semantics, either declared or merged, use select the View options dropdown in the Component Tree pane and select Highlight Semantics Layers. This highlights only the nodes in the tree that include semantics, and you can use your keyboard to quickly navigate between them.

Avoiding activity restarts

Layout Inspector requires one of the following global settings to function properly. If you don't specify a global setting, Layout Inspector automatically sets one.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    This option generates extra information for inspection of the specified process.

  2. adb shell settings put global debug_view_attributes 1

    This option generates extra information for inspection on all of the processes on the device.

Changing a global setting may cause an activity restart. To avoid an activity restart, you can either change the settings in Android Studio or change the Developer Options in your device's settings.

To enable automatic refresh in Android Studio, open the Run/Debug Configurations by selecting Run > Edit Configurations from the menu. Then, navigate to the Miscellaneous tab and check the Connect to Layout Inspector without restarting activity box under Layout Inspector Options.

Activity restart option in Run configurations

Figure 16. Enable automatic refresh from the Run/Debug Configurations.

Alternatively, enable your device's developer options, and then turn on Enable view attribute inspection from the device's developer settings.