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 editor de design pode visualizar o layout em vários dispositivos e versões diferentes 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 posterior.

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 Crie uma IU responsiva com o ConstraintLayout.

Introdução ao Layout Editor

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

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

  1. Palette: Lista de visualizações e grupos de visualização que você pode arrastar para o layout.
  2. Component Tree: Visualizar a hierarquia do 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: Controla os atributos das visualizações selecionadas.

Imagem 1. O Layout Editor

Quando você abre um arquivo de layout XML, o editor de design é exibido por padrão (como mostrado na imagem 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 visualizar a Palette, a Component Tree e o editor de design 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 editor de design 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.

Imagem 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 imagem 2:

  1. Design and blueprint: selecione como quer ver o layout no editor; selecione a visualização Design (uma visualização real do layout), a visualização Blueprint (somente os contornos de cada visualização) ou Design + Blueprint para ver as duas visualizações 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 (telefone/tablet, Android TV ou Wear OS) e a configuração de tela (tamanho e densidade). Você pode escolher entre diversos tipos de dispositivo 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. Se você quiser 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á variações de layout para configurações de dispositivo 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) no 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 um nome para o arquivo, a tag do layout raiz e o conjunto de origem ao qual o layout pertence. Em seguida, clique em Finish
  4. .

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 editor de design (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 o 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 diferentes tamanhos de tela.

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 de Layouts Restritos, 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 editor de design você nunca precisará editar manualmente o XML. O melhor de tudo é que seu sistema de layout baseado em restrições permite criar a maioria dos layouts sem aninhar nenhum grupo de visualização.

Para obter o melhor desempenho dos layouts, você deve 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 é infere restrições e preserva o layout de forma mais inteligente que o comando simples Convert view descrito na seção anterior.

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

Encontrar itens na Palette

Para procurar uma visualização ou um grupo de visualização 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.

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 editor de design. Quando você posiciona uma visualização no layout, o editor exibe informações sobre o relacionamento da visualização com o resto 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

Imagem 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 editor de design está aberto. Portanto, verifique se selecionou a guia Design na parte inferior da janela.

Quando você seleciona uma visualização — clicando nela na Component Tree ou no editor de design— a janela Attributes exibe as seguintes informações, como indicado na imagem 3:

  1. Inspetor de visualização, com controles de estilo de largura/altura, margens e tendência (disponível apenas para visualizações em um ConstraintLayout). Para obter mais informações, consulte Crie uma IU responsiva com o ConstraintLayout.
  2. Uma lista de atributos comuns para a visualização selecionada. Para ver todos os atributos disponíveis, clique em View all attributes na parte superior da janela.
  3. Atributos favoritos selecionados. Para adicionar atributos, clique em View all attributes e na estrela exibida quando você passa o cursor do mouse sobre o canto esquerdo de um nome de atributo.

Para procurar um atributo de visualização específico, clique em View all attributes e em Search na parte superior da janela.

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 versão posterior, é possível adicionar dados de visualização de amostras a TextView, a ImageView ou a RecyclerView a partir do Layout Editor.

Ao passar o cursor sobre uma visualização, o botão dos atributos de design e tempo aparecerão abaixo da visualização na janela Design. Clique nesse botão para exibir a janela Design-time View Attributes, conforme exibido na imagem 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. Um TextView com dados de amostra

Em um ImageView, há opções diferentes de imagens de amostra. Ao escolher uma imagem de amostra, o Android Studio preenche o atributo tools:src de ImageView (ou de tools:srcCompat, se estiver usando a Support Library).

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 a 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á-los ao texto

Ao usar o Android 8.0 (API de nível 26) ou o Android Support Library 26.0.0 ou superior, você pode selecionar entre centenas de fontes seguindo estas etapas:

  1. No Layout Editor, clique na guia Design para visualizar o layout no editor de design.
  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 tempo de 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 dessas fontes nem empacotá-las no APK.
  6. Clique em OK.