Tool of the month: Pixel perfect layouts in Android
October 31st, 2013
It often happens that we, as developers, get (usually funny) remarks that we don’t have an eye for design. Honestly though, most of the time the visual genius making that remark is right. Admit it; you spend hours implementing assets, tuning font sizes and adjusting pixels, just to be greeted by an ‘are you serious?!’ face when letting the designer check your achievements. It’s a good horse that never stumbles.
All fun and games aside, at the end of the day it is the developer’s responsibility to implement the given design. Certainly there are technical limitations which sometimes require small adjustments, but in my experience most incorrect implementations are caused by the missing ‘eye for design’. Good thing is though, that it is pretty easy to do it right. We’ve just been doing it wrong all along. We look at the visual design on one side, and the technical implementation of it on the other. That way we make it really hard for ourselves to spot the differences. Simply take a look at the picture beneath.
Turns out it’s quite difficult to spot the differences in two picture that look almost identical, even though the images are right next to each other (if not, the game ‘spot the differences’ would be very boring).
Hierachyviewer for Android
That’s where the Hierarchyviewer for Android comes in. As the documentation puts it, “the Pixel Perfect window helps you match up your View layout to a bitmap image by allowing you to load the bitmap as an overlay on the screen image”.
Picture 2 shows how the overlay is shown on top of the implementation. It is important to realize that the static image shown here does not do enough justice to this tool; in the tool itself it is possible to change the opacity of the overlay, making it much easier to spot issues between implementation and design (did you already spot that the icon and the text of the logo at the bottom had too much padding between them? The hierarchyviewer shows it clearly!).
The hierarchyviewer is exactly what we need to be able to easily spot those hard to spot, small mistakes in position, size, padding, margin, and whatn ot might go wrong implementing a design. In the end, it’s those details that either make, or break the design.