Construção de uma interface do usuário simples

Nesta lição, você criará um layout em XML que inclui um campo de texto e um botão. Na próxima lição, quando o botão for pressionado, o aplicativo responderá enviando o conteúdo do campo de texto para outra atividade.

A interface gráfica do usuário para um aplicativo Android é criada usando uma hierarquia de objetos View e ViewGroup. Os objetos View normalmente são widgets da IU, como botões ou campos de texto. Os objetos ViewGroup são são contêineres de visualização invisíveis que definem como as visualizações filhas são arranjadas, por exemplo, em uma grade ou em uma lista vertical.

O Android fornece um vocabulário XML que corresponde às subclasses de View e ViewGroup para você poder definir a IU em XML usando uma hierarquia de elementos da IU.

Layouts são subclasses do ViewGroup. Neste exercício, você trabalhará com um LinearLayout.

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

Criar um layout linear

1. Na janela de Projeto do Android Studio, abra app > res > layout > activity_main.xml.

   Este arquivo XML define o layout da sua atividade. Ele contém a visualização de texto "Hello World" padrão.

2. Quando você abre um arquivo de layout, o editor de design é mostrado pela primeira vez no Editor de Layout. Para esta lição, você trabalha diretamente com o XML, portanto clique na guia Texto na parte inferior para alternar para o editor de texto.
3. Exclua tudo e insira o seguinte XML:

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="horizontal">
   </LinearLayout>
   

LinearLayout é um grupo de visualização (uma subclasse de ViewGroup) que arranja visualizações filhas em orientação vertical ou horizontal, como especificado pelo atributo android:orientation. Cada filha de um LinearLayout aparece na tela na ordem em que está disposta no XML.

Dois outros atributos, android:layout_width e android:layout_height, são necessários para todas as visualizações para especificar o tamanho delas.

Pelo fato de LinearLayout ser a visualização raiz no layout, ele deve preencher totalmente a área da tela disponível para o aplicativo configurando a largura e a altura como "match_parent". Esse valor declara que a visualização deve expandir a largura ou a altura para corresponder à largura ou à altura da visualização pai.

Para obter mais informações sobre propriedades de layout, consulte o guia Layout.

Adicionar um campo de texto

No arquivo activity_main.xml, dentro do elemento <LinearLayout>, adicione o seguinte elemento <EditText>:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
</LinearLayout>

Não se preocupe com o erro que aparece para @string/edit_message — você vai corrigi-lo em breve.

Eis uma descrição dos atributos que você adicionou no <EditText>:

android:id

Isso fornece um identificador exclusivo para a visualização que você pode usar para referenciar o objeto no código do aplicativo, como ler e manipular o objeto (mais detalhes na próxima lição).

O arroba (@) é necessário quando você está referindo-se a qualquer objeto de recurso do XML. Em seguida, há o tipo de recurso (id, nesse caso), uma barra e o nome do recurso (edit_message).

Objetos de recurso

Um objeto de recurso é um nome de número inteiro exclusivo associado a um recurso do aplicativo, como um bitmap, arquivo de layout ou string.

Cada recurso tem um objeto de recurso correspondente definido no arquivo R.java do projeto. Você pode usar os nomes de objeto na classe R para se referir aos recursos, como quando precisa especificar um valor de string para o atributo android:hint. Você também pode criar IDs de recurso arbitrários associados a uma visualização usando o atributo android:id, o que permite referenciar essa visualização em outro código.

As ferramentas SDK geram o arquivo R.java sempre que o aplicativo é compilado. Você nunca deve modificar esse arquivo manualmente.

Para obter mais informações, leia o guia Como fornecer recursos.

O sinal de mais (+) antes do tipo de recurso é necessário somente quando um ID de recurso é definido pela primeira vez. Ao compilar o aplicativo, as ferramentas SDK usam o nome do ID para criar um novo ID de recurso no arquivo R.java do projeto que refere-se ao elemento EditText. Com o ID de recurso declarado uma vez dessa maneira, as outras referências ao ID não precisarão do sinal de mais. Usar o sinal de mais é necessário somente ao especificar um novo ID de recurso e desnecessário para recursos concretos, como strings ou layouts. Consulte a caixa lateral para obter mais informações sobre objetos de recurso.

android:layout_width e android:layout_height

Em vez de usar tamanhos específicos para largura e altura, o valor "wrap_content" define que a visualização deve ser do maior tamanho possível para abranger o conteúdo da visualização. Se você tivesse que passar a usar "match_parent", o elemento EditText preencheria a tela, porque ele seria compatível com o tamanho do LinearLayout pai. Para obter mais informações, consulte o guia Layouts.

