Organizing Your User Interface Android

In Chapter “Exploring User Interface Screen Elements,” we talk about how the class View is the building block for user interfaces in Android. All user interface controls, such as Button, Spinner, and EditText, derive from the View class.

Now we talk about a special kind of View called a ViewGroup. The classes derived from ViewGroup enable developers to display View objects (including all the user interface controls on the screen in an organized fashion.

Understanding View versus ViewGroup

Like other View objects, ViewGroup controls represent a rectangle of screen space. What makes ViewGroup different from your typical control is that ViewGroup objects contain other View objects. A View that contains other View objects is called a parent view. The parent View contains View objects called child views, or children.

You add child View objects to a ViewGroup programmatically using the method addView().In XML,you add child objects to a ViewGroup by defining the child View control as a child node in the XML (within the parent XML element, as we’ve seen various times using the LinearLayout ViewGroup).

ViewGroup subclasses are broken down into two categories:

  • Layout classes
  • View container controls

The Android SDK also provides the Hierarchy Viewer tool to help visualize the layouts you design, as discussed later in this chapter.

Using ViewGroup Subclasses for Layout Design

Many important subclasses of ViewGroup used for screen design end with the word “Layout;” for example, LinearLayout, RelativeLayout, TableLayout, and FrameLayout. You can use each of these layout classes to position groups of View objects (controls) on the screen in different ways. For example, we’ve been using the LinearLayout to arrange various TextView and EditText controls on the screen in a single vertical column. We could have used an AbsoluteLayout to specify the exact x/y coordinate locations of each control on the screen instead, but this is not easily portable across many screen resolutions. Users do not generally interact with the Layout objects directly. Instead, they interact with the View objects they contain.

Using ViewGroup Subclasses as View Containers

The second category of ViewGroup subclasses is the indirect subclasses. These special View objects act as View containers like Layout objects do, but they also provide some kind of functionality that enables users to interact with them like normal controls. Unfortunately, these classes are not known by any handy names; instead they are named for the kind of functionality they provide.

Some classes that fall into this category include Gallery, GridView, ImageSwitcher, ScrollView, TabHost, and ListView. It can be helpful to consider these objects as different kinds of View browsers. A ListView displays each View as a list item, and the user can browse between the individual View objects using vertical scrolling capability. A Gallery is a horizontal scrolling list of View objects with a center “current” item; the user can browse the View objects in the Gallery by scrolling left and right. A TabHost is a more complex View container, where each Tab can contain a View, and the user chooses the tab by name to see the View contents.

Using the Hierarchy Viewer Tool

In addition to the Eclipse layout resource designer provided with the Android plug-in, the Android Software Development Kit (SDK) provides a user interface tool called the Hierarchy Viewer. You can find the Hierarchy Viewer in the Android SDK subdirectory called /tools.

The Hierarchy Viewer is a visual tool that enables you to inspect your Android application’s View objects and their parent-child relationships. You can drill down on specific View objects and inspect individual View properties at runtime. You can even save screenshots of the current application state on the emulator or the device, although this feature is somewhat unreliable.

Do the following to launch the HierarchyViewer with your application in the emulator:

  1. Launch your Android application in the emulator.
  2. Navigate to the Android SDK /tools directory and launch the Hierarchy Viewer.
  3. Choose your emulator instance from the Device listing.
  4. Select the application you want to view from the windows available. For example, to load an application from this book, choose one such as the ParisView project from Chapter Managing Application Resources.
  5. Click Load View Hierarchy button on the menu bar.

By default, the Hierarchy Viewer loads the Layout View of your application. This includes the parent-child view relationships shown as a Tree View. In addition, a property pane shows the various properties for each View node in the tree when they are selected. A wire-frame model of the View objects on the screen is shown and a red box highlights the currently selected view, which correlates to the same location on the screen.

Figure shows the Hierarchy Viewer loaded with the ParisView project from Chapter 6, which was a one-screen application with a single LinearLayout with a TextView and an ImageView child control within it, all encapsulated within a ScrollView control(for scrolling ability). The bulk of the application is shown in the right sub-tree, starting with LinearLayout with the identifier ParisViewLayout. The other sub-tree is the Application title bar. A simple double-click on each child node opens that View object individually in its own window.

The ParisView application, shown in the Hierarchy Viewer tool (Layout View).

ParisView application, shown in the Hierarchy Viewer tool (Layout View)

Each View can be separately displayed in its own window by selecting the appropriate View in the tree and choosing the Display View button on the menu bar. In Figure, you can also see that Display View is enabled on each of the child nodes: the ImageView with the flag, the TextView with the text, as well as the LinearLayout parent node (which includes its children), and lastly the application title bar.

You can use the Pixel Perfect view to closely inspect your application using a loupe. You can also load PNG mockup files to overlay your user interface and adjust your application’s look.You can access the Pixel Perfect view by clicking the button with the nine pixels on it at the bottom left of the Hierarchy Viewer. Click the button with the three boxes depicting the Layout view to return. The Hierarchy Viewer tool is invaluable for debugging drawing issues related to View controls. If you wonder why something isn’t drawing or if a View is even available, try launching the Hierarchy Viewer and checking that problem View objects’ properties.

You can use the Hierarchy Viewer tool to interact and debug your application user interface. Specifically, developers can use the Invalidate and Request Layout buttons on the menu bar that correspond to View.invalidate() and View.requestLayout() functions of the UI thread. These functions initiate View objects and draw or redraw them as necessary upon events.

Finally, you can also use the Hierarchy Viewer to deconstruct how other applications (especially sample applications) have handled their layout and displays. This can be helpful if you’d like to re-create a layout similar to another application, especially if it uses stock View types. However, you can also run across View types not provided in the SDK, and you need to implement those custom classes for yourself.

The ParisView application, shown in the Hierarchy Viewer tool (Pixel Perfect View).

The ParisView application, shown in the Hierarchy Viewer tool (Pixel Perfect View)

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Android Topics