Skip to content

Most visited

Recently visited

navigation

Criar uma IU com o editor de layout

No editor de layout do Android Studio, você pode criar rapidamente layouts de compilação arrastando widgets para um editor de design visual em vez de escrever manualmente o XML. O editor 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 editor de layout é particularmente útil para criar um novo layout com 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 e dos recursos do editor de layout. Para saber mais sobre como criar um layout com ConstraintLayout, consulte Crie uma IU responsiva com o ConstraintLayout.

Introdução ao editor

O editor de layout é exibido quando você abre um arquivo de layout XML. As regiões do editor são as seguintes, identificadas pelos números da figura 1:

  1. Palette: Fornece uma lista de widgets e layouts que podem ser arrastados para o layout no editor.
  2. Component Tree: Mostra a hierarquia de visualização para o layout. Clique em um item aqui para que ele seja selecionado no editor.
  3. Toolbar: Oferece botões para configurar a aparência do layout no editor e para editar as propriedades do layout.
  4. Design Editor: Exibe o layout em uma combinação de visualizações Design e Blueprint.
  5. Properties: Oferece controles de propriedades para a visualização selecionada no momento.

Figura 1. O editor de layout mostrando o editor Design

Quando você abre um arquivo de layout XML, o editor Design é exibido por padrão (como mostrado na figura 1). Se você preferir editar o XML no editor Text, clique na guia Text na parte inferior da janela. No editor Text, você também pode ver a Palette, a Component Tree e o editor Design (como mostrado na figura 2) clicando em Preview no lado direito da janela. No entanto, a janela Properties não está disponível no editor Text.

Dica: para alternar entre os editores Design e Text, pressione Control+Shift+seta direita/esquerda.

Figura 2. O editor Text com a janela Preview aberta

Alterar a aparência da visualização

Os botões na linha superior do editor Design permitem configurar a aparência do layout no editor. Essa barra de ferramentas também está disponível na janela Preview do editor Text.

Figura 3. Botões da barra de ferramentas do editor de layout que configuram a aparência do layout

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

  1. Design and blueprint: selecione como você quer visualizar o layout no editor. A visualização Design exibe uma visão colorida do layout e a visualização Blueprint mostra apenas os contornos de cada visão. Ou você pode ver Design e Blueprint lado a lado.

    Dica: você pode alternar entre essas visões pressionando B.

  2. Screen orientation: gire o dispositivo entre as orientações paisagem e retrato.
  3. Device type and size: selecione o tipo de dispositivo (telefone/tablet, Android TV ou Android Wear) 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. Observaçã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 dos 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).
  7. Layout Variants: alterne para um dos layouts alternativos para este arquivo ou crie um novo (consulte Criar uma variação de layout abaixo).

Observação: essas configurações não têm efeito no código ou manifesto do aplicativo (a menos que você prefira 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. Após dispor de um layout padrão, você pode criar variações do layout para configurações de dispositivos específicas (como para telas xlarge). Se quiser fazer isso, pule para Criar uma variação de layout.

Há diferentes formas de criar um novo layout conforme a visualização da janela Project, mas o procedimento a seguir é acessível de 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. Clique em Finish.

Figura 4. A caixa de diálogo para adicionar um novo arquivo XML de layout

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

Criar uma variação 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 está vendo o editor Design (clique na guia Design na parte inferior da janela).
  2. Clique em Layout Variants na barra de ferramentas. Na lista suspensa, clique em uma variação 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, pode alternar facilmente entre elas na lista exibida ao clicar em Layout Variants .

Para obter mais informações sobre como criar layouts para telas diferentes, consulte Compatibilidade com diferentes tamanhos de tela.

Converter um layout em ConstraintLayout

O ConstraintLayout é um grupo de visualização disponível na biblioteca Layout restrito, inclusa no Android Studio 2.2 ou versão posterior. Ele foi criado do zero em conjunto com editor de layout, portanto tudo fica acessível do editor Design e nunca será necessário editar o XML manualmente. 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 aumentar o desempenho do layout, você deve converter layouts antigos ao ConstraintLayout. O Android Studio tem um conversor incorporado para ajudá-lo a fazer isso:

  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.

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

Adicionar visualizações ao layout

A criação de um layout para um aplicativo exige o entendimento dos conceitos básicos de layout, mas o Android Studio remove muitas complexidades do trabalho direto com arquivos XML. O editor de layout ajuda a executar uma grande quantidade de trabalho arrastando widgets para o editor Design e refinando atributos de layout na janela Properties .

Para começar a criar o layout, basta arrastar visualizações do painel Palette para o editor Design. Quando você coloca uma visualização no layout, o editor indica o relacionamento da visualização com o resto do layout de forma adequada ao tipo desse layout.

O vídeo 1 mostra, por exemplo, como a ação de arrastar TextView para um ConstraintLayout cria as restrições below e aligned left em relação ao TextView superior (se Autoconnect estiver ativado).

Vídeo 1. O editor de layout pode adicionar restrições para a visualização quando ela é arrastada para o editor

Se as visualizações forem arrastadas para um layout que não o ConstraintLayout, a resposta do editor de layout será diferente, conforme as propriedades de layout disponíveis para esse layout.

Todos os erros detectados no layout são contados na barra de ferramentas. Para visualizá-los, clique em Show Warnings and Errors .

A aparência no editor Design é apenas para visualização. Embora a edição do layout no editor Design possa gerar aparências razoavelmente precisas, será preciso executar o aplicativo em um emulador ou dispositivo real para verificar os resultados.

Para obter mais informações sobre como as APIs View do Android funcionam para criar um layout, consulte Conceitos básicos de layout. Ou então, para obter um guia de utilização do ConstraintLayout, consulte Crie uma IU responsiva com o ConstraintLayout.

Editar as propriedades de visualização

Figura 5. A janela Properties

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

Selecione uma visualização no editor para ver e editar propriedades comuns para essa visualização. Se você precisar acessar mais propriedades para a visualização, clique em View all properties .

Quando a visualização selecionada for filha de ConstraintLayout, a janela Properties conterá um inspetor de visualização na parte superior, com diversos controles, como mostrado na figura 7. Para obter mais informações sobre os controles de propriedades para visualizações em um ConstraintLayout, consulte Crie uma IU responsiva com o ConstraintLayout.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)