The Layout Inspector in Android Studio lets you debug the layout of your app by
showing a view hierarchy where you can 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.
![](https://developer.android.com/static/studio/images/embedded-layout-inspector.png) **Figure 1.**Embedded Layout Inspector for the Jetchat app.

## Get started

To start the Layout Inspector, [run your app](https://developer.android.com/studio/run), go to the
**Running Devices** window, and click **Toggle Layout Inspector** ![Toggle embedded layout inspector button](https://developer.android.com/static/studio/images/design/start-embedded-layout-inspector.png).
If you switch among multiple devices or projects, the Layout Inspector
automatically connects to the debuggable processes running in the foreground of
the connected device.

Here's how to do some common tasks:

- To view hierarchy and inspect the properties of each view, use the **Component Tree** and **Attributes** tool windows. Layout Inspector might require an activity restart to access the attributes. For more information, see [View Attribute Inspection](https://developer.android.com/studio/debug/layout-inspector#view-attribute-inspection).
- To select views by single clicking directly on the views or navigate to code by double clicking on the views, enable **Toggle Deep Inspect** ![Toggle deep inspect button](https://developer.android.com/static/studio/images/design/deep-inspect.png).
- To interact with the app, disable **Toggle Deep Inspect** ![Toggle deep inspect button](https://developer.android.com/static/studio/images/design/deep-inspect.png).
- To inspect physical devices, enable [device mirroring](https://developer.android.com/studio/run/device#device-mirroring).
- To enable live updates as you update your app's UI, check that [Live Edit](https://developer.android.com/develop/ui/compose/tooling/iterative-development#live-edit) is enabled.
- To use [3D mode](https://developer.android.com/studio/debug/layout-inspector#rotate-layout), take a Layout Inspector snapshot ![Layout Inspector Snapshot](https://developer.android.com/static/studio/images/design/li-snapshot.png) and then click **3D Mode** ![3D button](https://developer.android.com/static/studio/images/buttons/layout-inspector-rotation-icon.png).

## 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 see all the views in a region
when you right-click in **Deep Inspect** mode
![Toggle deep inspect button](https://developer.android.com/static/studio/images/design/deep-inspect.png). To select
a view that isn't in front, click it in the **Component Tree** or
[rotate the layout](https://developer.android.com/studio/debug/layout-inspector#rotate-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** . To isolate a view, take a snapshot
![Layout Inspector Snapshot](https://developer.android.com/static/studio/images/design/li-snapshot.png), 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**. You must take a snapshot before isolating a view.
| **Note:** The ability to isolate a view [is temporarily
| unavailable](https://developer.android.com/studio/known-issues#layout-inspector-isolate-view). We're working on fixing this issue.

## Hide layout borders and view labels

To hide the bounding box or view labels for a layout element, click **View
Options** ![View Options button](https://developer.android.com/static/studio/images/buttons/live-layout-inspector-view-options-icon.png)
at the top of the **Layout Display** and toggle **Show Borders** or **Show View
Label**.

## Capture layout hierarchy snapshots

Layout Inspector lets you save snapshots of your running app's layout hierarchy,
so that you can 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, click **Snapshot Export/Import**
![Snapshot Export/Import](https://developer.android.com/static/studio/images/design/li-snapshot.png) and then
**Export Snapshot**.

Load a previously saved Layout Inspector snapshot by clicking
**Import Snapshot**.

## 3D mode

The **Layout Display** features an advanced 3D visualization of your
app's view hierarchy at runtime. To use this feature, take a snapshot
![Snapshot Export/Import](https://developer.android.com/static/studio/images/design/li-snapshot.png), click
the **3D Mode** button
![3D button](https://developer.android.com/static/studio/images/buttons/layout-inspector-rotation-icon.png) in the
snapshot Inspector window, and rotate it by dragging the mouse.
![Layout Inspector: 3D view](https://developer.android.com/static/studio/images/li-3d-mode.png) **Figure 2.**Rotated 3D view of a Layout. ![Layout inspector: layer spacing view](https://developer.android.com/static/studio/images/debug/layout-inspector-layer-spacing.png) **Figure 3.** 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** ![](https://developer.android.com/static/studio/images/li-load-overlay.png) 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** ![](https://developer.android.com/static/studio/images/buttons/live-layout-inspector-remove-overlay-icon.png)

## Inspect Compose

Layout Inspector lets you 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.

[Learn more about Layout Inspector for Compose](https://developer.android.com/develop/ui/compose/tooling/debug)

## View Attribute Inspection

Layout Inspector requires the following global setting to function properly:  

    adb shell settings put global debug_view_attributes 1

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

Layout Inspector automatically enables the setting when started. This
causes the current foreground Activity to restart. You will not see another
Activity restart unless the flag is manually disabled on the device.

To disable the flag, run the following adb command:  

    adb shell settings delete global debug_view_attributes

Alternatively, turn off [Enable view attribute inspection](https://developer.android.com/studio/debug/dev-options#debugging)
from your device's [developer options](https://developer.android.com/studio/debug/dev-options#enable).

## Standalone Layout Inspector

For optimal performance, we recommend using the Layout Inspector in its default
embedded mode. If you want to un-embed the Layout Inspector, go to **File**
(**Android Studio** on macOS)\> **Settings** \> **Tools** \> **Layout Inspector**
and clear the **Enable embedded Layout Inspector** checkbox.

In standalone mode, enable live updates by clicking the **Live Updates**
![](https://developer.android.com/static/studio/images/buttons/layout-inspector-live-updates-button.png) option from
the **Layout Inspector** toolbar.