Debugging and Profiling UI

Layouts can slow down your app

How to Debug layout issues?

 Android provides UI debugging tools:

Hierarchy Viewer
Layoutopt

Hierarchy Viewer allows:

Debug and optimize UI

Provides:
Visual view of Layouts View hierarchy (View Hierarchy

window) Magnified view of display (Pixel Perfect window)

 launch an emulator

install the app you want to work with

Run 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.

 Use it to look at View objects of Activitys UI

Tree View:
Examine individual View objects Relationships between View objects Use slider/mouse scroll wheel to zoom Search by: Filter by class or id edit box Nodes that match change from gray to bright blue Save tree screenshot: click Save As PNG Save as Photoshop (PSD) file: click Capture Layers Each UI is saved as separate Photoshop layer

 Tree Overview
Smaller map represents entire Tree View window Used to identify part of view tree displayed on Tree View

Properties View
List of properties for selected View object Organized by category name

Layout View
Block representation of UI Used to navigate the UI Bold red: View that is currently selected Light red: Parent block of selected View White: visible View not a parent/child of selected View

 Load View Hierarchy

View Hierarchy window is not automatically updated

when:
UI of current Activity changes User switches to new Activity

Used to load specific Activity View

 Individual Tree View Node:

Information: View class: View objects class View object address: pointer to View object View object ID: value of android:id attribute View index: zero-based index of View in its parent View Performance indicators: 3 colored dots
Show rendering speed of View relative to other View objects GREEN: View is in faster 50% of all View objects in the tree YELLOW: Slower 50% of View objects in the tree RED: View is the slowest one in the tree

 When Node is selected, you get:

Image: actual image of View
View count: number of View objects Render times

 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

 Three Panes:
View Object pane: shows hierarchical list of View

objects Pixel Perfect Loupe pane: holds a magnified screen im Pixel Perfect pane: displays the currently visible screen as it appears on the Emulator

 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.

 Hierarchy Viewer (Google)