Depurar o layout com o Layout Inspector e a Validação de layout

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

O Layout Inspector no Android Studio permite depurar o layout do app mostrando uma hierarquia de visualizações e permitindo que você inspecione as propriedades de cada visualização. Com o Layout Inspector, é possível comparar o layout do app com modelos de design, mostrar uma visualização ampliada ou 3D do app e examinar detalhes do layout durante a execução. Isso é especialmente útil quando seu layout é criado durante a execução, e não totalmente em XML, e está se comportando de forma inesperada.

A ferramenta de Validação de layout permite visualizar layouts simultaneamente em diferentes dispositivos e configurações de exibição, incluindo tamanhos de fonte variáveis ou idiomas do usuário, facilitando o teste de vários problemas comuns de layout.

Para abrir o Layout Inspector, execute o app em um dispositivo ou emulador conectado e selecione Tools > Layout Inspector.

Captura de tela do Layout Inspector para o app de exemplo Sunflower

Figura 1. Captura de tela do Layout Inspector para o app de exemplo Sunflower. O Layout Inspector mostra estes itens nos painéis da esquerda para a direita: Component Tree (árvore de componentes), Layout display (layout de exibição) e Attributes (atributos).

  • Component Tree: a hierarquia de visualizações do layout.
  • Layout Display: a renderização do layout do app como ele aparece no dispositivo ou emulador, com limites de layout mostrados para cada visualização.
  • Attributes: os atributos de layout da visualização selecionada. O Layout Inspector exige uma reinicialização da atividade para acessar os atributos. Para mais informações, consulte Reinicialização da atividade.

Para saber mais sobre o Layout Editor, consulte Introdução ao Layout Editor.

Atualizações em tempo real

O painel Layout Display mostra o layout do seu app da forma como ele aparece no dispositivo ou emulador, com limites de layout mostrados para cada visualização. Você pode clicar em cada componente para inspecionar.

O Live Layout Inspector oferece insights completos e em tempo real sobre a IU do seu app enquanto ele é implantado em um dispositivo ou emulador com o nível 29 da API ou mais recente.

Para ativar o Live Layout Inspector, selecione a opção Live Updates na barra de ferramentas do Layout Inspector.

O Live Layout Inspector inclui uma hierarquia de layout dinâmica, atualizando a Component Tree e o Layout Display conforme as visualizações mudam no dispositivo.

Selecionar ou isolar uma visualização

Uma visualização geralmente mostra itens que aparecem para o usuário e com que ele pode interagir. A Component Tree mostra a hierarquia do app em tempo real com cada componente de visualização. Isso ajuda a depurar o layout do app, porque é possível visualizar os elementos no app e os valores associados a eles.

Para selecionar uma visualização, clique em Component Tree ou em Layout Display. Todos os atributos do layout para a visualização selecionada são mostrados no painel Attributes.

Caso seu layout inclua visualizações sobrepostas, você pode selecionar uma visualização que não esteja por cima, clicando nela em Component Tree ou girando o layout.

Para trabalhar com layouts complexos, é possível isolar visualizações individuais para que apenas um subconjunto do layout seja mostrado na Component Tree e renderizado em Layout Display.

Isolar o menu de visualização

Figura 2. Para isolar uma visualização, clique com o botão direito do mouse sobre a visualização na Component Tree e selecione Show Only Subtree ou Show Only Parents.

Para retornar à visualização completa, clique com o botão direito do mouse na visualização e selecione Show All.

Ocultar bordas do layout e visualizar rótulos

Para ocultar a caixa delimitadora ou visualizar os rótulos de um elemento de layout, clique em View Options Botão "View Options" na parte de cima do Layout Display e alterne Show borders ou Show View Label.

Menu suspenso de opções de visualização

Figura 3. Para ocultar as bordas do layout e visualizar rótulos, clique na segunda opção View Options na barra de ferramentas do Layout Inspector.

Modo 3D

Por fim, o Layout Display apresenta uma visualização 3D avançada da hierarquia de visualização do app durante a execução. Para usar esse recurso, na janela Live Layout Inspector, clique no botão 3D Mode Botão 3D e gire arrastando o mouse.

Layout Inspector: visualização em 3D

Figura 4. Visualização 3D rotacionada de um layout.

Layout Inspector: visualização de espaçamento da camada

