Android Development – Hierarchy Viewer

The Android SDK comes with a wide variety of tool that are intended to help developers create great Android applications. One of these tools is the hierarchy viewer, which allows you to drill down on your app’s layout and see the different pieces that comprise said layout. This post is a bare bones overview of this tool.

As usual, we will be working with Eclipse on a Win XP box.

Starting Up

Our working sample will be the application we developed in a prior post, “Android Development – More Animations, Part 2.” The hierarchy viewer doesn’t act as a debugger, so you can have your application up and running within the emulator from Eclipse while the viewer is running as well, which is what we will be doing. To actually launch the hierarchy viewer, you issue a command like below.

Assuming that you have your virtual device running, this will produce a UI that appears as below.

You’ll notice that our emulator is listed in the left panel, while the applications whose UI we can explore are listed in the right panel. The hierarchy viewer stays real time as it relates to your emulators, so if you kill your emulator, you’ll see it and the corresponding list of windows disappear from your view. The hierarchy viewer stays real time as it relates to your windows as well, so you if you restart your emulator and look at the window list when it gets to the lock screen, you should see something similar to the below.

Drilling Down

To drill down on our sample app, we first make sure that we’ve started it, either via Eclipse or just launching it on our emulator. You’ll note that the hierarchy viewer may not actually list the name of the application in the window list; what it will display however is the text “<Focused Window>”, which in our case is exactly what it says; namely, the window with the focus, or our app. To actually drill down on the view composition of our app, we click on the “<Focused Window>” text and then click the Load View Hierarchy menu option.

This gives us something like what appears below.

Lots of goodness here. First let’s concentrate on the left panel; this gives us a breakdown of the different layout and view components of our currently displayed window. Clicking on the root note of the tree view gives us something like the below.

You’ll see now that all of the properties of the node that we selected are displayed in the right panel, and the corresponding part of our UI is highlighted in red in the wireframe layout in the right panel that corresponds to our UI.  This is a pretty nifty feature from a discoverability standpoint, as you can see what settings you have in place at the time that impact the way your UI appears.

Speaking of which, to see what a given node actually looks like in a non-wireframe way, you can double-click a node in the tree on the left hand side. In our example, we’ll click on the LinerLayout node three nodes down from the root.

The hierarchy viewer is showing us what the given sub-element will look like when rendered on an actual device.

Finally, to view your UI at a pixel level of detail, you can click on the grid-looking button at the bottom left of the UI.

Clicking this gives you a view that appears as below.

Clicking and dragging in the middle panel allows you to inspect your entire UI on a pixel-by-pixel basis by reviewing the right-most panel. You can highlight the different sub-elements of your UI by clicking on them in the left-most tree view, thereby guiding your UI explorations.

You can also load external images so you can see how they impact your given UI. You do this by clicking on the Load button in the middle panel.

For our example, we’ll load a ridiculous image of an alligator.

The hierarchy viewer also allows you to view your loaded images in the pixel perfect display by checking the “Show in Loupe” checkbox. Doing so for our example alligator picture gives us a UI that appears as below.

So there you have it – a bare bones introduction the Android hierarchy viewer, a tool that lets you explore your UI (or that of other applications), down to a pixel-by-pixel level of detail. Sound off in the comments if you have uncovered some creative uses for this tool!