O hierarchyviewer é uma ferramenta impressionante e muito útil para desenvolvedores Android.

Particularmente, eu quase não uso (usava), pois ela necessita ou de um “developer phone (com developer build)” ou rodar a aplicação no emulador (que é incrivelmente lento, pesado e chato de trabalhar).

Há alguns dias, o googler Romain Guy (@romainguy) postou no twitter esse código, habilitando o uso do HierarchyViewer em seu aparelho pessoal. Pretty amazing hmm!

Certo, mas o que é o hierarchyviewer afinal?

O Hierarchy Viewer lhe permite debugar (sic) e otimizar sua interface de usuário. Ele provê uma representação visual da hierarquia das ‘Views’ do seu ‘layout’ (Layout View) e um inspetor ampliado da tela da aplicação (Pixel Perfect View).

Além disso, mostra a representação em forma de “árvore” do seu layout (lembre-se de que ele é um xml com um root node e vários filhos) e traz algumas informações muito úteis, como o tempo de gasto com “Measure, Layout, Draw”. Com essa informação você pode ter uma ideia do que está deixando a sua interface pesada.

Já no “Pixel Perfect” você tem uma visão magnificada da tela do aplicativo, em que pode conferir questões de layout/design como espaçamentos, cores etc.

Mas como fazer para usar essa maravilha toda?

Primeiro, precisamos importar o ViewServer.java em nosso projeto.

Depois basta em cada Activity do seu projeto chamar addWindow() no onCreate, setFocusedWindow() no onResume e removeWindow() no onDestroy.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ViewServer.get(this).addWindow(this);
    }

    @Override
    public void onResume() {
        super.onResume();
        ViewServer.get(this).setFocusedWindow(this);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ViewServer.get(this).removeWindow(this);
    }

Feito isso, basta rodar o aplicativo com o celular plugado no PC e rodar o hierarchyviewer (android-sdk/tools/hierarchyviewer).

Outra ferramenta interessante do HV é a possibilidade de exportar seu layout em um arquivo .psd (Photoshop), em que cada view do seu aplicativo é um layer separado, muito útil para utilizar para ajustes finos e testes no PS antes de voltar ao .xml e modificar seu app.

Até a próxima!