Figura 5. Para abrir ou fechar as camadas do layout, use o controle deslizante Layout Spacing.

Comparar o layout do app a uma sobreposição de imagem de referência

Para comparar o layout do seu app a uma imagem de referência, como um modelo de IU, carregue uma sobreposição de imagem de bitmap no Layout Inspector.

  • Para carregar uma sobreposição, selecione a opção Load Overlay na barra de ferramentas do Layout Inspector. A sobreposição vai ser dimensionada para se ajustar ao layout.
  • Para ajustar a transparência da sobreposição, use o controle deslizante Overlay Alpha.
  • Para remover a sobreposição, clique em Clear Overlay .

Validação de layout

A Layout Validation é uma ferramenta visual para visualizar simultaneamente layouts para diferentes dispositivos e configurações de exibição, ajudando você a detectar problemas nos seus layouts no início do processo. Para acessar esse recurso, clique na guia Layout Validation, no canto direito de cima da janela do ambiente de desenvolvimento integrado:

Captura de tela da guia de Validação de layout

Figura 6. Guia de Validação de layout.

Para alternar entre os conjuntos de configurações disponíveis, selecione uma destas opções no menu suspenso Reference Devices na parte de cima da janela "Layout Validation":

  • Reference Devices (dispositivos de referência)
  • Custom (personalizado)
  • Color Blind (modo de daltonismo)
  • Font Sizes

Captura de tela do menu suspenso na ferramenta de Validação de layout

Figura 7. Opção "Reference Devices" do menu suspenso.

Reference Devices

Recomendamos que você faça testes com um conjunto de dispositivos de referência. Eles incluem interfaces para smartphones, dobráveis, tablets e computadores. Você precisa visualizar como o layout é exibido nesse conjunto de dispositivos de referência:

Captura de tela das visualizações de layout em diferentes dispositivos

Figura 8. Visualizações de dispositivos de referência na ferramenta de Validação de layout.

Custom

Para personalizar uma configuração de exibição para a visualização, escolha entre várias configurações, incluindo idioma, dispositivo ou orientação da tela:

Como personalizar um dispositivo na ferramenta de Validação de layout

Figura 9. Configurar uma exibição personalizada na ferramenta de Validação de layout.

Color Blind

Para ajudar a tornar seu app mais acessível para usuários com daltonismo, valide seu layout com simulações de tipos comuns de daltonismo:

Captura de tela de visualizações de simulação para diferentes tipos de daltonismo

Figura 10. Visualizações de simulação de daltonismo na ferramenta de Validação de layout.

Font Sizes

Valide seus layouts com vários tamanhos de fonte e melhore a acessibilidade do app para usuários com deficiência visual testando seus layouts com fontes maiores:

Visualizações de layouts de apps com diferentes tamanhos de fonte com erros de layout visíveis para fontes grandes

Figura 11. Visualizações de tamanho de fonte variável na ferramenta de Validação de layout.

Registrar snapshots da hierarquia de layout

O Layout Inspector permite que você salve snapshots da hierarquia de layout do app em execução para compartilhar de forma simples com outras pessoas ou consultar quando quiser.

Os snapshots capturam os dados que você normalmente veria ao usar o Layout Inspector, incluindo uma renderização 3D detalhada do layout, a árvore de componentes do layout da visualização, do Compose ou híbrido, além de atributos detalhados para cada componente da sua IU. Para salvar um snapshot, faça o seguinte:

  1. Abra o Layout Inspector.
  2. O Layout Inspector vai se conectar automaticamente ao processo do seu app. Se isso não acontecer, selecione o processo do app no menu suspenso.
  3. Quando quiser capturar um snapshot, clique em Export snapshot Ícone
de exportação na barra de ferramentas do Layout Inspector.
  4. Na caixa de diálogo do sistema, especifique o nome e o local em que você quer salvar o snapshot. Salve o arquivo com uma extensão *.li.

Em seguida, você pode carregar um snapshot do Layout Inspector selecionando File > Open na barra de menus principal e abrindo um arquivo *.li.

GIF de snapshots do Layout Inspector

Figura 12. Como criar um snapshot no Layout Inspector.

Inspecionar o Compose

