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.
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.
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
. - 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
. - Para interagir com o app, desative Toggle Deep Inspect .
- Para inspecionar dispositivos físicos, ative o espelhamento de dispositivos.
- Para usar o modo 3D, faça um snapshot do Layout Inspector
.
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.
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 
na parte de cima do Layout Display e alterne Show borders ou Show View
Label.
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
e
gire arrastando o mouse.
Figura 5. Visualização 3D rotacionada de um layout.
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:
- Abra o Layout Inspector.
- 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.
- Quando quiser capturar um snapshot, clique em Export snapshot
na barra de ferramentas do
Layout Inspector. - 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.
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.
adb shell settings put global debug_view_attributes_application_package <processname>Essa opção gera informações extras para inspeção do processo especificado.
adb shell settings put global debug_view_attributes 1Essa 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.
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:
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)
- Custom (personalizado)
- Color Blind (modo de daltonismo)
- Font Sizes
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:
Figura 15. 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:
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:
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:
Figura 18. Visualizações de tamanho de fonte variável na ferramenta de Validação de layout.