Criar uma IU com o Layout Editor

No Layout Editor, você pode criar rapidamente layouts de compilação 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 você pode redimensionar dinamicamente o layout para garantir que funcione bem em tamanhos de tela diferentes.

O Layout Editor é particularmente útil para criar um novo layout com o ConstraintLayout, um gerenciador de layouts fornecido em uma biblioteca de suporte compatível com o Android 2.3 (API de nível 9) ou versões posteriores.

Esta página oferece uma visão geral da interface do Layout Editor. Para saber mais sobre os fundamentos de layout, consulte Layouts. Para saber mais sobre como criar um layout com o ConstraintLayout, consulte Criar uma IU responsiva com o ConstraintLayout.

Introdução ao Layout Editor

O Layout Editor é exibido quando você abre um arquivo de layout XML.

As partes do editor são as seguintes, identificadas pelos números da imagem 1:

  1. Palette: lista de visualizações e de grupos de visualizações que você pode arrastar para o layout.
  2. Component Tree: hierarquia de visualização do seu layout.
  3. Toolbar: botões para configurar a aparência do layout no editor e para alterar alguns atributos do layout.
  4. Design editor: layout na visualização "Design", "Blueprint" ou ambas.
  5. Attributes: controles para os atributos da visualização selecionada.

Figura 1. O Layout 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 do layout no editor de texto, clique na guia Text na parte inferior da janela. No editor de texto, você também pode ver a Palette, a Component Tree e o Design Editor clicando em Preview no lado direito da janela. A janela Attributes não está disponível no editor de texto.

