Criar uma IU com o Layout Editor

Com o Layout Editor, você pode criar rapidamente layouts arrastando elementos de IU para um editor de design visual, em vez de escrever manualmente o XML do layout. O Design Editor pode exibir uma visualização do layout em vários dispositivos e versões do Android, e é possível redimensionar dinamicamente o layout para garantir que funcione bem em tamanhos de tela diferentes.

O Layout Editor é particularmente útil para criar um layout com ConstraintLayout, um gerenciador de layout compatível com o Android 2.3 (API de nível 9) ou mais recente.

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

Figura 1. O Layout Editor.

  1. Palette: contém várias visualizações e grupos de visualização que você pode arrastar para o layout.
  2. Component tree: mostra a hierarquia de componentes no seu layout.
  3. Toolbar: clique nestes botões para configurar a aparência do layout no editor e alterar os atributos de layout.
  4. Design editor: edite seu layout na visualização "Design", "Blueprint" ou ambas.
  5. Attributes: controles para os atributos da visualização selecionada.
  6. View mode: veja seu layout no modo Code ícone do modo , Design ícone do modo ou Split ícone do modo . O modo Split mostra as janelas Code e Design ao mesmo tempo.
  7. 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 ícone do modo no canto superior direito da janela. Observe que as janelas Palette, Component Tree e Attributes não estão disponíveis durante a edição do layout na visualização Code.

Dica: você pode alternar entre os editores de design e texto pressionando Alt + Shift + Right/Left arrow (Control + Shift + Right/Left arrow no Mac).

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.

Figura 2. Botões da barra de ferramentas do Layout Editor que configuram a aparência do layout.

Os botões disponíveis são os seguintes, identificados pelos números da figura 2:

  1. Design and blueprint: selecione como quer visualizar o layout no editor. 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. Você também pode pressionar B para alternar esses tipos de visualização.
  2. Screen orientation and layout variants: escolha entre a orientação de tela paisagem e retrato ou escolha outros modos de tela para os quais o app oferece layouts alternativos, como o modo noturno. Esse menu também contém comandos para criar uma nova variante de layout. Você também pode pressionar O para alterar a orientação.
  3. Screen orientation and layout variants: selecione o tipo de dispositivo (smartphone/tablet, Android TV ou Wear OS) e a configuração de tela (tamanho e densidade). Você pode escolher entre diversos tipos de dispositivos pré-configurados e suas próprias definições de AVD ou iniciar um novo AVD selecionando Add Device Definition na lista. É possível redimensionar o tamanho do dispositivo ao arrastar o canto inferior direito do layout. Você também pode pressionar D para percorrer a lista de dispositivos.
  4. API version: selecione a versão do Android em que você quer visualizar o layout.
  5. App theme: selecione o tema de IU a ser aplicado na visualização. Observe que isso funciona apenas para os estilos de layout compatíveis. Portanto, diversos temas dessa lista resultam em erro.
  6. 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 suspenso. Para saber mais informações sobre como trabalhar com traduções, consulte Localizar a IU 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, você poderá criar variações de layout para configurações específicas do dispositivo, como telas grandes.

É possível criar um novo layout de uma das seguintes maneiras:

Usar o menu principal do Android Studio

  1. Na janela Project, clique no módulo ao qual você quer adicionar um layout.
  2. No menu principal, selecione File > New > XML > Layout XML File.
  3. Na caixa de diálogo exibida, insira o nome do arquivo, a tag do layout raiz e o conjunto de origem a que o layout pertence.
  4. Clique em Finish para criar o layout.

Usar a visualização Project

  1. Escolha a visualização Project dentro da janela Project.
  2. Clique com o botão direito do mouse no diretório ao qual quer adicionar o layout.
  3. No menu de contexto exibido, clique em New > Layout Resource File.

Usar a visualização Android

  1. Escolha a visualização Android dentro da janela Project.
  2. Clique com o botão direito do mouse na pasta layout.
  3. No menu de contexto exibido, selecione New > Layout Resource File.

