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

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. Se você alternar entre vários dispositivos ou projetos, o Layout Inspector vai se conectar automaticamente aos processos depuráveis em execução em primeiro plano no dispositivo conectado.

Snapshot 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 para visualizações, consulte Introdução ao Layout Editor.

Layout Inspector incorporado (experimental)

No Android Studio Hedgehog e versões mais recentes, você pode executar o Layout Inspector diretamente na janela de ferramentas "Running Devices". Esse recurso experimental melhora significativamente a performance do Layout Inspector, economiza espaço na tela e ajuda a organizar o fluxo de trabalho de depuração da interface em uma única janela de ferramentas. Para ativar o modo incorporado:

  • No Windows, acesse File > Settings > Experimental > Layout Inspector.
  • No macOS, acesse Android Studio > Settings > Experimental > Layout Inspector.

Saiba como começar e realizar algumas tarefas comuns:

  • Para iniciar o Layout Inspector, acesse a janela Running Devices e clique em Toggle Layout Inspector Botão para ativar ou desativar o Layout Inspector incorporado.
  • Para conferir a hierarquia e inspecionar as propriedades de cada visualização, use a janela de ferramentas Component Tree e Attribute Panel.
  • Para selecionar visualizações clicando uma vez diretamente nelas ou navegar até o código clicando duas vezes, ative Toggle Deep Inspect Botão para ativar ou desativar a inspeção profunda.
  • Para interagir com o app, desative Toggle Deep Inspect Botão para ativar ou desativar a inspeção profunda.
  • Para inspecionar dispositivos físicos, ative o espelhamento de dispositivos.
  • Para usar o modo 3D, faça um snapshot do Layout Inspector Snapshot do Layout Inspector.

Layout Inspector incorporado

Figura 2. Layout Inspector incorporado para o app Jetchat

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 3. 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 4. Para ocultar as bordas do layout e conferir 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 5. Visualização 3D rotacionada de um layout.

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

Figura 6. 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 .

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 7. Como criar um snapshot no Layout Inspector.

Inspecionar o Compose

O Layout Inspector permite inspecionar um layout do Compose dentro de 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 combinável é 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 interface, o que pode prejudicar o desempenho. Alguns erros de programação podem impedir que a interface seja recomposta, por exemplo, fazendo com que as mudanças não apareçam na tela.

Saiba mais sobre o Layout Inspector para Compose

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 12. 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.

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 13. 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)
  • Personalizado
  • Color Blind (modo de daltonismo)
  • Font Sizes

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

Figura 14. 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 15. Visualizações de dispositivos de referência na ferramenta de Validação de layout.

Personalizado

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 16. 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 17. 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 18. Visualizações de tamanho de fonte variável na ferramenta de Validação de layout.