Debugging and Optimizing Layouts with the Hierarchy Viewer

The Android SDK ships with a host of tools that you can use to make your development life a lot easier. Because we are on the topic of user interface development, it makes sense for us to discuss the Hierarchy Viewer tool. This tool, shown in Figure 4-22, allows you to debug your user interfaces from a layout perspective.

Figure 4-22. The layout view of the Hierarchy Viewer tool

As shown in Figure 4-22, the Hierarchy Viewer shows the hierarchy of views in the form of a tree. The idea is this: you load a layout into the tool and then inspect the layout to (1) determine possible layout problems, and/or (2) try to optimize the layout so that you minimize the number of views (for performance reasons).

To debug your UIs, run your application in the emulator and browse to the UI that you want to debug. Then go to the Android SDK /tools directory to start the Hierarchy Viewer tool. On a Windows installation, you'll see a batch file called hierarchyviewer.bat in the /tools directory. When you run the batch file, you'll see the Hierarchy Viewer's Devices screen (see Figure 4-23).

Figure 4-23. The Hierarchy Viewer's Devices screen

The Devices screen's left pane displays the set of devices (emulators, in this case) running on the machine. When you select a device, the list of windows in the selected device appears in the right pane. To view the hierarchy of views for a particular window, select that window from the right pane (typically the fully qualified name of your activity prefixed with the application's package name). To load the layout, click the "Load View Hierarchy" button.

In the view-hierarchy screen, you'll see the window's hierarchy of views in the left pane (see Figure 4-22). When you select a view element in the left pane, you can see the properties of that element in the properties view to the right and you can see the location of the view, relative to the other views, in the wire-frame pane to the right. The selected view will be highlighted with a red border.

Figure 4-22 shows two buttons in the status bar of the Hierarchy Viewer tool. The left button displays the Tree view that we explained earlier. The right button displays the current layout in Pixel Perfect view. This view is interesting in that you get a pixel-by-pixel representation of your layouts.

0 0

Post a comment