Dissect layouts using Android's Hierarchy View

The next time you see an Android app where the UI really shines consider using Google's ADT Plugin for Eclipse to dissect it.

Wouldn't it be great if when you came across a user interface (UI) that really works you could get a behind-the-scenes look at the blueprints that brought together all those layouts, widgets, and views in such an ideal manner? Well guess what? You can do so, and I highly recommend you get into the habit of it.

No matter how long you've been working with mobile devices there is no better way to grow your design skills than by dissecting the UI of apps you admire. Google's ADT Plugin for Eclipse makes dumping the view hierarchy of any application a snap. In this tutorial, we will use the ADT to take apart Google's famous mobile mail client, Gmail, and in the process familiarize ourselves with the Hierarchy View. I am assuming you have a recent version of the Android Developer Tools (ADT) installed and configured within your Eclipse environment.

1. Connect a device or emulator to your Eclipse environment. From the menu ribbon select Window | Perspective | Hierarchy View (Figure A). Figure A

Click the image to enlarge it.
2. Once the perspective changes to the Hierarchy View, take a look at your console and add a tab labeled Devices if you don't already see it (Figure B). Figure B

Click the image to enlarge it.
3. We can add the Devices window if necessary by choosing Windows | Show View | Other | Devices | OK (Figure C). Figure C

Click the image to enlarge it.
4. In the Devices tab, select the device you will be working with (Figure D). Figure D

Click the image to enlarge it.
5. On the active device navigate to the screen you wish to inspect (in my case, it is the Gmail app). In our Devices window, there is a small icon one button in from the right that looks like a series of stacked phones (Figure E). If you hover over this icon with your mouse it should pop up a tool tip that reads: Dump View Hierarchy for UI Automator. Go ahead and click it. Figure E

Click the image to enlarge it.

Use your mouse and click around a bit in the tree. Notice how you can step through the parent and children views? I recommend picking through a couple of your favorite apps this way to get a feel for how the views were nested. Then, when you are ready for a more advanced version of these exercises, read Google's post on using the command line version of this tool to streamline your UIs.

By William J. Francis

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...