O Layout Editor permite criar rapidamente layouts baseados em View
arrastando
elementos da interface para um editor de design visual em vez de escrever o XML do layout.
O Design Editor pode exibir uma prévia do layout em diferentes dispositivos e
versões do Android, e você pode redimensionar dinamicamente o layout para garantir que funcione corretamente
em diferentes tamanhos de tela.
O Layout Editor é especialmente útil para
criar um layout com ConstraintLayout
.
Esta página oferece uma visão geral da interface do Layout Editor. Para saber mais sobre os fundamentos de layout, consulte Layouts.
Introdução ao Layout Editor
O Layout Editor é exibido quando você abre um arquivo de layout XML.
![layout editor](https://developer.android.com/static/studio/images/write/layout-editor.png?authuser=8&hl=pt-br)
- Palette: contém várias visualizações e grupos de visualizações que você pode arrastar para o layout.
- Component Tree: mostra a hierarquia de componentes no seu layout.
- Barra de ferramentas: tem botões que configuram a aparência do layout no editor e mudam os atributos dele.
- Design Editor: permite editar o layout na visualização "Design", "Blueprint" ou ambas.
- Attributes: tem controles para os atributos da visualização selecionada.
- View mode: permite visualizar o layout nos modos Code
, Split
ou Design
. O modo Split mostra as janelas Code e Design ao mesmo tempo.
- Zoom and pan controls: controle o tamanho e a posição da visualização no editor.
Quando você abre um arquivo de layout XML, o Design Editor é exibido por padrão, como mostrado
na figura 1. Para editar o XML de layout no editor de texto, clique em Code
no canto superior direito da janela. Os painéis
Palette, Component Tree e Attributes não estão
disponíveis ao editar seu layout na visualização Code.
Dica:para alternar entre os editores de design e texto, pressione
Alt
(Control
no macOS) mais Shift
e a tecla de seta para a direita ou esquerda.
Alterar a aparência da visualização
Os botões na linha superior do Design Editor permitem configurar a aparência do layout no editor.
![Botões da barra de ferramentas do Layout Editor que configuram a aparência do layout.](https://developer.android.com/static/studio/images/write/layout-editor-toolbar.png?authuser=8&hl=pt-br)
- Design and Blueprint: selecione como você quer visualizar o layout no
editor. Você também pode pressionar
B
para alternar entre esses tipos de visualização.- Escolha Design para ter uma visualização renderizada do layout.
- Escolha Blueprint para ver apenas os contornos de cada visualização.
- Escolha Design + Blueprint para ter as duas visualizações lado a lado.
- Tela de orientação e variantes de layout: escolha entre a orientação de tela de paisagem ou
retrato ou escolha outros modos de tela para os quais o app
fornece layouts alternativos, como o modo noturno. Esse menu também
contém comandos para criar uma nova variante de layout,
conforme descrito em uma seção desta página.
Você também pode pressionar a letra
O
no teclado para mudar a orientação. Modo de interface do sistema: se você ativou as cores dinâmicas no app, troque os planos de fundo e observe como os layouts reagem a diferentes planos de fundo escolhidos pelos usuários. Primeiro, é necessário mudar o tema para um tema de cores dinâmicas do Material Design e depois mudar o plano de fundo.
Screen orientation and layout variants: selecione o tipo de dispositivo (smartphone/tablet, Android TV ou Wear OS) e a configuração da tela (tamanho e densidade). Você pode escolher entre vários tipos de dispositivos pré-configurados e suas próprias definições de AVD, além de criar um novo AVD selecionando Add Device Definition na lista, conforme mostrado na Figura 3.
- Para redimensionar o dispositivo, arraste o canto inferior direito do layout.
- Pressione
D
para navegar pela lista de dispositivos.
Testar o layout em relação aos Dispositivos de referência nesse menu ajuda o app a ser dimensionado corretamente para estados de layout em dispositivos reais.
Figura 3. Lista de dispositivos mostrando os dispositivos de referência. API version: selecione a versão do Android para visualizar o layout. A lista de versões disponíveis do Android depende das versões da plataforma do SDK instaladas usando o SDK Manager.
App theme: selecione o tema de IU a ser aplicado na visualização. Isso funciona apenas para os estilos de layout com suporte. Portanto, muitos temas nessa lista resultam em erro.
Language: selecione o idioma de exibição de strings de IU. A lista exibe apenas os idiomas disponíveis nos recursos de string. Para editar as traduções, clique em Edit Translations no menu. Para mais informações sobre como trabalhar com traduções, consulte Localizar a interface com o Translations Editor.
Criar um novo layout
Para adicionar um novo layout ao app, primeiro crie um arquivo de layout padrão no
diretório layout/
padrão do projeto para que ele seja aplicado a todas as configurações
de dispositivo. Assim que tiver um layout padrão, é possível
criar variações de layout, conforme descrito em uma seção desta
página, para configurações específicas de dispositivos, como telas grandes.
É possível criar um novo layout de uma das seguintes maneiras:
Usar o menu principal do Android Studio
- Na janela Project, clique no módulo a que você quer adicionar um layout.
- No menu principal, selecione File > New > XML > Layout XML File.
- Na caixa de diálogo exibida, forneça o nome do arquivo, a tag do layout raiz e o conjunto de origem a que o layout pertence.
- Clique em Finish para criar o layout.
Usar a visualização Project
- Escolha a visualização Project dentro da janela Project.
- Clique com o botão direito do mouse no diretório ao qual quer adicionar o layout.
- No menu de contexto exibido, clique em New > Layout Resource File.
Usar a visualização Android
- Escolha a visualização Android dentro da janela Project.
- Clique com o botão direito do mouse na pasta
layout
. - No menu de contexto exibido, selecione New > Layout Resource File.
Usar o Resource Manager
- No Resource Manager, selecione a guia Layout.
- Clique no botão
+
e em Layout Resource File.
Usar variantes de layout para otimizar diferentes telas
Uma variante de layout é uma versão alternativa de um layout existente, otimizada para um determinado tamanho ou orientação de tela.
Usar uma variante de layout sugerida
O Android Studio inclui variantes de layout comuns que você pode usar no seu projeto. Para usar uma variante de layout sugerida, faça o seguinte:
- Abra o arquivo de layout padrão.
- Clique no ícone Design
no canto superior direito da janela.
- O nome do arquivo de layout aparece no menu suspenso Action to switch and create qualifiers for layout files. Selecione o menu suspenso.
- Na lista suspensa, selecione uma variante, como
Create Landscape Qualifier ou Create Tablet Qualifier.
Figura 4. Lista suspensa de qualificadores de layout.
Um novo diretório de layout é criado.
Criar sua própria variante de layout
Se quiser criar sua própria variante de layout, faça o seguinte:
- Abra o arquivo de layout padrão.
- Clique no ícone Design
no canto superior direito da janela.
- O nome do arquivo de layout aparece no menu suspenso Action to switch and create qualifiers for layout files. Selecione o menu suspenso.
Na lista suspensa, selecione Adicionar qualificador de recursos. Consulte a figura 4 acima.
A caixa de diálogo Select Resource Directory é exibida.
Na caixa de diálogo Select Resource Directory, defina os qualificadores de recurso para a variante:
- Selecione um qualificador na lista Available qualifiers.
- Clique no botão Add
.
- Insira os valores necessários.
- Repita essas etapas para adicionar outros qualificadores.
Depois de adicionar todos os qualificadores, clique em OK.
Quando você tem diversas variações do mesmo layout, é possível alternar entre elas selecionando uma variante na lista suspensa Action to switch and create qualifiers for layout files.
Para mais informações sobre como criar layouts para telas diferentes, consulte Suporte a tamanhos de tela diferentes.
Converter uma visualização ou layout
Você pode converter uma visualização em outro tipo, além de converter um layout para outro tipo:
- Clique no botão Design no canto superior direito da janela do editor.
- Em Component Tree, clique com o botão direito do mouse na visualização ou no layout e clique em Convert view.
- Na caixa de diálogo exibida, escolha o novo tipo de visualização ou layout e clique em Apply.
Converter um layout em ConstraintLayout
Para melhorar o desempenho do layout, converta layouts antigos para
ConstraintLayout
.
O ConstraintLayout
usa um sistema de layout baseado em restrições que permite
criar a maioria dos layouts sem aninhar nenhum grupo de visualização.
Para converter um layout existente em um ConstraintLayout
, faça o seguinte:
- Abra um layout existente no Android Studio.
- Clique no ícone Design
no canto superior direito da janela do editor.
- Em Component Tree, clique com o botão direito do mouse no layout e clique em
Convert
your-layout-type
to ConstraintLayout.
Para saber mais sobre ConstraintLayout
, consulte
Criar uma IU responsiva com o ConstraintLayout.
Encontrar itens na "Palette"
Para procurar uma visualização ou uma visualização em grupo pelo nome na Palette, clique no botão
Search
na parte de cima da Palette. Como alternativa, você pode digitar o nome do
item sempre que a janela Palette estiver em foco.
Em Palette, você pode encontrar os itens usados com frequência na categoria Common. Para adicionar um item a essa categoria, clique com o botão direito do mouse em uma visualização ou em um grupo de visualização na Palette e, em seguida, clique em Favorite no menu de contexto.
Abrir documentação na "Palette"
Para abrir a documentação de referência do Android Developers para uma visualização ou uma visualização em grupo,
selecione o elemento de interface na Palette e pressione Shift
+F1
.
Para ver a documentação das diretrizes do Material Design para uma visualização ou visualização em grupo, clique com o botão direito do mouse no elemento de IU na Palette e selecione Material Guidelines no menu de contexto. Se não houver uma entrada específica para o item, o comando vai abrir a página inicial da documentação das diretrizes do Material Design (link em inglês).
Adicionar visualizações ao layout
Para começar a criar um layout, arraste visualizações e visualizações em grupo da Palette para o Design Editor. Quando você posicionar uma visualização no layout, o editor exibirá informações sobre o relacionamento dela com o restante do layout.
Se você estiver usando ConstraintLayout
, poderá
criar restrições automaticamente
usando os recursos Infer Constraints e Autoconnect.
Editar atributos da visualização
![A](https://developer.android.com/static/images/studio/write/layout-editor-attributes-2x.png?authuser=8&hl=pt-br)
Você pode editar os atributos de visualização no painel Attributes no Layout Editor. Essa janela está disponível apenas quando o Design Editor está aberto. Então, visualize seu layout no modo Design ou Split para usá-lo.
Quando você seleciona uma visualização, seja clicando nela na Component Tree ou no Design Editor, o painel Attributes exibe as informações a seguir, conforme indicado na Figura 5:
- Declared Attributes: lista os atributos especificados no arquivo
de layout. Para adicionar um atributo, clique no botão Add
na parte de cima da seção.
- Layout: contém controles para a largura e a altura da
visualização. Se a visualização estiver em um
ConstraintLayout
, esta seção também mostrará a tendência de restrição e listará as restrições que a visualização usa. Para mais informações sobre como controlar o tamanho das visualizações comConstraintLayout
, consulte Ajustar o tamanho da visualização. - Common Attributes: lista atributos comuns para a visualização selecionada. Para ver todos os atributos disponíveis, abra a seção All Attributes na parte inferior da janela.
- Pesquisa: permite que você pesquise um atributo de visualização específico.
Os ícones à direita de cada valor de atributo indicam se eles são referências de recursos. Esses indicadores são
sólidos quando o valor é uma referência de recurso e
vazios quando o valor está fixado no código para ajudar a reconhecer rapidamente os valores fixados no código.
Clique nos indicadores em qualquer um dos estados para abrir a caixa de diálogo Resources, em que é possível selecionar uma referência de recurso para o atributo correspondente.
Um destaque vermelho ao redor de um valor de atributo indica erro com o valor. Por exemplo, um erro pode indicar uma entrada inválida em um atributo de definição de layout.
Um destaque laranja indica um alerta para o valor. Por exemplo, um aviso pode aparecer quando você usa um valor fixado no código quando uma referência de recurso é esperada.
Adicionar dados de amostra à visualização
Como muitos layouts do Android dependem de dados de tempo de execução, pode ser difícil
visualizar a aparência de um layout ao projetar seu app. Você pode adicionar
dados de visualização de amostra a um TextView
, um
ImageView
ou um RecyclerView
no Layout Editor.
Para mostrar a janela Design-time View Attributes, clique com o botão direito do mouse em um desses tipos de visualização e escolha Set Sample Data, conforme mostrado na Figura 6.
![janela "Design-time View Attributes"](https://developer.android.com/static/images/studio/write/layout-editor-design-time-view-attributes-2x.png?authuser=8&hl=pt-br)
No caso de um TextView
, é possível escolher entre diferentes categorias de texto de amostra. Ao
usar o texto de exemplo, o Android Studio preenche o atributo text
de
TextView
com os dados escolhidos. É possível escolher o texto de exemplo
na janela Design-time View Attributes apenas se o atributo text
estiver
vazio.
![visualização de texto com dados de exemplo](https://developer.android.com/static/images/studio/write/textview-sample-data-2x.png?authuser=8&hl=pt-br)
TextView
com dados de amostra.No caso de ImageView
, é possível escolher entre diferentes imagens de amostra. Quando você
escolhe uma imagem de exemplo, o Android Studio preenche o atributo tools:src
de
ImageView
(ou tools:srcCompat
, se estiver usando o AndroidX).
![visualização de imagem com dados de exemplo](https://developer.android.com/static/images/studio/write/imageview-sample-data-2x.png?authuser=8&hl=pt-br)
ImageView
com dados de amostra.Para um RecyclerView
, você pode escolher um conjunto de modelos que contêm
imagens e textos de amostra. Ao usar esses modelos, o Android Studio adiciona um arquivo
ao diretório res/layout
, recycler_view_item.xml
, que contém o
layout dos dados de amostra. O Android Studio também adiciona os metadados ao
RecyclerView
para exibir corretamente os dados de amostra.
![visualização do reciclador com dados de exemplo](https://developer.android.com/static/images/studio/write/recyclerview-sample-data-2x.png?authuser=8&hl=pt-br)
RecyclerView
com dados de amostra.Mostrar avisos e erros do layout
O Layout Editor mostra uma notificação de problemas de layout ao lado da visualização correspondente
na Component Tree. Um ícone de exclamação em um círculo vermelho
é usado para erros, e um ícone de exclamação em um triângulo laranja
,
para avisos. Clique no ícone para ver mais detalhes.
Para conferir todos os problemas conhecidos em uma janela abaixo do editor, clique em
Show Warnings and Errors
(
ou
)
na barra de ferramentas.
Fazer o download de fontes e aplicá-las ao texto
Ao usar o Android 8.0 (nível 26 da API) ou a biblioteca Jetpack Core, você pode selecionar entre centenas de fontes seguindo estas etapas:
- No Layout Editor, clique no ícone Design
para visualizar o layout no Design Editor.
- Selecione uma visualização de texto.
- No painel Attributes, expanda textAppearance e, em seguida, expanda a caixa fontFamily.
- Role até a parte inferior da lista e clique em More Fonts para abrir a caixa de diálogo Resources.
- Na caixa de diálogo Resources, para selecionar uma fonte, procure na lista ou digite na barra de pesquisa na parte de cima. Se você selecionar uma fonte em Para download, poderá clicar em Criar fonte para download para carregar a fonte no tempo de execução como uma fonte para download ou clicar em Adicionar fonte ao projeto para empacotar o arquivo de fonte TTF no seu APK. As fontes listadas em Android são fornecidas pelo sistema Android. Portanto, não é necessário fazer o download nem empacotar o APK no seu APK.
- Clique em OK para concluir.
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 superior direito da janela do ambiente de desenvolvimento integrado:
Figura 10. Guia de Validação de layout.
Para alternar entre os conjuntos de configurações disponíveis, selecione uma destas opções na lista suspensa Reference Devices na parte de cima da janela "Layout Validation":
- Dispositivos de referência
- Personalizado
- Color Blind (modo de daltonismo)
- Font Sizes
Figura 11. Menu suspenso "Dispositivos de referência".
Dispositivos de referência
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 12. Visualizações de dispositivos de referência na ferramenta de Validação de layout.
Personalizado
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 13. 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 14. Visualizações de tamanho de fonte variável na ferramenta de Validação de layout.