O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Criar uma interface do usuário simples

Nesta lição, você aprenderá a usar o Layout Editor do Android Studio para criar um layout que inclua uma caixa de texto e um botão. Na próxima lição, você aprenderá a fazer o app enviar o conteúdo da caixa de texto para outra atividade ao toque do botão.

Figura 1. Captura de tela do layout final

A interface do usuário (IU) de um app para Android é criada usando uma hierarquia de layouts e widgets. Os layouts são objetos ViewGroup, contêineres que controlam como as visualizações filhas são posicionadas na tela. Widgets são objetos View, componentes de 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 a escrever XML, esta lição mostra como criar um layout usando o Layout Editor do Android Studio. O Layout Editor gera o XML enquanto você arrasta e solta visualizações para criar seu layout.

Esta lição pressupõe que você usa o Android Studio v3.0 ou mais recente e que concluiu a lição criar seu projeto Android.

Abrir o Layout Editor

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

  1. Na janela Project, abra app > res > layout > activity_main.xml.
  2. Para liberar espaço para o Layout Editor, oculte a janela Project. Para fazer isso, selecione View > Tool Windows > Project ou clique em Project no lado esquerdo da tela 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 do Layout Editor e verifique se a opção Show All Constraints está marcada.
  6. Certifique-se de que "Autoconnect" esteja desativada. Uma dica na barra de ferramentas exibe Enable Autoconnection to Parent quando essa opção está desativada.
  7. Clique em Default Margins na barra de ferramentas e selecione 16. Se necessário, é possível ajustar as margens de cada visualização posteriormente.
  8. Clique em Device for Preview na barra de ferramentas e selecione 5.5, 1440 x 2560, 560 dpi (Pixel XL).

O Layout Editor agora tem a aparência mostrada na Figura 3.

Figura 3. O Layout Editor mostrando activity_main.xml

Para mais informações, consulte a Introdução ao Layout Editor.

O painel 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ê pode criar layouts simples e complexos com uma hierarquia de visualização plana. Esse tipo de layout evita a necessidade de layouts aninhados. Um layout aninhado, que é um layout dentro de outro, conforme mostrado na Figura 2, 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, que é mostrado 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 ao da Figura 4.

Adicionar uma caixa de texto

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

Siga estas etapas para adicionar uma caixa de texto:

  1. Primeiro, você precisa remover o que já está no layout. Clique em TextView no painel Component Tree e pressione a tecla Delete.
  2. No painel Palette, clique em Text para exibir os controles de texto disponíveis.
  3. Arraste Plain Text para o editor de design e solte-o na parte superior do layout. Esse é um widget EditText que aceita entrada de texto simples.
  4. Clique na visualização no editor de design. Agora você pode ver as alças quadradas para redimensionar a visualização em cada canto e as âncoras circulares de limitação em cada lado. Para ter um controle melhor, recomenda-se aumentar o zoom no editor. Para isso, use os botões Zoom na barra de ferramentas do Layout Editor.
  5. Clique e segure a âncora na lateral superior, arraste-a para cima até que ela se encaixe na parte superior do layout e solte-a. Essa é uma limitação: ela limita a visualização dentro da margem padrão que foi definida. Nesse caso, você a define a 16 dp a partir do topo do layout.
  6. Use o mesmo processo para criar uma limitação do lado esquerdo da visualização para o lado esquerdo do layout.

O resultado será semelhante ao mostrado na Figura 5.

Adicionar um botão

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

  1. No painel Palette, clique em Buttons.
  2. Arraste o widget Button para o editor de design e solte-o perto do lado direito.
  3. Crie uma limitação do lado esquerdo do botão para o lado direito da caixa de texto.
  4. Para limitar as visualizações em um alinhamento horizontal, crie uma limitação entre as linhas de base do texto. Para fazer isso, clique com o botão direito do mouse no botão e selecione Show Baseline  Mostrar ação de linha de base no Layout Editor. A âncora da linha de base aparece dentro do botão. Clique e mantenha essa âncora pressionada e arraste-a para a âncora da linha de base que aparece na caixa de texto adjacente.

O resultado será semelhante ao mostrado na Figura 6.

Observação: você também pode usar as bordas superior ou inferior para criar um alinhamento horizontal. No entanto, a imagem do botão inclui preenchimento ao redor dele, de modo que o alinhamento visual estará errado se for criado dessa forma.

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 e o rótulo do botão estão definidos como valores padrão.

Siga estas etapas para alterar as strings da IU:

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

    Esse é um arquivo de recursos de string, em que você pode especificar todas as strings de IU. Ele permite que você gerencie todas as strings da IU em um único local, o que as torna mais fáceis de encontrar, atualizar e localizar.

  2. Clique em Open editor na parte superior da janela. Isso abre o Translations Editor, que fornece uma interface simples para adicionar e editar suas strings padrão. Ele também ajuda a manter todas as strings traduzidas organizadas.
  3. Clique em Add Key para criar uma nova string como o "texto de dica" da caixa de texto. Neste ponto, a janela mostrada na Figura 7 é aberta.

    Figura 7. A caixa de diálogo para adicionar uma nova string

    Na caixa de diálogo Add Key, conclua as seguintes etapas:

    1. Digite "edit_message" no campo Key.
    2. Digite "Enter a message" no campo Default Value.
    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. Para retornar ao arquivo de layout, clique em activity_main.xml na barra de guias. Em seguida, adicione as strings da seguinte forma:

  1. Clique na caixa de texto no layout. 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. Clique no botão no layout e localize a propriedade text, que está definida como "Button". Em seguida, clique em Pick a Resource e selecione button_send.

Tornar o tamanho da caixa de texto flexível

Para criar um layout responsivo a diferentes tamanhos de tela, é necessário esticar a caixa de texto para preencher todo o espaço horizontal que permanece depois que o botão e as margens são considerados.

Antes de continuar, clique em Select Design Surface na barra de ferramentas e selecione Blueprint.

Para tornar a caixa de texto flexível, siga estas etapas:

Figura 8. O resultado da escolha de Create Horizontal Chain

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 as duas visualizações. Para fazer isso, clique em uma, mantenha pressionada a tecla Shift, clique na outra, clique com o botão direito do mouse em uma delas e selecione Chains > Create Horizontal Chain. O layout aparece como mostrado na Figura 8.

    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. Em seguida, use o inspetor de visualização na parte superior da janela Attributes para definir a margem direita como 16 dp.
  3. Clique na caixa de texto para visualizar os atributos. Em seguida, clique no indicador de largura duas vezes para que ele seja definido como Match Constraints, conforme indicado pela frase de destaque 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 que permanece depois que o botão e todas as margens são considerados.

Agora o layout está pronto, como mostrado na Figura 10.

Caso o layout não apresente o resultado esperado, clique em Verificar o XML do layout final abaixo para ver como seu XML precisa ficar. 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 Criar uma IU responsiva com o ConstraintLayout.

Executar o app

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

O botão ainda não gera ações. Para criar outra atividade iniciada quando o botão for tocado, prossiga para a próxima lição.