O Layout Inspector permite inspecionar um layout do Compose em um app em execução em um emulador ou dispositivo físico. Você pode usar o Layout Inspector para verificar com que frequência um elemento de composição é recomposto ou ignorado, o que pode ajudar a identificar problemas com o app. Por exemplo, alguns erros de programação podem forçar a recomposição excessiva da IU, o que pode prejudicar a performance. Alguns erros de programação podem impedir que a IU seja recomposta, por exemplo, fazendo com que as mudanças não apareçam na tela.

Contagens de recomposição do Compose no Layout Inspector

Ao depurar os layouts do Compose, saber quando a recomposição dos elementos de composição é importante para entender se a IU foi implementada corretamente. Por exemplo, se a recomposição acontece muitas vezes, o app pode estar fazendo mais trabalho do que o necessário. Por outro lado, os componentes que não são recompostos conforme o esperado podem levar a comportamentos inesperados.

O Layout Inspector permite conferir quando os elementos de composição discretos na hierarquia de layout são recompostos ou ignorados. Essas informações são mostradas em tempo real, enquanto você interage com seu app.

Para começar, verifique se o app está usando o nível 29 ou mais recente da API e o Compose 1.2.0-alpha03 ou mais recente. Em seguida, implante seu app normalmente.

Contador do Layout Inspector para elementos ignorados ou recompostos

Figura 13. O contador do Layout Inspector para elementos ignorados ou recompostos.

Abra a janela Layout Inspector e conecte-se ao processo do app. Na Component Tree, há duas colunas que aparecem ao lado da hierarquia de layout. A primeira coluna mostra o número de composições para cada nó, e a segunda coluna mostra o número de elementos ignorados de cada nó. A seleção de um nó de composição vai mostrar as dimensões e os parâmetros do elemento de composição, a menos que ele seja uma função in-line. Nesse caso, não é possível mostrar os parâmetros. Você também pode conferir informações semelhantes no painel Attributes ao selecionar um elemento de composição na Component Tree ou em Layout Display.

A redefinição da contagem pode ajudar você a entender as quais elementos foram recompostos ou ignorados durante uma interação específica com o app. Se você quiser redefinir a contagem, clique em Reset próximo à parte de cima do painel Component Tree.

Ativar o contador do Layout Inspector para elementos ignorados ou recompostos

Figura 14. Ativar o contador do Layout Inspector para elementos ignorados ou recompostos.

Semântica do Compose

No Compose, a Semântica descreve a IU de uma maneira alternativa e compreensível para os serviços de acessibilidade e os frameworks de testes. Você pode usar o Layout Inspector para inspecionar informações semânticas nos layouts do Compose.

Informações semânticas mostradas usando o Layout Inspector

Figura 15. Informações semânticas mostradas usando o Layout Inspector.

Ao selecionar um nó do Compose, use a janela Attributes para verificar se ela declara informações semânticas diretamente, mescla a semântica dos filhos ou ambos. Para identificar rapidamente quais nós incluem semântica, declarada ou mesclada, use o menu suspenso View options na janela Component Tree e selecione Highlight Semantics Layers. Isso destaca apenas os nós da árvore que incluem semântica, e você pode usar o teclado para navegar rapidamente entre eles.

Como evitar reinicializações de atividades

O Layout Inspector exige uma das configurações globais abaixo para funcionar corretamente. Se você não especificar uma configuração global, o Layout Inspector vai definir uma automaticamente.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Essa opção gera informações extras para inspeção do processo especificado.

  2. adb shell settings put global debug_view_attributes 1

    Essa opção gera informações extras para inspeção em todos os processos no dispositivo.

A mudança de uma configuração global pode causar a reinicialização da atividade. Para evitar que uma atividade seja reiniciada, você pode mudar as configurações no Android Studio ou as Opções do desenvolvedor nas configurações do dispositivo.

Para ativar a atualização automática no Android Studio, abra Run/Debug Configurations selecionando Run > Edit Configurations no menu. Em seguida, navegue até a guia Miscellaneous e marque a caixa Connect to Layout Inspector without restarting activity em Layout Inspector Options.

Opção de reinicialização da atividade nas configurações de execução

Figura 16. Ative a atualização automática nas configurações de execução/depuração.

Se preferir, ative as Opções do desenvolvedor do dispositivo e configure a inspeção de atributo de visualização nas configurações do desenvolvedor do dispositivo.