Tutorial Android (Parte I)

Neste tutorial daremos início a uma série de tutoriais sobre uma das maiores plataformas (se não a mais[1][2]) para dispositivos móveis: Android. Então mãos à obra!

Se você chegou até aqui e não sabe o que é Android, alerta vermelho: você não está surfando corretamente a onda tecnológica. Se você conhece mas não sabe desenvolver, não está em melhor posição. But fear not, my friend! Estamos aqui para lhe ajudar na medida do possível, fornecendo uma introdução sólida a essa plataforma, entretanto, o dever de casa fica pra vocês. ;)

Android é um sistema operacional desenvolvido pela Google construído em cima do kernel do Linux. Além dessa já grande qualidade, ele tem seu código parcialmente aberto.

Do que preciso?

Não, você não precisa de um celular com Android para desenvolver para Android. A única coisa que você precisa é de um computador e paciência (ênfase aí na paciência).

Let's go

A primeira coisa que você precisa baixar é o SDK. Clique aqui para fazer isso. Descompacte o arquivo e você verá dentro dele duas pastas: eclipse e SDK. Sim, você pode desenvolver Android a partir do já bem conhecido ambiente de desenvolvimento Eclipse… E em Java! Isso já é um grande salto a nosso favor. Abra esse Eclipse e já estamos prontos para iniciar nosso primeiro projeto.

Nosso primeiro projeto

Crie um novo projeto da maneira que você criaria em Java, mas agora você verá novas opções:

Selecione a opção indicada e você verá uma nova janela:

Application Name:

O nome do seu aplicativo (que estará visível a todos os usuários)

Project Name:

O nome do seu projeto (que estará visível apenas no Eclipse)

Package Name:

Uma maneira de indexar projetos é através de seus pacotes. É assim que o Google diferencia se várias versões pertencem a um mesmo aplicativo. Logo, é sábio escolher um nome e mantê-lo durante todo o desenvolvimento. Além disso, por convenção, o nome do pacote representa o site ao qual o aplicativo está vinculado de maneira invertida (exemplo: www.google.com vira com.gooogle). Se seu aplicativo não tem site, use algo do tipo: com.app.NOME_DO_APLICATIVO.

Minimum Required SDK:

A versão minimamente compatível com seu aplicativo. Quanto mais antiga, maior o número de dispositivos móveis abrangidos, mas também maiores as limitações.

Target SDK:

A versão para qual seu aplicativo foi projetado. Nela, ele deve se comportar de maneia ideal.

Compile with:

A versão que você irá usar para desenvolver o aplicativo.

Theme:

Define a interface do seu aplicativo.

Preenchido os nomes, clique em Next.

A página acima não apresenta opções muito interessantes para nós agora. Deixe-a como está e clique em Next.

Na página acima você irá definir o ícone do seu aplicativo. Brinque com as opções disponíveis. Quando estiver satisfeito clique em Next. As páginas seguintes também não são muito interessantes para nós agora. Apenas clique em Next até chegar em Finish.

Terminado o processo de criação, espero que seu projeto tenha a seguinte estrutura:

De cara você encontra uma classe chamada “MainActivity” escrita em código Java. Não se desespere, não vamos tocá-la agora. :P

Adicionando um botão

No seu projeto, vá em res > layout > activity_main.xml.

É nessa pasta de layout que você encontrará a interface gráfica do seu programa. O arquivo “activity_main.xml” define a interface gráfica da janela inicial, e como você já deve ter adivinhado pela extensão do arquivo, ela é escrita em XML. O que eu quero é que você simplesmente clique em “Button” ali embaixo da categoria “Form Widgets” e arraste pra sua janela.

Veja a facilidade que você teve para adicionar um botão a sua janela. Lembra um pouco o Netbeans, com a diferença que o Android permite total controle dos elementos da página.

Agora clique duas vezes no botão recém criado e uma janela misteriosa irá aparecer.

Esse é o XML propriamente dito. Você pode voltar para exibição da janela navegando nas abas indicado em vermelho na imagem acima.

