The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Inspecting Layouts

Layouts get complicated. Not only might you be pulling in from several sources (via fragments or <include> or whatever), but you make changes to the contents of the UI at runtime. What you have in your layout resources is a starting point, but only that. Sometimes, it would be helpful to see exactly what is in the UI of your app right now, based on what you have done inside that app.

Android Studio, starting with 2.2, has a built-in layout inspector that will help with this process. Beyond that, Android comes with a Hierarchy View tool, designed to help you visualize your layouts as they are seen in a running activity in a running emulator or Android 4.1+ device. So, for example, you can determine how much space a certain widget is taking up, or try to find where a widget is hiding that does not appear on the screen.

Prerequisites

Understanding this chapter requires that you have read the core chapters of this book.

The Layout Inspector

Users of Android Studio, starting with version 2.2, have access to a Layout Inspector that captures the state of the foreground activity and all of its widgets. You can examine those widgets to try to determine why your UI perhaps is not working in the way that you expect.

Launching the Layout Inspector

First, get a debuggable build of your app running on your chosen device or emulator, with the desired activity in the foreground, in the state that you are interested in. Layout Inspector captures a snapshot of the state; it does not continuously update as the UI changes. Hence, you need to get the UI into the state that you want to inspect first.

Then, choose Tools > Android > Layout Inspector from the Android Studio main menu.

Viewing the View Hierarchy

When you inspect a layout, a tab is opened in Android Studio with a tree of widgets on the left, a wireframe-enhanced screenshot in the center, and a properties pane on the right:

Layout Inspector, As Initially Launched
Figure 958: Layout Inspector, As Initially Launched

Hovering over a widget in the tree or the wireframe will outline it in red. Selecting that widget in the tree or the wireframe, by clicking on it, outlines it in blue and updates the properties pane with the properties for that particular widget or container.

The properties pane shows a tree of fields, getter methods, and XML-style attributes. You can use these to view the state of the widget or container. However, these properties are read-only; you cannot modify the UI from the Layout Inspector.

Inspections and Captures

Layout Inspector is not purely a tab in the IDE. The data collected by Android Studio to populate the Layout Inspector is saved in your project’s captures/ directory. This allows you to view that same data again in the future. This may be useful for comparing different captures from different times, such as “before-and-after” captures to see what effects a code change had on your layout contents.

Hierarchy View

The preview of this section apparently resembled a Pokémon.