Using the Android Hierarchy View Tool to Improve Your UI's Performance

DZone 's Guide to

Using the Android Hierarchy View Tool to Improve Your UI's Performance

The Android Hierarchy View Tool, part of Android Studio, is for more than visualizing your UI. You can use it to test how a UI performs so your users get the best.

· Mobile Zone ·
Free Resource

Android has always been known to give developers a lot of leeway when creating apps for the platform. There is no exception to this when creating a UI. If a developer pleases, they could dive right into the XML and create a layout from scratch. Personally, this is the way I prefer building my layouts because you get full control and ultimately have a better understanding about what is going on. However, great power comes at a price, with so much control, there are many ways to achieve the same layout, some more performant than others.

To counter this, Android provides documentation about how layouts should be created and how to avoid common mistakes. However, there will be times when things aren’t as black and white and you really can’t be sure how to lay out your UI for the best performance. Fortunately, there is a tool that all Android developers have at their disposal called the Hierarchy View. This tool allows developers to test the layout rendering times of their views with hard data and therefore be able to try out different ways to layout widgets in order to see what works best.

So how do you use it? Well, at one time, Hierarchy View was a standalone application accessed directly from the Android SDK, but it is now conveniently built into Android Studio. From Android Studio, go to Tools -> Android -> Android Device Monitor. Once Android Device Monitor is open, go to Window -> Open Perspective and finally choose Hierarchy View. The caveat to running this from Android Studio is that Android Device Monitor will break the ADB connection Android Studio had with your device or emulator. To get around this, ensure that the app whose layout you’d like to test is already installed on the device and close Android Studio.

Once your app is at the forefront of your device or emulator, you should have something that looks like this. If not, remember to close Android Studio, bring up your app, and click the refresh icon.

Image title

At this point, you should notice the activity listed whose layout you'd like to test. Double-click it.Image title

And note the arrow. It's not important now, but we'll get back to it.

Immediately, you should see the tree view representation of your layout. Of course, your layout will probably look different. For this example, I've kept things simple and only added two buttons in a vertically oriented LinearLayout. Here is how it looks on my emulator.

Image title

Each node represents a view. If you click on one of the nodes in the tree view, you should see three fields; Measure, Layout, and Draw. Draw is the one we are most concerned about. It tells us how long the draw method in the selected view took to complete in milliseconds, obviously the shorter the better. However, you may notice that there are no timing values, just N/A. This is because there is one extra step you need to take in order to see the calculations. Look above at the tree view image and notice the red arrow pointed to a three circle icon, when you hover over it, the tip box should say, "obtain layout time for tree rooted at selected node." So in order to see layout times click on a node then click on the icon, Android will re-draw the selected node and all of its subsequent children calculating the time it took to draw each of them. Hooray!

With the Hierarchy View now at your disposal, you will be able to tweak your layout to find the best-performing ones. A good general rule to follow is to avoid nesting too many LinearLayouts and using a flat layout ViewGroup such as a RelativeLayout instead. Moreover, most of the performance hits will come from when a bad layout is put inside a ListView or RecyclerView where it is repeated many times. That being said, I encourage you to purposely put a heavily nested layout inside a ListView and test the performance with Hierarchy View then compare the timing without the nesting using a RelativeLayout.

I will be holding a workshop at Mobile+Web Dev Con that will be showing how to use this tool in more detail and also going over more ways to improve UI performance, maintainability and other tips and tricks. Hope to see you there!

android studio, mobile, mobile performance, tutorial, ui

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}