O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Depurar seu layout com o Layout Inspector e Layout Validation

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:

  1. Execute seu app em um dispositivo conectado ou emulador.
  2. Clique em Tools > Layout Inspector.

Conforme mostrado na Figura 1, o Layout Inspector exibe o seguinte:

  1. Component Tree: a hierarquia de visualizações do layout.
  2. 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.
  3. Barra de ferramentas do Layout Inspector: ferramentas para o Layout Inspector.
  4. Attributes: os atributos de layout da visualização selecionada.

Captura de tela do Layout Inspector com rótulos que indicam a Component Tree, a barra de ferramentas do Layout Inspector, o display de layout
                                                                   e atributos

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 Ícone de opções de visualização o Live Layout Inspector 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.

Pilha de resolução de valores de propriedades

Figura 2. Valores de propriedade no painel "Attributes" com hiperlinks para as definições das propriedades.

Por fim, o Layout Display apresenta uma visualização 3D avançada da hierarquia de visualização do seu app no ambiente de execução. Para usar esse recurso, na janela do Live Layout Inspector, clique no layout e gire-o arrastando o mouse. Para expandir ou reduzir as camadas do layout, use o controle deslizante Layout Spacing.

Layout Inspector: visualização em 3D

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:

Captura de tela da guia

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


Captura de tela do menu suspenso na ferramenta Layout Validation

Pixel Devices

Visualize como seu layout é exibido em dispositivos Pixel:

Captura de tela das visualizações de layout em diferentes 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:

Animação mostrando como personalizar a exibição de um dispositivo na ferramenta Layout Validation

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:

Captura de tela de visualizações de simulação para diferentes tipos 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:

Visualizações de layouts de apps com diferentes tamanhos de fonte com erros de layout visíveis para fontes grandes

Figura 7. Visualizações de tamanho de fonte variável na ferramenta Layout Validation