Usar o Resource Manager

  1. No Resource Manager, selecione a guia Layout.
  2. 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:

  1. Abra o arquivo de layout original e clique no ícone Design ícone do modo no canto superior direito da janela.
  2. Clique em Orientation for Preview botão de orientação de visualização na barra de ferramentas.
  3. Na lista suspensa, selecione uma variante sugerida, como Create Landscape Variant.

Criar sua própria variante de layout

Se quiser criar sua própria variante de layout, faça o seguinte:

  1. Abra o arquivo de layout original e clique no ícone Design (ícone do modo ) no canto superior direito da janela.
  2. Clique em Orientation for Preview botão de orientação de visualização na barra de ferramentas.
  3. Na lista suspensa, selecione Create Other.
  4. Na caixa de diálogo exibida, defina os qualificadores de recurso para a variante. Selecione um qualificador da lista Available qualifiers e clique no botão Add botão para adicionar qualificador. Repita essa etapa para adicionar outros qualificadores conforme necessário.
  5. Depois de adicionar todos os qualificadores, clique em OK.

Quando você tem diversas variações do mesmo layout, é possível alternar entre elas clicando em Layout Variants botão de variantes de layout e escolhendo na lista exibida.

Para saber mais sobre como criar layouts para telas diferentes, consulte Compatibilidade com tamanhos de tela diferentes.

Converter uma visualização ou layout

Você pode converter uma visualização em outro tipo de visualização, bem como um layout em outro tipo de layout.

  1. Clique no botão Design no canto superior direito da janela do editor.
  2. Em Component Tree, clique com o botão direito do mouse na visualização ou no layout e clique em Convert view.
  3. 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, você precisa converter layouts antigos em ConstraintLayout. ConstraintLayout usa um sistema de layout baseado em restrições que permite criar a maioria dos layouts sem aninhar nenhuma visualização em grupo.

Para converter um layout existente em um ConstraintLayout, faça o seguinte:

  1. Abra um layout existente no Android Studio e clique no botão Design no canto superior direito da janela do editor.
  2. Em Component Tree, clique com o botão direito do mouse no layout e clique em Convert your-layout-type em 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 botão de pesquisa da palette na parte superior da palette. Como alternativa, você pode digitar o nome do item sempre que a janela Palette estiver em destaque.

Os itens usados com frequência podem ser encontrados na categoria Common na Palette. Para adicionar um item a essa categoria, clique com o botão direito do mouse em uma visualização ou em uma visualização em grupo 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 IU 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 existir nenhuma entrada específica para o item, o comando 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, basta arrastar visualizações e grupos de visualização da Palette para o Design Editor. Quando você posiciona uma visualização no layout, o editor exibe informações sobre o relacionamento dela com o restante do layout.

Se você estiver usando o ConstraintLayout, poderá criar restrições automaticamente usando os recursos "Infer Constraints" e "Autoconnect".

Editar atributos da visualização

Figura 3. A janela Attributes.

Você pode editar os atributos de visualização na janela Attributes no lado direito do Layout Editor. Essa janela está disponível somente quando o Design Editor está aberto. Portanto, você precisa estar usando o modo Design ou Split para visualizar o layout.

