Hello World no Android! – Parte 2

24/03/2014

ÍNDICE DE CONTEÚDO

Este post faz parte da série Hello world Android

No artigo anterior vimos como configurar o nosso ambiente de desenvolvimento para desenvolver aplicações Android e fizemos uma aplicação básica, baixamos para nosso dispositivo e simulamos no PC.

Agora vamos nos aprofundar mais um pouco no desenvolvimento de software. É fundamental saber que a interface gráfica do Android é descrita em arquivos XML: existem as Classes de Views (Botões, caixas de texto, teclado e etc.) e as Classes de View Groups que nada mais são que Layouts que organizam estas Views.

Quem já programou com alguma interface gráfica como o Qt ou o Swing já deve estar familiarizado com este conceito. Um View Group é um container de Views e a organizam na tela de alguma forma (Grid, Linear, Horizontal, Vertical).

Vamos começar mexendo no activity_main.xml do artigo passado, adicionaremos um campo de texto e um botão. Também vamos mudar o layout e, consequentemente, alterar a disposição destes componentes na tela. O arquivo activity_main.xml se encontra na pasta MyFirstApp/res/layout.

Os Melhores Treinamentos sobre Sistemas embarcados e IoT

Cursos com professores qualificados para acelerar sua carreira e projetos

MATRÍCULE-SE AGORA

Criando um Layout do tipo Linear

O template BlankActivity que escolhemos no artigo anterior possui um layout do tipo RelativeLayout e um TextView como view filho.

Vamos apagar o <TextView> e mudar o tipo de layout para LinearLayout, o layout linear pode mostrar seus views em colunas ou em linhas, neste artigo vamos fazer a orientação ser em linhas, para isto setamos como “horizontal” o atributo android:orientation”. O arquivo deve ficar como abaixo. Podemos acessar a API do LinearLayout com todos os seus atributos aqui.

Nosso arquivo deve ficar assim:

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

Os atributos height e width são a largura e altura da nossa view, no nosso caso ela vai ser full screen pois o nosso próprio LinearLayout é a nossa raiz e esta é tela cheia.

Adicionando um campo de texto

O elemento do Android para textos que podem ser editados pelo usuário é o <EditText>, vamos inserir um destes dentro do nosso layout:

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

Como todos os objetos do tipo View, é necessário definir atributos no XML para especificar as suas propriedades.

android:id é um identificador único para o nosso objeto, é usado para manipular o objeto no código fonte em Java. O ‘@’ é para referênciar objetos no XML, o ‘+’ é usado quando o objeto é criado pela primeira vez, o SDK utiliza este token para criar o recurso em gen/R.java. Seguido de id/”nome do objeto” que proponho chamar de edit_message;
o width e height servem para delimitar seu tamanho, o “wrap_content” faz com que o objeto seja do tamanho necessário para que caiba o seu texto e nada mais;
android:hint é o texto de “dica” normalmente fica escrito quando não tem nada escrito e é apagado assim que você seleciona o textbox para entrar com o seu texto.

Como podemos observar o android:hint está apontando para um recurso de String ainda não definido e isto está ocasionando um erro no Eclipse. Todo recurso de String no Android deve estar descrito no arquivo /res/values/strings.xml, é lá que a view procura pelas suas strings.

Adicionando recursos de String

Ao adicionar campos de texto na interface é recomendado especificar cada string como um recurso do seu programa. Recursos do tipo “string” permitem que você gerencie todo o texto do seu aplicativo a partir de um único local, o que facilita a localização e atualização dos textos do seu app.

Externar as strings também facilita a questão da tradução. Por padrão o nosso projeto possui um arquivo para os recursos de string localizado em /res/values/strings.xml, adicione uma nova string chamada de “edit_message” e inicie a mesma com o texto “Enter a message” (você pode apagar a string “hello world”).

Também adicione uma string com o nome “button_send” e com o texto “Send”. Adicionaremos este botão no próximo passo. O resultado do nosso string.xml deve ficar 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>
    <string name="action_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

Adicionando um botão

Vamos adicionar um botão a nossa tela, para isto, logo abaixo do elemento <EditText> adicione o elemento <Button>:

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />

A altura e a largura são definidas como “wrap_content” para o botão possuir o tamanho do seu conteúdo, no caso o texto do nosso “button_send”.

Customizando o tamanho dos componentes

Rodando a nossa aplicação (estou utilizando o simulador do post anterior), podemos observar que o campo de texto e o botão têm o tamanho necessário para comportar suas strings. Para o botão está ok, mas e caso o usuário queira inserir um texto maior do que aquele tamanho? Vamos alongar o nosso campo de texto para ocupar a tela inteira. Para isto vamos mexer no atributo android:layout_weight.

O valor do layout_weight, ou “peso de layout” é quanto do espaço total não utilizado uma view deve consumir. Por padrão este valor vem zerado para todas as views. Se especificarmos 1 para uma view e 2 para outra, isto quer dizer que uma das views ocupara 1/3 do espaço restante a outra 2/3. Vamos especificar um valor maior do que zero para nosso EditText para que ele ocupe todo o espaço restante.

Vamos atualizar as propriedades do nosso EditText:

<EditText
        android:layout_weight="1"
        ... />

E agora há espaço para entrar com uma string maior:

Nosso arquivo final de layout, activity_main.xml deve ficar assim:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://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_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>

É de suma importância entender o mecanismo por trás da interface gráfica mas assim como outras IDEs o Eclipse também conta com um gerador de interface gráfica, você desenha na tela, coloca componentes, mexe no atributo dos mesmos e o XML é gerado para você.

Conclusão

Neste artigo vimos como utilizar alguns elementos da interface gráfica. No próximo artigo vamos ver como alternar entre atividades e por fim uma aplicação que se comunique via bluetooth com um microcontrolador.