The concept of Overdraw has been given so much importance in the Android world. During the Google I/O, few talks emphasized on the importance of reducing overdraw. Yet there is not a single tool that can help us identify the overdraw easily. We at Mozilla worked on a new interface for about:home for the past few months. That would mean all my work for reducing overdraw on the previous version of about:home to be left unused going further. A tool that is as simple as taking a screenshot can reduce the engineering effort in such cases.
The standard Android tools like UiAutomatorViewer and HierarchyViewer are good. However, they show the same UI in a flat mode. It requires some sort of photographic memory to map different views in the hierarchy to see if something would cause overdraw. Is there a better way that is easier and faster to identify overdraw issues?
Introducing Droid Inspector! Taking cues from Firebug and Web Inspector, I’ve been working on this tool for the past few months. This tool shows a 3D view of the app by capturing the bitmap of individual
Views, unlike UiAutomatorViewer. This helps visualize the app easily. Also, the background and the content layers — on a TextView, text is the content, while on an ImageView, image is the content — are shown separately. Remember Romain Guy’s example app causing overdraw issues because the background was not cleared once the image got loaded? Tracking such issues are so much easier. Additionally Droid Inspector shows a box model to make apps pixel perfect. By switching between 3D and 2D modes one can see the perspective view of the app and its overdraw with a single click. Click on individual properties to see it in the hierarchy and vice versa. Additionally one can show/hide either background or content to see how it reflects the overdraw. Droid Inspector is available in two flavors: as an Eclipse plugin that integrates with DDMS, and a web based plugin. Give it a spin and let me know how much it helps.