Sometimes your application's layout can slow down your application. To help debug issues in your layout, the Android SDK provides the Hierarchy Viewer Tool. The Hierarchy Viewer application allows you to debug and optimize your user interface. It provides a visual representation of the layout's View hierarchy (the View Hierarchy window) and a magnified view of the display (the Pixel Perfect window).
Running Hierarchy viewer
Run the application in either Device or in the Emulator and open the Activity, that you need to inspect. Then launch the Hierarchy viewer from <sdk>/tools, by double clicking hierarchyviewer.bat. The first window you see displays a list of devices and emulators. To expand the list of Activity objects for a device or emulator, click the arrow on the left. This displays a list of the Activity objects whose UI is currently visible on the device or emulator. Select the name of your Activity from the list. You can now look at its view hierarchy using the View Hierarchy window, or look at a magnified image of the UI using the Pixel Perfect window.
About the View Hierarchy window
The View Hierarchy window displays the View objects that form the UI of the Activity that is running on your device or emulator. You use it to look at individual View objects within the context of the entire View tree. You should see four panes:
Tree View: The left-hand pane displays the Tree View, a diagram of the Activity object's hierarchy of views. Use Tree View to examine individual View objects and see the relationships between View objects in your UI.
Tree Overview, a smaller map representation of the entire Tree View window. Use Tree Overview to identify the part of the view tree that is being displayed in Tree View.
Properties View, a list of the properties for a selected View object. With Properties View, you can examine all the properties without having to look at your application source.
Layout View, a block representation of the UI. Layout View is another way to navigate through your UI. When you click on a View object in Tree View, its position in the UI is highlighted
Working with an individual View in Tree View
Each node in Tree View represents a single View. Some information is always visible. Starting at the top of the node, you see the following:
1.View class: The View object's class.
2.View object address: A pointer to View object.
3.View object ID: The value of the
android:id attribute.
4.Performance indicators: A set of three colored dots that indicate the rendering speed of this View relative to other View objects in the tree. The three dots represent (from left to right) the measure, layout, and draw times of the rendering.
The colors indicate the following relative performance:
Green: For this part of the render time, this View is in the faster 50% of all the View objects in the tree. For example, a green dot for the measure time means that this View has a faster measure time than 50% of the View objects in the tree.
Yellow: For this part of the render time, this View is in the slower 50% of all the View objects in the tree. For example, a yellow dot for the layout time means that this View has a slower layout time than 50% of the View objects in the tree.
Red: For this part of the render time, this View is the slowest one in the tree. For example, a red dot for the draw time means that this View takes the most time to draw of all the View objects in the tree.
View index: The zero-based index of the View in its parent View. If it is the only child, this is 0.
When you select a node, additional information for the View appears in a small window above the node. When you click one of the nodes, you see the following:
1. Image: The actual image of the View, as it would appear in the emulator. If the View has children, these are also displayed.
2. View count: The number of View objects represented by this node. This includes the View itself and a count of its children. For example, this value is 4 for a View that has 3 children.
3. Render times: The actual measure, layout, and draw times for the View rendering, in milliseconds. These represent the same values as the performance indicators mentioned in the preceding section.
Optimizing with View Hierarchy
View Hierarchy also helps you identify slow render performance. You start by looking at the View nodes with red or yellow performance indicators to identify the slower View objects. As you step through your application, you can judge if a View is consistently slow or slow only in certain circumstances. The View Hierarchy window also helps you find performance issues. Just by looking at the performance indicators (the dots) for each View node, you can see which View objects are the slowest to measure, layout, and draw. From that, you can quickly identify the problems you should look at first.
Examining and Designing User Interfaces with Pixel Perfect
The Pixel Perfect window displays a magnified image of the screen that is currently visible on the emulator or device. In it, you can examine the properties of individual pixels in the screen image.
View Object pane: This is a hierarchical list of the View objects that are currently visible on the device or emulator screen, including both the ones in your application and the ones generated by the system. To see the class names of a View object's children, expand the View by clicking the arrow to its left. When you click a View, its position is highlighted in the Pixel Perfect pane on the right.
Pixel Perfect Loupe pane: This is the magnified screen image. It is overlaid by a grid in which each square represents one pixel. To look at the information for a pixel, click in its square. Its color and X,Y coordinates appear at the bottom of the pane. When you select a pixel in the Loupe pane, you see the following information at the bottom of the pane:
Pixel swatch: A rectangle filled with the same color as the pixel.
HTML color code: The hexadecimal RGB code corresponding to the pixel color
RGB color values: A list of the (R), green (G), and blue (B) color values of the pixel color. Each value is in the range 0-255.
X and Y coordinates: The pixel's coordinates, in device-specific pixel units. The values are 0-based, with X=0 at the left of the screen and Y=0 at the top.
Pixel Perfect pane: This displays the currently visible screen as it would appear in the emulator.
Cheers,
Have a nice day. View Complete List of Tips
Related Posts:
Android Tips - Optimizing layouts with layoutopt
