Debugging and Profiling UI

Hierarchy Viewer

Layouts can slow down your appHow to Debug layout issues?

Problem

Android provides UI debugging tools:Hierarchy ViewerLayoutopt

Hierarchy Viewer allows:Debug and optimize UI

Provides:Visual view of Layout’s View hierarchy (View

Hierarchy window)Magnified view of display (Pixel Perfect

window)

UI debugging tools

launch an emulatorinstall the app you want to work withRun the app, and ensure that its UI is visible.From a terminal,

launch hierarchyviewer from the <sdk>/tools/ directory.

The first window you see displays a list of devices and emulators.

Steps:

Use it to look at View objects of Activity’s UITree View:

Examine individual View objectsRelationships between View objectsUse slider/mouse scroll wheel to zoomSearch by: “Filter by class or id” edit box

Nodes that match change from gray to bright blueSave tree screenshot: click Save As PNGSave as Photoshop (PSD) file: click Capture

LayersEach UI is saved as separate Photoshop layer

Hierarchy Window

Tree OverviewSmaller map represents entire Tree View windowUsed to identify part of view tree displayed on Tree

ViewProperties View

List of properties for selected View objectOrganized by category name

Layout ViewBlock representation of UIUsed to navigate the UI

Bold red: View that is currently selectedLight red: Parent block of selected ViewWhite: visible View not a parent/child of selected View

Hierarchy Viewer

Load View HierarchyView Hierarchy window is not automatically

updated when:UI of current Activity changesUser switches to new Activity

Used to load specific Activity View

Hierarchy Viewer

Individual Tree View Node:Information:

View class: View object’s classView object address: pointer to View objectView object ID: value of android:id attributeView index: zero-based index of View in its parent

ViewPerformance indicators: 3 colored dots

Show rendering speed of View relative to other View objectsGREEN: View is in faster 50% of all View objects in the treeYELLOW: Slower 50% of View objects in the treeRED: View is the slowest one in the tree

Hierarchy Window

When Node is selected, you get:Image: actual image of ViewView count: number of View objects Render times

Hierarchy Window

Tool used for :examining pixel properties and laying out UIs from a design drawing

To see Pixel Perfect Window:Start Hierarchy Viewer (above)click Inspect Screenshot

Pixel Perfect

Three Panes:View Object pane: shows hierarchical list of

View objectsPixel Perfect Loupe pane: holds a magnified

screen imPixel Perfect pane: displays the currently

visible screen as it appears on the Emulator

Pixel Perfect

To use a bitmap image as an overlay:Start your application in a device or emulator and navigate

to the Activity whose UI you want to work with.Start Hierarchy Viewer and navigate to the Pixel Perfect

window.At the top of the window, click Load Overlay. A dialog

opens, prompting for the image file to load. Load the image file.

Pixel Perfect displays the overlay over the screen image in the Pixel Perfect pane. The lower left corner of the bitmap image (X=0, Y=max value) is

anchored on the lower leftmost pixel (X=0, Y=max screen) of the screen.

By default, the overlay has a 50% transparency, which allows you to see the screen image underneath.

You can adjust this with the Overlay: slider at the bottom of the Loupe pane.

Pixel Perfect

Pixel Perfect Window

Hierarchy Viewer (Google)

Resources