page.title=Optimizing Your UI parent.title=Debugging parent.link=index.html @jd:body

In this document

  1. Using Hierarchy Viewer
    1. Running Hierarchy Viewer and choosing a window
    2. About the View Hierarchy window
    3. Working with an individual View in Tree View
    4. Debugging with View Hierarchy
    5. Optimizing with View Hierarchy
  2. Using Pixel Perfect
    1. About the Pixel Perfect window
    2. Working with Pixel Perfect overlays
  3. Using lint to optimize your UI

Related videos

Sometimes your application's layout can slow down your application. To help debug issues in your layout, the Android SDK provides the Hierarchy Viewer and lint tools.

The Hierarchy Viewer application allows you to debug and optimize your user interface. It provides a visual representation of the layout's View hierarchy (the View Hierarchy window) with performance information for each node in the layout, and a magnified view of the display (the Pixel Perfect window) to closely examine the pixels in your layout.

Android lint is a static code scanning tool that helps you optimize the layouts and layout hierarchies of your applications, as well as detect other common coding problems. You can run it against your layout files or resource directories to quickly check for inefficiencies or other types of problems that could be affecting the performance of your application.

Using Hierarchy Viewer

Running Hierarchy Viewer and choosing a window

To run Hierarchy Viewer, follow these steps:

  1. Connect your device or launch an emulator.

    To preserve security, Hierarchy Viewer can only connect to devices running a developer version of the Android system.

  2. If you have not done so already, install the application you want to work with.
  3. Run the application, and ensure that its UI is visible.
  4. From a terminal, launch hierarchyviewer from the <sdk>/tools/ directory.
  5. The first window you see displays a list of devices and emulators. To expand the list of Activity objects for a device or emulator, click the arrow on the left. This displays a list of the Activity objects whose UI is currently visible on the device or emulator. The objects are listed by their Android component name. The list includes both your application Activity and system Activity objects. A screenshot of this window appears in figure 1.
  6. Select the name of your Activity from the list. You can now look at its view hierarchy using the View Hierarchy window, or look at a magnified image of the UI using the Pixel Perfect window.

To learn how to use the View Hierarchy window, go to About the View Hierarchy window. To learn how to use the Pixel Perfect window, go to About the Pixel Perfect window.

Figure 1. Hierarchy Viewer device window

About the View Hierarchy window

The View Hierarchy window displays the View objects that form the UI of the Activity that is running on your device or emulator. You use it to look at individual View objects within the context of the entire View tree. For each View object, the View Hierarchy window also displays rendering performance data.

To see the View Hierarchy window, run Hierarchy Viewer as described in the section Running Hierarchy Viewer and choosing a window. Next, click View Hierarchy at the top of the device window.

You should see four panes:

When the UI of the current Activity changes, the View Hierarchy window is not automatically updated. To update it, click Load View Hierarchy at the top of the window.

Also, the window is not updated if you switch to a new Activity. To update it, start by clicking the window selection icon in the bottom left-hand corner of the window. This navigates back to the Window Selection window. From this window, click the Android component name of the new Activity and then click Load View Hierarchy at the top of the window.

A screenshot of the View Hierarchy window appears in figure 2.

Figure 2. The View Hierarchy window

Working with an individual View in Tree View

Each node in Tree View represents a single View. Some information is always visible. Starting at the top of the node, you see the following:

  1. View class: The View object's class.
  2. View object address: A pointer to View object.
  3. View object ID: The value of the android:id attribute.
  4. Performance indicators: A set of three colored dots that indicate the rendering speed of this View relative to other View objects in the tree. The three dots represent (from left to right) the measure, layout, and draw times of the rendering.

    The colors indicate the following relative performance:

  5. View index: The zero-based index of the View in its parent View. If it is the only child, this is 0.

When you select a node, additional information for the View appears in a small window above the node. When you click one of the nodes, you see the following:

An annotated screenshot of an individual node in the Tree View window appears in figure 3.

Figure 3. An annotated node in Tree View

Debugging with View Hierarchy

The View Hierarchy window helps you debug an application by providing a static display of the UI. The display starts with your application's opening screen. As you step through your application, the display remains unchanged until you redraw it by invalidating and then requesting layout for a View.

To redraw a View in the display:

Manually redrawing a View allows you to watch the View object tree and examine the properties of individual View objects one step at a time as you go through breakpoints in your code.

Optimizing with View Hierarchy

View Hierarchy also helps you identify slow render performance. You start by looking at the View nodes with red or yellow performance indicators to identify the slower View objects. As you step through your application, you can judge if a View is consistently slow or slow only in certain circumstances.

Remember that slow performance is not necessarily evidence of a problem, especially for ViewGroup objects. View objects that have more children and more complex View objects render more slowly.

The View Hierarchy window also helps you find performance issues. Just by looking at the performance indicators (the dots) for each View node, you can see which View objects are the slowest to measure, layout, and draw. From that, you can quickly identify the problems you should look at first.

Using Pixel Perfect

Pixel Perfect is a tool for examining pixel properties and laying out UIs from a design drawing.

About the Pixel Perfect window

The Pixel Perfect window displays a magnified image of the screen that is currently visible on the emulator or device. In it, you can examine the properties of individual pixels in the screen image. You can also use the Pixel Perfect window to help you lay out your application UI based on a bitmap design.

To see the Pixel Perfect window, run Hierarchy Viewer, as described in the section Running Hierarchy Viewer and choosing a window. Next, click Inspect Screenshot at the top of the device window. The Pixel Perfect window appears.

In it, you see three panes:

The panes are not automatically refreshed when you change one of the View objects or go to another Activity. To refresh the Pixel Perfect pane and the Loupe pane, click Refresh Screenshot at the top of the window. This will change the panes to reflect the current screen image. You still may need to refresh the View Object pane; to do this, click Refresh Tree at the top of the window.

To automatically refresh the panes while you are debugging, set Auto Refresh at the top of the window, and then set a refresh rate with the Refresh Rate slider at the bottom of the Loupe pane.

Working with Pixel Perfect overlays

You often construct a UI based on a design done as a bitmap image. The Pixel Perfect window helps you match up your View layout to a bitmap image by allowing you to load the bitmap as an overlay on the screen image.

To use a bitmap image as an overlay:

The overlay is not saved as part of the screenshot when you save the screen image as a PNG file.

A screenshot of the Pixel Perfect window appears in figure 4.

Figure 4. The Pixel Perfect window

Using lint to Optimize Your UI

The Android {@code lint} tool lets you analyze the XML files that define your application's UI to find inefficiencies in the view hierarchy.

Note: The Android layoutopt tool has been replaced by the {@code lint} tool beginning in ADT and SDK Tools revision 16. The {@code lint} tool reports UI layout performance issues in a similar way as layoutopt, and detects additional problems.

For more information about using {@code lint}, see Improving Your Code with lint and the lint reference documentation.