Open your application in Android Studio, build the source, and run it on your device.
From Android Studio, start the Android Device Monitor: Tools > Android >
Android Device Monitor.
Allow USB Debugging on your phone (if asked).
Figure 2. Android Device Monitor.
Figure 2 illustrates what is initially shown in the Device Monitor tool. This varies
depending on your setup.
Make sure your device
and the package for your application are showing in the Devices (DDMS mode) or Windows
(Hierarchy Viewer mode) tab. You can choose Window > Reset Perspective to get
back to the default arrangement.
Figure 3. Changing Perspective to Hierarchy Viewer.
In Android Device Monitor (ADM), in the menu bar, choose Window > Open
Perspective, and in the popup click Hierarchy View.
Click the Hierarchy View button if it's already visible.
Figure 4. Hierarchy Viewer layout.
If not already open, the Hierarchy View panes open.
The example screen in Figure 4 shows an example of these panes.
Figure 5. Resetting the Perspective.
If you see a different window arrangement, in Android Device Manager, use
Window > Reset Perspective to return to the default layout for this tutorial.
Figure 6. Populated Hierarchy Viewer.
Double-click your application in the Windows tab. This populates the panes with the
view hierarchy of your application.
This display is a static representation of the complete view hierarchy defined for the
You can adjust the sizes of the panes and ADM will preserve your
arrangement in future sessions.
Figure 7. Hierarchy Viewer panes.
If necessary, click the Layout View tab to hide the Console and show a wireframe of
your layout. The outline of the currently selected view is red. Click an outline to select
The rest of the panes:
The Tree Overview in the upper right gives you a bird's-eye view of your
app's complete ViewHierarchy.
In the Tree Overview, move the gray viewport rectangle to change what section of
your hierarchy shows in the Tree View pane (in the center).
In the Tree View, you can drag and zoom the tree using your mouse.
Figure 7. Parts of the View node display.
Click on a View node to display details. Here is an annotated close-up of a node
and its details.
Figure 8. Location of View Properties tab.
Click the View Properties tab at the top right (next to the Windows tab) to see
properties of the selected View node.
Figure 9. Rendering a view in a popup.
Double-click a View node in the Tree View to render it in a popup window.
Figure 10. Node with its type and id.
Nodes in the Tree View show a Type, which indicates the View class,
and an id, which is the view identifier in your code.