Skip to content

Most visited

Recently visited

navigation

Debug Your Layout with Layout Inspector

The Layout Inspector in Android Studio allows you to compare your app layout with design mockups, display a magnified view of your app, and examine details of its layout at runtime. This is useful when your layout is built at runtime rather than entirely in XML and the layout is behaving unexpectedly.

Much of the functionality in the Layout Inspector was previously provided by the deprecated Hierarchy Viewer and Pixel Perfect tools.

Open the Layout Inspector

To open the Layout Inspector, do the following:

  1. Run your app on a connected device or emulator.
  2. Click Tools > Layout Inspector.
  3. In the Choose Process dialog that appears, select the app process you want to inspect and click OK.

    Figure 1. The Choose Process dialog

    By default, the Choose Process dialog lists only the processes for the project currently open in Android Studio and running on the device or emulator. If you want to inspect a different app that's on the device, check Show all processes. If you're using a rooted device or an emulator without Google Play store, then you'll see all running apps. Otherwise, you'll see only running apps that are debuggable.

The Layout Inspector captures a snapshot, saves it as a .li file, and opens it.

As shown in figure 2, the Layout Inspector displays the following:

  1. View Tree: The hierarchy of views in the layout.
  2. Layout Inspector toolbar: Tools for the Layout Inspector.
  3. Screenshot: Screenshot of app layout as it appears on your device, with layout bounds shown for each view.
  4. Properties Table: The layout properties for the selected view.

Figure 2. The Layout Inspector

Select a view

To select a view, click it in the View Tree or the screenshot. All of the layout attributes for the selected view appear in the Properties Table.

If your layout includes overlapping views, then only the view in front is clickable in the screenshot. To select a view that is not in front, click it in the View Tree.

Isolate a view

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

You can isolate a view only when the device is still connected. Isolating a view requires the device to render the layout so that the Layout Inspector can take another screenshot.

To isolate a view, do one of the following:

To return to the containing view, click the arrow in the top-left corner of the Tree View.

Hide layout bounds

To hide the bounding box for a layout element, right-click the element in the View Tree and deselect Show layout bounds.

A layout element with Show layout bounds deselected can't be selected by clicking in the screenshot.

Zoom in and use a reference grid to inpect layout details

You can control the grid overlay and zoom level of the screenshot using buttons in the Layout Editor toolbar:

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.

Take a new screenshot to capture layout changes

If the layout on the device changes, the Layout Inspector does not automatically update. To capture layout changes, create a new screenshot by again clicking Tools > Layout Inspector.

Each screenshot is saved in a separate .li file in project-name/captures/ and opens in a new tab.

Figure 3. Layout Inspector screenshots (.li files) in the Project window

You can reload a previous screenshot by double-clicking the .li file in project-name/captures/.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)