O Layout Inspector no Android Studio permite que você compare o layout do seu app com modelos de design, exiba uma visualização ampliada ou 3D do seu app e examine os detalhes do layout no tempo de execução. Isso é especialmente útil quando seu layout é criado no tempo de execução, e não totalmente em XML, e o layout está se comportando inesperadamente.
A ferramenta Layout Validation 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.
Abrir o Layout Inspector
Para abrir o Layout Inspector, siga estas etapas:
- Execute seu app em um dispositivo conectado ou emulador.
- Clique em Tools > Layout Inspector.
Conforme mostrado na Figura 1, o Layout Inspector exibe o seguinte:
- Component Tree: a hierarquia de visualizações do layout.
- Layout Display: renderização do layout do app da forma como é exibido no dispositivo ou emulador, com limites de layout mostrados para cada visualização.
- Barra de ferramentas do Layout Inspector: ferramentas para o Layout Inspector.
- Attributes: os atributos de layout da visualização selecionada.
Figura 1. Layout Inspector
Selecionar uma visualização
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 exibidos no painel Attributes.
Caso seu layout inclua visualizações sobrepostas, você poderá selecionar uma visualização que não estiver por cima clicando nela na Component Tree ou girando o layout e clicando na visualização desejada.
Isolar uma visualização
Para trabalhar com layouts complexos, é possível isolar visualizações individuais para que apenas um subconjunto do layout seja exibido na Component Tree e renderizado em Layout Display.
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 superior do Layout Display e alterne Show borders. ou
Show View Label.
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, clique em Load Overlay
na parte superior do Layout Inspector. A sobreposição 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
.
Live Layout Inspector
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, acesse File > Settings > Experimental e marque a caixa ao lado de Enable Live Layout Inspector. Em seguida, clique na caixa de seleção ao lado de Live updates acima de Layout Display.
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.
Além disso, a pilha de resolução de valores de propriedade permite investigar onde um valor de propriedade de recurso se origina no código-fonte e navegar até o local seguindo os hiperlinks no painel de propriedades.
Figura 2. Valores de propriedade no painel "Attributes" com hiperlinks para as definições das propriedades.
Figura 3. Visualização 3D rotacionada de um layout.
Layout Validation
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 superior direito da janela do ambiente de desenvolvimento integrado:
Para alternar entre os conjuntos de configurações disponíveis, selecione uma das seguintes opções na lista suspensa na parte superior da janela "Layout Validation":
- Pixel Devices
- Custom
- Color Blind
- Font Sizes
Pixel Devices
Visualize como seu layout é exibido em dispositivos Pixel:
Figura 4. Visualizações de dispositivos Pixel na ferramenta Layout Validation
Custom
Para personalizar uma configuração de exibição para a visualização, escolha entre uma variedade de configurações, incluindo idioma, dispositivo ou orientação da tela:
Figura 5. Configurar uma exibição personalizada na ferramenta Layout Validation
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 6. Visualizações de simulação de daltonismo na ferramenta Layout Validation
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 7. Visualizações de tamanho de fonte variável na ferramenta Layout Validation