A sintaxe do XML é bem intuitiva de entender: cada abertura de tag representa a adição de um novo widget (elemento da tela). Algumas tags (widgets) permitem outros elementos dentro dela enquanto outras não, assim como no HTML. Perceba que a tag “RelativeLayout” possui outras duas tags dentro dela: “TextView” e “Button”. Isso significa que “TextView” e “Button” são filhas (children ou nodes) de “RelativeLayout”. Além disso, cada tag tem seus próprios parâmetros, como, por exemplo, “android:id” ou “android:layout_width”, acompanhado de seus respectivos valores.

Para quem já conhece HTML, a explicação acima foi redundante. Mas tudo bem... Vamos nos focar na tag “Button”, o nosso botão!

Ele tem alguns parâmetros interessantes, dentre eles, “android:text”. Esse parâmetro representa o texto do nosso botão. Mude-o para algo significativo, volte para exibição da janela e veja o que acontece.

Além disso, outro parâmetro importantíssimo é o “android:layout_width” e “android:layout_height”. Basicamente, eles definem as dimensões dos nossos widgets. Eles podem ter os seguintes valores: match_parent, wrap_content e um valor determinado. (fill_parent é a mesma coisa que match_parent mas deprecated. Não use-o!).

match_parent:

Faz com que a dimensão dada ocupe toda a dimensão do pai. Por exemplo, “android:layout_height=”match_parent”” fará com que a altura do widget ocupe toda a altura do pai.

wrap_content:

Faz com que a dimensão dada ocupe apenas o necessário para visualizar o widget.

Valor determinado:

Além dessas duas constantes, você pode definir um determinado valor para altura ou largura. Esse valor deve vir acompanhado de uma unidade de medida, que irá definir se estamos medindo-o em pixels, densidade-por-pixel, etc.,... Por exemplo, se quiséssemos que nosso botão ocupasse "600" pixels de largura, usaríamos:

android:layout_width=”"600"px"

Entretanto, não é recomendado usar pixels, pois trata-se de um de valor fixo, independente da dimensão da janela. Em geral, usa-se mais densidade-por-pixel, por essa unidade ser relativa à dimensão da janela, auto-redimensionando-se, o que já nos poupa muuuita dor de cabeça. Ufa!

A unidade que representa densidade-por-pixel é o dp. Exemplo:

android:layout_width=”10dp”

Exercício 1.1:

Faça com que o botão ocupe toda a largura do pai.

Fazendo nosso botão funcionar

De nada adianta um botão se ele não faz nada, não é verdade? Mas não se preocupe, estamos próximos de resolver esse problema!

Volte àquela classe monstruosa que encontramos no começo, a MainActivity.java. Perceba que ela possui dois métodos. Trabalharemos em cima do onCreate, que é o método chamado na inicialização da Activity (ignore esse termo por enquanto).

Embaixo de setContentView, digite essas duas linhas:

TextView tv = (TextView)findViewById(R.id.textView1);

Button bt = (Button)findViewById(R.id.button1);

Vamos destrinchar o que essas linhas recém-criadas significam:

findViewById é um método que permite localizar um widget (como um botão, por exemplo) através de um id. ID? Como assim?! Se você voltar ao XML, irá perceber um parâmetro interessante…

“android:id” define um ID para nosso widget. ID’s, em geral, tem a seguinte nomenclatura:

@+id/NOME_DO_ID

E é através desse nome do ID que podemos localizar esse widget inserindo como argumento do método findViewById da seguinte forma:

R.id.NOME_DO_ID

Não sei se você já se deu conta do que está acontecendo aqui, mas o que estamos fazendo é a comunicação entre o XML e Java! Isso é simplesmente fantástico!

E o responsável por essa comunicação é a classe “R”, que está dentro da pasta “gen” do seu projeto:

Mas voltando às nossas duas linhas, ao usar findViewById, ele retorna um objeto genérico. Precisamos de um cast para podermos usar métodos específicos de cada widget, e aí você precisa prestar atenção se o ID realmente está associado a classe do seu cast. Essa é uma fonte muito comum de bugs.

Agora que temos nossos dois widgets usados no nosso XML, vamos trabalhar em cima deles, começando adicionando um listener ao nosso botão. Listener… Isso te lembra alguma coisa? :P

