Crie uma interface do usuário simples

Nesta lição, você usará o Android Studio Layout Editor para criar um layout que inclua uma caixa de texto e um botão. Na próxima lição, você fará o aplicativo responder ao toque do botão enviando o conteúdo da caixa de texto para outra activity.

Figura 1. Captura de tela do layout final

A interface do usuário de um aplicativo Android é criada usando uma hierarquia de layouts (objetos ViewGroup) e widgets (objetos View). Layouts são recipientes invisíveis que controlam como as visualizações secundárias são posicionadas na tela. Widgets são componentes da IU, como botões e caixas de texto.

Figura 2. Ilustração sobre como objetos ViewGroup formam ramificações no layout e contêm objetos View

O Android fornece um vocabulário XML para as classes ViewGroup e View, portanto, a maior parte da IU é definida em arquivos XML. No entanto, em vez de ensinar você a escrever código XML, esta lição mostra como criar um layout usando o Android Studio Layout Editor, o que facilita a criação de um layout arrastando e soltando visualizações.

Abrir o Layout Editor

Observação: Esta lição pressupõe que você esteja usando o Android Studio 3.0 e que tenha seguido a lição anterior para criar seu projeto Android.

Para começar, configure o espaço de trabalho da seguinte maneira:

  1. Na janela de Project do Android Studio, abra app > res > layout > activity_main.xml.
  2. Para liberar mais espaço para o Layout Editor, oculte a janela Project selecionando View > Tool Windows > Project (ou clique em Project na lateral esquerda do Android Studio).
  3. Se o editor mostrar a fonte XML, clique na guia Design na parte inferior da janela.
  4. Clique em Select Design Surface e selecione Blueprint.
  5. Clique em Show na barra de ferramentas e certifique-se de que a opção Show Constraints esteja marcada.
  6. Confira se o Autoconnect está desativado. A dica da barra de ferramentas deve mostrar Turn On Autoconnect (porque agora a opção está desativada).
  7. Clique em Default Margins na barra de ferramentas e selecione 16 (será possível ajustar a margem de cada visualização posteriormente).
  8. Clique em Device in Editor na barra de ferramentas e selecione Pixel XL.

Agora, o editor deve ter a aparência mostrada na figura 3.

Figura 3. O Layout Editor mostrando o arquivo activity_main.xml

A janela Component Tree no canto inferior esquerdo mostra a hierarquia de visualizações do layout. Nesse caso, a visualização raiz é um ConstraintLayout que contém apenas um objeto TextView.

ConstraintLayout é um layout que define a posição de cada visualização com base em limitações de visualizações irmãs e do layout pai. Dessa maneira, você poderá criar layouts simples e complexos com uma hierarquia de visualização plana. Ou seja, você evita a necessidade de layouts aninhados (um layout dentro de um layout, como é mostrado na figura 2), o que pode aumentar o tempo necessário para desenhar a IU.

Figura 4. Ilustração de duas visualizações posicionadas dentro do ConstraintLayout

Por exemplo, você pode declarar o seguinte layout (na figura 4):

  • A visualização A aparece a 16 dp do topo do layout pai.
  • A visualização A aparece a 16 dp da esquerda do layout pai.
  • A visualização B aparece a 16 dp da direita da visualização A.
  • A visualização B está alinhada com o topo da visualização A.

Nas seções a seguir, você criará um layout semelhante a este.

Adicionar uma caixa de texto

Figura 5. A caixa de texto é limitada ao topo e à esquerda do layout principal

  1. Primeiro, você precisa remover o que já está no layout. Então, clique em TextView na janela Component Tree e pressione Delete.
  2. Na janela Palette à esquerda, clique em Text no painel esquerdo, arraste Plain Text para o editor de design e solte próximo ao topo do layout. Esse é um widget EditText que aceita entrada em texto simples.
  3. Clique na visualização no editor de design. Você agora pode ver as alças de redimensionamento em todos os cantos (quadrados) e as âncoras de limitação em todos os lados (círculos).

    Para ter um controle melhor, recomenda-se aproximar o zoom no editor usando os botões da barra de ferramentas.

  4. Clique e segure a âncora na lateral superior, arraste-a para cima até que ela se encaixe no topo do layout e solte. Essa é uma limitação — ela especifica que a visualização deve estar a 16 dp do topo do layout (porque você definiu as margens padrão como 16 dp).
  5. Da mesma forma, crie uma limitação do lado esquerdo da visualização para o lado esquerdo do layout.

O resultado deve ser igual ao mostrado na captura de tela da figura 5.

Adicionar um botão