Quando você seleciona uma visualização seja clicando na visualização na Component Tree ou no Design Editor, a janela Attributes exibe as seguintes informações, conforme indicado na figura 3:

  1. A seção Declared Attributes lista os atributos especificados no arquivo de layout. Para adicionar um atributo, clique no botão Add botão adicionar atributo no canto superior direito da seção.
  2. A seção Layout contém controles para a largura e 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 saber mais sobre como trabalhar com ConstraintLayout, consulte Criar uma IU responsiva com o ConstraintLayout.
  3. A seção Common Attributes lista atributos comuns para a visualização selecionada. Para ver todos os atributos disponíveis, expanda a seção All Attributes na parte inferior da janela.
  4. Clique no botão Search para procurar um atributo de visualização específico.
  5. Os ícones à direita de cada valor de atributo indicam se os valores de atributo são referências de recursos. Esses indicadores são sólidos ícone de indicador sólido quando o valor é uma referência de recurso e vazios ícone de indicador vazio quando o valor está codificado. Esses indicadores ajudam você a reconhecer rapidamente os valores codificados. Clicar em indicadores em qualquer um desses estados abre a janela de diálogo Resources, em que você pode selecionar uma referência de recurso para o atributo correspondente.
  6. Um destaque vermelho ao redor de um valor de atributo indica erro com o valor. Um erro pode indicar uma entrada inválida em um atributo de definição de layout, conforme exibido no destaque em vermelho na figura 3.

    Um destaque laranja indica um alerta para o valor. Um aviso pode aparecer quando você usar um valor codificado quando uma referência de recurso é esperada, por exemplo.

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. No Android Studio 3.2 e mais recentes, você pode adicionar dados de visualização de amostra a um TextView, um ImageView ou um RecyclerView a partir do Layout Editor.

Você pode clicar com o botão direito do mouse em um desses tipos de visualização e escolher Set Sample Data para exibir a janela Design-time View Attributes, conforme mostrado na figura 4.

janela

Figura 4. A janela Design-time View Attributes.

Em um TextView, há várias opções de categorias de texto de amostra diferentes. Ao usar o texto de amostra, o Android Studio preenche o atributo text de TextView com os dados de amostra escolhidos. Será possível escolher o texto de amostra na janela Design-time View Attributes apenas se o atributo text estiver vazio.

visualização de texto com dados de amostra

Figura 5. Um TextView com dados de amostra.

Em um ImageView, há opções diferentes de imagens de amostra. Quando você escolher uma imagem de amostra, o Android Studio preencherá o atributo tools:src de ImageView (ou de tools:srcCompat, se estiver usando a Biblioteca de Suporte).

visualização de imagem com dados de amostra

Figura 6. Um ImageView com dados de amostra.

Em um RecyclerView, há opções de conjuntos de modelos com imagens e textos de amostra, que podem ser escolhidas. 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 amostra

Figura 7. Um 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 ícone de exclamação em um círculo vermelho indicando um erro de layout é usado para erros, e um ícone de exclamação em um triângulo laranja ícone de exclamação em um triângulo laranja indicando um aviso de layout, para avisos. Clique no ícone para ver mais detalhes.

Para ver todos os problemas conhecidos em uma janela abaixo do editor, clique em Show Warnings and Errors (ícone de exclamação em um círculo vermelho indicando um erro de layout ou ícone de exclamação em um triângulo laranja indicando um aviso de layout) na barra de ferramentas.

Fazer o download de fontes e aplicá-las ao texto

Se estiver usando o Android 8.0 (API de nível 26) ou a Biblioteca de Suporte 26.0.0 ou mais recentes, você poderá escolher entre centenas de fontes seguindo estas etapas:

  1. No Layout Editor, clique no botão Design ícone do modo para visualizar o layout no Design Editor.
  2. Clique em uma visualização de texto.
  3. Na janela Attributes, expanda textAppearance e, em seguida, expanda a caixa fontFamily.
  4. Role até a parte inferior da lista e clique em More Fonts para abrir a caixa de diálogo Resources.
  5. Na caixa de diálogo Resources, selecione uma fonte navegando na lista ou digitando na barra de pesquisa na parte superior. Se você selecionar uma fonte em Downloadable, poderá clicar em Create downloadable font para carregar a fonte no ambiente de execução como uma fonte disponível para download ou clicar em Add font to project para empacotar o arquivo de fonte TTF no APK. Observe que as fontes listadas em Android são oferecidas pelo sistema Android. Portanto, não é necessário fazer o download nem as empacotar no APK.
  6. Clique em OK para concluir.