Claro, o Swing! Se você ainda lembra, um listener no Swing é um método que é disparado toda vez que uma determinada ação for executada. Aqui ele possui a mesma semântica. O listener que iremos usar é o onClickListener.

Como o próprio nome indica, esse listener é disparado quando clicarmos no widget associado a ele, no caso, nosso botão. É dentro do método onClick do listener que a ação acontece.

Dentro do método onClick, digite a seguinte linha:

bt.setText("Fui clicado!");

O método “setText” é responsável por mudar o texto do widget. Agora, perceba que está havendo um erro de compilação ali. Se você ainda recorda do Swing, para podermos referenciar variáveis de fora do listener, temos que ou defini-las como constantes (adicionando final na frente) ou torna-las membros da classe. Vamos usar a primeira alternativa.

E com isso terminamos!

Exercício 1.2:

Faça com que o listener mude o texto do TextView ao invés do botão.

Rodando nosso aplicativo

Conseguimos fazer nosso botão funcionar, mas como vamos testá-lo?

É aí que entra o emulador do Android. O emulador do android é uma boa alternativa para quem não tem ou não deseja testar num dispositivo real. Embora ele seja bastante pesado, ele é muito simples de configurar.

Primeiro clique no botão indicado abaixo:

(Ou, se ele não estiver disponível, Window > Android Virtual Device Manager).

A seguinte janela irá aparecer pra você:

Perceba que eu já tenho alguns emuladores configurados. Crie um novo clicando em “New…”. A seguinte janela deve aparecer:

Como esse tutorial já está ficando bastante extenso, simplesmente configure a janela da seguinte forma:

Clique em OK, selecione seu emulador recém-criado e depois clique em “Start…”:

Uma janela irá aparecer com o nome Android:

Esse é o nosso emulador. Agora espere uma eternidade até que ele inicialize (a demora é normal, principalmente na primeira inicialização).

Com o emulador inicializado, rode seu aplicativo clicando com o botão direito sobre seu projeto e selecionando a opção indicada abaixo:

Agora, dentro do emulador, vá em programas (um ícone de vários pontinhos na parte inferior da tela) e procure pelo seu aplicativo.

E agora veja a mágica acontecer. ;)

Rodando nosso aplicativo em um dispositivo real

Se você não foi muito com a cara do emulador você pode testar com seu próprio dispositivo. Para isso, basta habilitar a opção “USB debugging” nele, indo em “Settings > Developer Options”, e depois conectá-lo ao seu computador.

E aí, prestou atenção mesmo? Vamos ver então se você consegue responder de cabeça todos os conceitos aprendidos aqui!

Questionário:

1. Qual a utilidade do “package name” na criação do seu projeto?
2. O que é um widget? E um node?
3. De quantas maneiras posso definir as dimensões de um widget? Que atributo usamos para modificá-las? Qual a melhor unidade de medida para valores definidos?
4. Para que serve o método findViewById? Como é feita a “busca”?
5. O que é um listener? Que listener é usado para detectar “cliques”?

Respostas:

1. Ele serve para identificar várias versões de um mesmo aplicativo, impedindo que haja duplicados.
2. Widget é um elemento da tela, como, por exemplo: botões (Button), rótulos (TextView), etc., … Um node é um widget que está contido em outro widget, geralmente um layout.
3. Três: match_parent, wrap_content e um valor definido. Os atributos que usamos para modificar as dimensões de um widget são: “android:layout_width” e “android:layout_height”. A melhor unidade de medida para valores definidos é o densidade-por-pixel (dp), por se tratar de um valor relativo às dimensões da tela.
4. Para buscar widgets definidos nos arquivos XML. A busca é feita através de valores hexadecimais armazenados na classe “R.java” do seu projeto.
5. Listener é um evento que é disparado toda vez que determinada ação for executada. O listener que usamos para definir cliques é o onClickListener.

Com isso terminamos nosso primeiro tutorial. Lembre-se que demos apenas o primeiro passo. Aguarde o tutorial da próxima edição, onde aprenderemos a navegar entre várias janelas. Até mais e abraços!