Depurar seu layout com o Layout Inspector

O Layout Inspector do Android Studio permite inspecionar e depurar o layout dentro de um app em execução em um emulador ou dispositivo físico. É possível inspecionar os atributos de cada componente, comparar o layout do app com modelos de design e mostrar uma visualização ampliada do app.

android layout

Você também 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 a performance. Alguns erros de programação podem impedir que a interface seja recomposta e, portanto, que as mudanças na interface apareçam na tela.

Para mais informações, consulte Depurar a interface do Compose.

Primeiros passos

Para iniciar o Layout Inspector, execute o app, acesse a janela Running Devices e clique em Toggle 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.

Confira como realizar algumas tarefas comuns:

• Para conferir a hierarquia de visualização e inspecionar os atributos de cada componente, use as janelas de ferramentas Component Tree e Attributes. O Layout Inspector pode exigir uma reinicialização da atividade para acessar os atributos.
• Para selecionar componentes, primeiro ative Toggle Deep Inspect e clique nos componentes. Como alternativa, navegue até o código clicando duas vezes nos componentes.
• Para interagir com o app, desative Toggle Deep Inspect .
• Para inspecionar dispositivos físicos, ative o espelhamento de dispositivos.
• Para ativar as atualizações em tempo real ao atualizar a interface do app, verifique se a edição em tempo real está ativada.

Selecionar ou isolar um componente

Um componente 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 combinável. Isso ajuda a depurar o layout do app, porque é possível visualizar os elementos no app e os valores associados a eles.

Para selecionar um componente, clique nele em Component Tree ou em Layout Display. Todos os atributos do layout para o componente selecionado são mostrados no painel Attributes.

Se o layout incluir componentes sobrepostos, você poderá conferir todos os componentes em uma região clicando com o botão direito do mouse no modo Deep Inspect . Para selecionar um componente que não está por cima, clique nele em Component Tree.

Para trabalhar com layouts complexos, é possível isolar componentes individuais para que apenas um subconjunto do layout seja mostrado na Component Tree e renderizado em Layout Display. Para isolar um componente, clique com o botão direito do mouse sobre ele 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 no componente e selecione Show All.

Ocultar bordas do layout e visualizar rótulos

Para ocultar a caixa delimitadora ou os rótulos de componentes de um elemento de layout, clique em View Options na parte de cima do Layout Display e alterne Show Borders ou Show View Label.

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 detalhada do layout, a árvore de componentes do layout do Compose, da visualização ou híbrido, além de atributos detalhados para cada componente da interface. Para salvar um snapshot, clique em Snapshot Export/Import e em Export Snapshot.

Para carregar um snapshot do Layout Inspector salvo anteriormente, clique em Import Snapshot.

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 interface, 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.

Layout Inspector independente

Para ter o melhor desempenho, recomendamos usar o Layout Inspector no modo incorporado padrão. Se você quiser desincorporar o Layout Inspector, acesse File (Android Studio no macOS) > Settings > Tools > Layout Inspector e desmarque a caixa de seleção Enable embedded Layout Inspector.

No modo independente, ative as atualizações em tempo real clicando na opção Live Updates na barra de ferramentas do Layout Inspector.

Outros recursos

Conteúdo de visualizações

• Depurar o layout com o Layout Inspector (visualizações)