android:hint

Essa é uma string padrão a exibir quando o campo de texto está vazio. Em vez de usar uma string codificada como valor, o valor "@string/edit_message" se refere a um recurso de string definido em um arquivo separado. Como ele se refere a um recurso concreto (não somente a um identificador), o sinal de mais é desnecessário. No entanto, pelo fato de você não ter definido o recurso de string ainda, verá no início um erro do compilador. Você consertará isso na próxima seção ao definir a string.

Observação: Esse recurso de string tem o mesmo nome que o ID do elemento: edit_message. Contudo, referências a recursos sempre têm escopo definido pelo tipo de recurso (como id ou string), para que o uso de nomes iguais não cause conflitos.

Adicionar recursos de string

Por padrão, o projeto Android inclui um arquivo de recurso de string em res > values > strings.xml. Aqui, você adiciona dois novos strings.

1. Na janela Projeto, abra res > values > strings.xml.
2. Adicione dois strings de modo que seu arquivo fique assim:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <string name="app_name">My First App</string>
       <string name="edit_message">Enter a message</string>
       <string name="button_send">Send</string>
   </resources>
   

Para inserir texto na interface do usuário, sempre especifique cada string como um recurso. Recursos de string permitem o gerenciamento de todos os textos da IU em um único local, o que torna mais fácil encontrar e atualizar o texto. Exteriorizar as strings também permite que você localize o aplicativo para diferentes idiomas ao fornecer definições alternativas para cada recurso de string.

Para obter mais informações sobre o uso de recursos de string para localizar o aplicativo para outros idiomas, consulte a classe Compatibilidade com diferentes dispositivos .

Adicionar um botão

Volte para o arquivo activity_main.xml e adicione um botão após o <EditText>. Seu arquivo deve ficar assim:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <EditText android:id="@+id/edit_message"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:hint="@string/edit_message" />
        <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/button_send" />
</LinearLayout>

Observação: Esse botão não precisa do atributo android:id porque ele não será referenciado no código da atividade.

O layout atualmente é projetado para que ambos os widgets EditText e Button tenham o tamanho ideal para conter o conteúdo, conforme ilustrado na figura 2.

Figura 2. Os widgets EditText e Button têm as larguras definidas como "wrap_content".

Isso funciona bem para o botão, mas não tão bem para o campo de texto porque o usuário pode digitar algo maior. Isso seria bom para preencher a largura não utilizada da tela com o campo de texto. Você pode fazer isso dentro de um LinearLayout com a propriedade weight (peso), que você pode especificar pelo atributo android:layout_weight.

O valor de weight é um número que especifica a quantidade de espaço remanescente que cada visualização deve consumir em relação à quantidade consumida pelas visualizações irmãs. Isso funciona de forma parecida à quantidade de ingredientes em uma receita de bebida: “2 partes de refrigerante para 1 parte de calda” significa que 2/3 da bebida são refrigerante. Por exemplo, se você der a uma visualização um peso de 2 e a outra um peso de 1, o somatório é 3, portanto, a primeira visualização preenche 2/3 do espaço disponível e a segunda visualização preenche o resto. Se você adicionar uma terceira visualização e der a ela um peso de 1, a primeira visualização (com peso de 2) agora recebe 1/2 do espaço disponível, enquanto que as outras duas recebem 1/4 cada.

O peso padrão para todas as visualizações é 0, portanto, se você especificar qualquer valor de peso maior que 0 para apenas uma visualização, ela preencherá todo o espaço disponível depois que todas as visualizações receberem o espaço de que precisam.

Ajustar a caixa de entrada à largura da tela

Em activity_main.xml, modifique o <EditText> de modo que os atributos fiquem assim:

<EditText android:id="@+id/edit_message"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

Configurar a largura como zero (0dp) melhora o desempenho do layout, porque usar "wrap_content" como a largura exige que o sistema calcule uma largura que, no fim das contas, é irrelevante pelo fato de o valor de weight exigir outro cálculo de largura para preencher o espaço restante.

Figura 3. O widget EditText recebe todo o peso do layout para que ele preencha o espaço restante no LinearLayout.

Esta deverá ser a aparência do arquivo de layout activity_main.xml completo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

Execute o aplicativo

Para ver qual é a aparência atual do aplicativo em seu dispositivo ou emulador, clique em Run na barra de ferramentas.

Para adicionar comportamentos de aplicativos, como responder a um botão e começar outra atividade, continue para a próxima lição.