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.
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.
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 
na parte de cima do Layout Display e alterne Show borders ou Show View
Label.
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
e
gire arrastando o mouse.
Figura 4. Visualização 3D rotacionada de um layout.
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
.
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 6. 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 combináveis ocorre é 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 previsto podem levar a comportamentos inesperados.
O Layout Inspector mostra quando os elementos combináveis discretos na hierarquia de layout são recompostos ou ignorados conforme você interage com o app. No Android Studio Electric Eel, as recomposições são destacadas para ajudar a determinar em que local da IU os elementos combináveis estão sendo recompostos.
Figura 7. As recomposições são destacadas no Layout Inspector.
A parte destacada mostra uma sobreposição de gradiente do elemento combinável na seção de imagem do Layout Inspector. Ela desaparece gradualmente para que você possa ter uma ideia de onde o elemento combinável com a maior recomposição pode ser encontrado na IU. Se um elemento combinável for recomposto a uma taxa maior do que outro, o primeiro receberá uma cor de sobreposição de gradiente mais forte.
Para conferir a contagem de recomposições, 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.
Figura 8. 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ó combinável mostra as dimensões e os parâmetros do elemento combinável, a menos que ele seja uma função in-line. Nesse caso, não é possível mostrar os parâmetros. Você também pode encontrar informações parecidas no painel Attributes ao selecionar um elemento combinável na Component Tree ou em Layout Display.
A redefinição da contagem pode ajudar você a entender 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.
Figura 9. 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.
Figura 10. 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.
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 11. 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 12. 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 13. 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 14. 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 15. 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 16. 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 17. Visualizações de tamanho de fonte variável na ferramenta de Validação de layout.