Share

engineering

2min read

Android Hierarchy Viewer – A Clearer Look at UI

Android Hierarchy Viewer – A Clearer Look at UI

The Problem

When coding for Android (or any platform for that matter), developers have to keep track of an extensive codebase on their screens and in their heads. In mobile apps, UI elements are key to how the product is going to appear to the user and they have to be adjusted to look good on all kinds of screens. Sometimes properties of these element can cause strange behaviours and oftentimes it can be difficult to put your finger on what is causing the problem. This is why the Android SDK provides developers with tools to help with this kind of problem, such as the Hierarchy View Perspective or a dump of views in the Android Device Monitor. But these tools have some limitations which can complicate the coding process: Hierarchy View requires a rooted device, which can be pointless for testing, since rooting wrecks the environment and allows many things that won’t run on an unrooted device. Android Device Monitor runs on the latter, but requires you to unplug the debugger, making it difficult to work with.

Hierarchy Viewer

Our Hierarchy Viewer Library is a new alternative tool. It is easy to use and does not affect debugging or require rooting – it can even run over a wireless network. It is added to your app like a standard Android library.

How to use it

Step 1

Add the library in dependencies:

compile 'com.polidea:hierarchyviewer:1.0.0-SNAPSHOT' 

Step 2

Start the library’s server in your code:

public class YourApplication extends Application {
      @Override
      public void onCreate() {
          super.onCreate();
          HierarchyViewer.start(this);
      }
  }

Step 3

Run your app. You will see a notification with an IP address. That is the address of the server which will provide information about the UI elements of your application.

phone

Navigate to the IP address in Chrome. You can see all the properties of the UI elements in an intuitive way. Click on an element on the screenshot or on the list to display information in the table on the left as is shown below: https://www.youtube.com/embed/PgivRST_f-A

For more information and some advanced options, take a look on github.

This library is of course open sourced. If you have some ideas on how to improve it, don’t be shy – become a contributor.

Share

Piotr

Senior Software Engineer

Konrad

Senior Software Engineer

Paweł

Staff Software Engineer

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!