Dica: você pode alternar entre os editores de design e texto pressionando Alt + Shift + seta direita/esquerda (Control + Shift + seta direita/esquerda 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. Essa barra de ferramentas também está disponível na janela Preview do editor de texto.

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. Selecione a visualização Design (uma visualização real do layout), a Blueprint (somente os contornos de cada visualização) ou Design + Blueprint para ver as duas, lado a lado.

    Dica: pressione B para alternar essas visualizações.

  2. Screen orientation and layout variants: selecione entre as orientações de tela paisagem e retrato, ou outros modos de tela para os quais o aplicativo oferece layouts alternativos, como o modo noturno. Esse menu também contém comandos para criar uma nova variante de layout.
  3. Device type and size: 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.

    Dica: para redimensionar o tamanho do dispositivo, arraste o canto inferior direito do layout.

  4. API version: selecione a versão do Android onde quer visualizar o layout.
  5. App theme: selecione o tema de IU a ser aplicado na visualização. 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 (consulte Localizar a IU com o Translations Editor).

Observação: essas configurações não têm efeito no código ou manifesto do aplicativo (a menos que você opte por adicionar um novo arquivo de layout em Layout Variants) e afetam apenas a visualização do layout.

Criar um novo layout

Para adicionar um novo layout ao aplicativo, comece criando um arquivo de layout no diretório layout/ padrão do projeto, para que ele seja aplicado a todas as configurações de dispositivos. Assim que tiver um layout padrão, você poderá criar variações de layout para configurações de dispositivos específicas (como para telas xlarge).

Há diferentes formas de criar um novo layout conforme a visualização da janela Project, mas o procedimento a seguir pode ser acessado em qualquer visualização:

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

Veja a seguir algumas outras formas de iniciar um arquivo de layout (embora as caixas de diálogo exibidas sejam diferentes):

  • Se você selecionou a visualização Project na janela Project: abra o diretório res do módulo de aplicativo, clique com o botão direito no local onde quer adicionar o layout e clique em New > Layout resource file.
  • Se você selecionou a visualização Android na janela Project: clique com o botão direito na pasta layout e selecione New > Layout resource file.

Criar uma variante de layout

Se você já tem um layout e quer criar uma versão alternativa para otimizar o layout para tamanhos ou orientações de tela diferentes, siga estas etapas:

  1. Abra o arquivo de layout original e verifique se você vê o Design Editor (clique na guia Design na parte inferior da janela).
  2. Clique em Orientation for Preview na barra de ferramentas. Na lista suspensa, clique em uma variante sugerida, como Create Landscape Variant, para finalizar ou clique em Create Other e continue com a próxima etapa.
  3. Na caixa de diálogo exibida, basta definir os qualificadores de recurso para o nome do diretório. Você pode digitar no Directory name ou escolher na lista Available qualifiers, um de cada vez, e clicar em Add .
  4. Depois de adicionar todos os qualificadores, clique em OK.

Quando você tem diversas variações do mesmo layout, é possível alternar facilmente entre elas na lista exibida clicando em Layout Variants .

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 para outro tipo de visualização, bem como converter um layout (grupo de visualização) para outro tipo de layout.

  1. Clique na guia Design na parte inferior da janela do editor.
  2. Na 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

O ConstraintLayout é um grupo de visualização disponível na biblioteca Constraint Layout, incluída no Android Studio 2.2 ou posterior. Ele foi criado do zero em conjunto com o Layout Editor. Portanto, tudo fica acessível do Design Editor e você nunca precisará editar o XML manualmente. O melhor de tudo é que o sistema de layout baseado em restrições permite criar a maioria dos layouts sem aninhar nenhum grupo de visualização.

Para melhorar o desempenho do layout, você precisa converter layouts antigos para o ConstraintLayout.

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

  1. Abra o layout existente no Android Studio e clique na guia Design na parte inferior da janela do editor.
  2. Na janela Component Tree, clique com o botão direito no layout e clique em Convert layout to ConstraintLayout.

O comando para converter especificamente um layout para o ConstraintLayout é mais inteligente ao inferir restrições e preservar o layout que o comando simples Convert view descrito na seção anterior.

Para saber mais sobre como criar um layout com ConstraintLayout, consulte Criar uma IU responsiva com o ConstraintLayout.

Encontrar itens na "Palette"

Para procurar uma visualização ou um grupo de visualizações pelo nome na Palette, clique no botão Search na parte superior da paleta ou simplesmente comece a digitar o nome do item quando a janela Palette estiver ativa.

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 um grupo de visualização na Palette e 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 um grupo de visualização, selecione o elemento de IU na Palette e pressione Shift+F1.

Para abrir a documentação sobre diretrizes do Material Design para uma visualização ou um grupo de visualização, 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, esse comando abrirá a página inicial da documentação sobre 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ê está usando o ConstraintLayout, pode criar restrições automaticamente usando os recursos "Infer Constraints" e "Autoconnect".

Editar atributos da visualização

Figura 3. A janela Attributes.

Em vez de editar as propriedades da visualização no XML, é possível fazer isso na janela Attributes (no lado direito do Layout Editor). Essa janela somente está disponível quando o Design Editor está aberto. Portanto, verifique se selecionou a guia Design na parte inferior da janela.

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

  1. A seção Declared Attributes, que lista os atributos especificados no arquivo de layout. Para adicionar um atributo, clique em Add no canto superior direito da seção.
  2. Inspetor de visualização, com controles de estilo de largura/altura. Para visualizações em um ConstraintLayout, esta seção também mostra a tendência de restrição e lista as restrições que a visualização usa. Para mais informações, consulte Criar uma IU responsiva com o ConstraintLayout.
  3. Uma lista de 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. O botão "Search". Clique nele para procurar um atributo de visualização específico.
  5. O indicador à direita de cada valor de atributo é sólido quando o valor é uma referência de recurso e vazio , quando não é. Isso permite que você reconheça valores codificados rapidamente. Clicar nesse indicador 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. Atributos com erros ou avisos são destacados, com realces em vermelho para erros e em laranja para avisos. Um exemplo de erro é uma entrada inválida em um atributo de definição de layout (como na figura). Um exemplo de aviso é o uso de um valor codificado quando uma referência de recurso é esperada (como na figura).

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 durante a criação do design do seu aplicativo. No Android Studio 3.2 e posteriores, você pode adicionar dados de visualização de amostra a TextView, ImageView ou 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.

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. Só será possível escolher o texto de amostra na janela Design-time View Attributes se o atributo text estiver vazio.

Figura 5. TextView com dados de amostra.

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

Figura 6. 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 seu 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.

Figura 7. RecyclerView com dados de amostra.

Mostrar avisos e erros do layout

Todos os problemas detectados no layout são indicados na Component Tree com um ícone de ponto de exclamação ( ou ) ao lado da visualização correspondente. Para visualizar os detalhes do erro, clique no ícone.

Para ver todos os problemas conhecidos em uma janela abaixo do editor, clique em Show Warnings and Errors ( ou ) na barra de ferramentas.

Nessa janela, você também pode ativar Show issues on the preview, que adiciona um ícone de aviso ou erro a cada visualização correspondente (somente na visualização "Design" e não na visualização "Blueprint").

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

Ao usar o Android 8.0 (API de nível 26) ou a Biblioteca de Suporte 26.0.0 ou posterior, você pode selecionar entre centenas de fontes seguindo estas etapas:

  1. No Layout Editor, clique na guia Design para visualizar o layout no Design Editor.
  2. Clique em uma visualização de texto.
  3. Na janela Attributes, expanda textAppearance e clique para expandir a caixa de diálogo 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. Ao selecionar uma fonte listada em Downloadable, você poderá clicar em Create downloadable font para carregar a fonte no momento da execução (como uma fonte disponível para download) ou clicar em Add font to project para empacotar a fonte TTF no APK. As fontes listadas em Android são fornecidas no sistema Android. Portanto, não é necessário fazer o download delas nem empacotá-las no APK.
  6. Clique em OK.