Figura 6. O botão é limitado a direita da caixa de texto e a sua linha de base

  1. Na janela Palette, clique em Widgets no painel esquerdo, arraste Button para o editor de design e solte próximo ao lado direito.
  2. Crie uma limitação do lado esquerdo do botão para o lado direito da caixa de texto.
  3. Para limitar as visualizações em um alinhamento horizontal, você precisa criar uma limitação entre as linhas de base de texto. Então, clique no botão e em Edit Baseline , que aparece no editor de design diretamente abaixo da visualização selecionada. A âncora base aparece dentro do botão. Clique e segure essa âncora e arraste-a até a âncora da linha de base exibida na caixa de texto.

O resultado deve ser igual ao mostrado na captura de tela da figura 6.

Observação: Também é possível criar um alinhamento horizontal usando as bordas superior ou inferior, mas o botão inclui preenchimento em volta de sua imagem, portanto, o alinhamento visual ficará incorreto se você alinhar essas visualizações dessa maneira.

Alterar as strings da IU

Para visualizar a IU, clique em Select Design Surface na barra de ferramentas e selecione Design. Observe que a entrada de texto é pré-preenchida com "Name" e o botão tem o rótulo "Button”. Agora, você alterará essas strings.

  1. Abra a janela Project e o arquivo app > res > values > strings.xml.

    Esse é um arquivo de recursos de string onde você deve especificar todas as strings da IU. Isso permite que você gerencie todas as strings da IU em um só local, o que as torna mais fáceis de encontrar, atualizar e localizar (em comparação com a codificação de strings no layout ou no código do aplicativo).

  2. Clique em Open editor no topo da janela do editor. Isso abre o Translations Editor, que oferece uma interface simples para adicionar e editar as strings padrão, além de ajudar a manter todas as strings traduzidas organizadas.
  3. Figura 7. A caixa de diálogo para adicionar uma nova string

    Clique em Add Key para criar uma nova string como o “texto de dica” para a caixa de texto.
    1. Digite "edit_message" como o nome da chave.
    2. Digite "Enter a message" como o valor.
    3. Clique em OK.
  4. Adicione outra chave chamada "button_send" com o valor "Send”.

Agora você pode definir essas strings para cada visualização. Retorne para o arquivo de layout clicando em activity_main.xml na barra de guias e adicione as strings da seguinte maneira:

  1. Clique na caixa de texto no layout e, se a janela Attributes ainda não estiver visível à direita, clique em Attributes na barra lateral direita.
  2. Localize a propriedade text (atualmente definida como "Name") e exclua o valor.
  3. Localize a propriedade hint e clique em Pick a Resource à direita da caixa de texto. Na caixa de diálogo exibida, clique duas vezes em edit_message na lista.
  4. Agora, clique no botão no layout, localize a propriedade text e clique em Pick a Resource. Em seguida, selecione button_send.

Tornar o tamanho da caixa de texto flexível

Para criar um layout que seja responsivo para diferentes tamanhos de tela, você deve preencher todo o espaço horizontal restante (após considerar o botão e as margens).

Antes de continuar, clique em Show na barra de ferramentas e selecione Blueprint.

Figura 8. O resultado de clicar em Center Horizontally

Figura 9. Clique para alterar a largura para Match Constraints

Figura 10. A caixa de texto agora está esticada para preencher o espaço restante

  1. Selecione ambas as visualizações (clique em uma e mantenha o Shift pressionado antes de clicar na outra). Em seguida, clique com o botão direito do mouse em qualquer uma delas e selecione Chain > Create Horizontal Chain.

    Uma cadeia é uma limitação bidirecional entre duas ou mais visualizações que permite que você disponha as visualizações encadeadas de uma só vez.

  2. Selecione o botão e abra a janela Attributes. Usando o inspetor de visualização no topo da janela Attributes, defina a margem direita como 16.
  3. Agora, clique na caixa de texto para visualizar seus atributos. Clique no indicador de largura duas vezes para que ele seja definido como Match Constraints, conforme é indicado pela chamada 1 na figura 9.

    "Match constraints" significa que a largura se expande para atender à definição das limitações horizontais e das margens. Portanto, a caixa de texto se estica para preencher o espaço horizontal (após considerar o botão e todas as margens).

Agora o layout está pronto e deve ser igual ao mostrado na figura 10.

Se seu layout não apresentar o resultado esperado, clique abaixo para ver como o XML deve ficar e compare-o com o apresentado na guia Text. (Não tem problema se seus atributos estiverem em uma ordem diferente.)

Para saber mais sobre cadeias e tudo o que você pode fazer com o ConstraintLayout, leia Crie uma IU responsiva com o ConstraintLayout.

Executar o aplicativo

Se o aplicativo já tiver sido instalado no dispositivo na lição anterior, basta clicar em Apply Changes na barra de ferramentas para atualizar o aplicativo com o novo layout. Ou clique em Run para instalar e executar o aplicativo.

O botão ainda não faz nada. Para iniciar outra activity ao tocar no botão, continue para a próxima lição.