Google Android

Uma abordagem prtica e didtica

Rafael Guimares Sakurai, Diogo Carleto, eRodrigo Cascarrolho

Esse livro est venda em http://leanpub.com/google-android

Essa verso foi publicada em 2015-10-08

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.

2015 Rafael Guimares Sakurai, Diogo Carleto, eRodrigo Cascarrolho

Contedo

1. Ol Android! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 Criando um novo projeto no Android Studio . . . . . . . . . . . . . . . . . . . . . 1
1.2 Executando um aplicativo Android . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3 Personalizando o aplicativo OlaAndroid . . . . . . . . . . . . . . . . . . . . . . . . 13
1.4 Resumo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
1.5 Exerccios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
1. Ol Android!
Vamos criar uma aplicativo inicial, no estilo Ol Mundo! para Android. O objetivo apresentar
como criar um projeto Android e utilizar uma Activity para controlar a tela e os componentes
TextView, ImageView e Toast.

O aplicativo ter um texto Ol Android!!! e a figura do logo do Android, tambm ser adicionado
uma ao na figura que ao clicar nela aparece uma mensagem Ol!. No final, o aplicativo ficar
conforme a imagem a seguir:

Figura 1.1 - Ol Android!

Para desenvolvimento dos aplicativos Android utilizaremos a IDE Android Studio.

1.1 Criando um novo projeto no Android Studio

Para criar um projeto no Android Studio selecione a primeira opo Start a new Android Studio
project (Iniciar um novo projeto Android Studio).
http://developer.android.com/sdk/index.html
Ol Android! 2

Figura 1.2 - Android Studio.

Na tela Create New Project vamos configurar as informaes bsicas do projeto como:

Application name (Nome do aplicativo): OlaAndroid;

Company Domain (Domnio da empresa): seudominio.com.br, exemplo: universidade-
java.com.br ou se preferir livro.capitulo1;
Project location (Localizao do projeto): Caminho no seu computador;
Ol Android! 3

Figura 1.3 - Novo projeto Android.

Continuando, precisamos escolher qual o foco do projeto, o Android Studio permite desenvolver
para Celular e Tablet; Wear (como o relgio); TV; Auto (uso em automveis); e para o culos Google
Glass.
Escolha a opo Phone and Tablet, nesse exemplo ser utilizado a API 18: Android 4.3 (Jelly Bean),
mas o exemplo apresentado funciona em qualquer verso a partir da 2.3 do Android, ento se voc
tiver uma verso mais recente como Lollipop, pode desenvolver para essa verso.
Ol Android! 4

Figura 1.4 - Novo projeto Android.

Vamos marcar apenas a opo Phone and Tablet e clique em Next para continuar.
Clicando em Next, vamos continuar a criao do projeto informando que ele deve criar uma
Activity, de modo geral uma Activity usada para realizar a aes de uma pgina.

Neste captulo abordaremos apenas o bsico para criar e iniciar um projeto, nos demais
captulos abordaremos todos os exemplos de Activity apresentado nessa lista.
Ol Android! 5

Figura 1.5 - Novo projeto Android.

Marque a opo Black Activity (Activity em branco) e clique em Next para prosseguir. Essa opo
cria uma Activity e tela com um texto de exemplo, algo bem simples que a partir dele possvel
continuar a implementao de diversos aplicativos.
Agora, temos a opo de customizar os dados da Activity inicial que ser criada no projeto. As
informaes que temos so:

Activity Name (Nome da Activity): MainActivity

Layout Name (Nome do layout): activity_main
Title (Ttulo): MainActivity
Menu Resource Name (Nome do recurso do menu): menu_main

A Activity representa o nome da classe que ser criada para controlar as aes e atributos do layout
da tela; o Layout um arquivo XML que possui a estrutura e componentes da tela; o Ttulo o
nome da tela; e o Recurso do menu um arquivo XML com a estrutura do menu.
Ol Android! 6

Figura 1.6 - Novo projeto Android.

Clique em Finish para terminar a criao do projeto. Aps a criao do projeto, o Android Studio
abre uma visualizao completa da estrutura do projeto, clicando do item Project que est na barra
do lado esquerdo.
Ol Android! 7

Figura 1.7 - Projeto aberto no Android Studio.

1.2 Executando um aplicativo Android

Para executar um aplicativo Android podemos utilizar um hardware fsico como celular, tablet, etc,
ou um emulador que simula o comportamento do aplicativo no dispositivo. Nesse primeiro momento
ser apresentado com o uso do emulador e posteriormente ser apresentado como usar o com celular
e tablet.
Na barra de tarefa do Android Studio temos a opo de executar o aplicativo atravs do boto verde
de Play ou atravs do atalho CRTL + R.
Uma tela ser aberta para escolher se deve executar o aplicativo no dispositivo ou no emulador.
Nesse exemplo est marcado a opo Launch emulator (Lanar emulador) para abrir um emulador,
mas na primeira vez que executamos um aplicativo no temos emuladores criado, por isso para criar
um novo emulador clique no boto com o sinal de reticncias () em frente a lista de seleo do
Android Virtual Device (AVD) (Dispositivo virtual Android).
Ol Android! 8

Figura 1.8 - Escolhendo um dispositivo virtual - emulador.

Na tela Android Virtual Device Manager (Gerenciador de dispositivos virtuais Android) temos
uma lista com todos os emuladores j criado, para criar um novo emulador clique no boto + Create
Virtual Device (Criar um dispositivo virtual) que est no lado inferior esquerdo da tela.

Figura 1.9 - Lista dos dispositivos virtuais criado.

Para facilitar a criao de um novo emulador na tela Virtual Device Configuration (Configurao
virtual de dispositivos) temos as categorias do emulador como TV, Phone, Wear e Tablet, e para cada
Ol Android! 9

categoria temos a opo de usar as configuraes de um hardware existente, como por exemplo:
Nexus 5, Nexus One, etc, ou um formato de acordo com o tamanho da tela 5.4, 4, etc.
Para escolher a configurao do emulador, precisamos ter em mente qual ser o tipo de hardware
(tamanho, resoluo e densidade) que ser o foco do aplicativo, mais adiante no livro ser
apresentado o que significa cada uma dessas caractersticas e como criar um aplicativo que funcione
de modo agradvel em vrias resolues. Por agora voc pode criar um emulador com base no
hardware do Nexus 5 ou criar um emulador com base no seu celular.

Figura 1.10 - Escolhendo o hardware do novo dispositivo virtual.

No segundo passo precisamos informar qual a Imagem do Sistema que utilizaremos no emulador,
nesse caso a verso do Android.
Note que por exemplo para a verso Jelly Bean - API Level 18 temos vrias opes, basicamente o
que muda se usamos a verso Android ou verso do Google e o ABI que representa a arquitetura
do hardware, o recomendado usar uma verso com ABI x86 ou x84_64 se seu computador
suportar porque mais rpido que o armeabi-v7a, mas se o emulador no funcionar por falta de
compatibilidade do seu computador, ento crie o emulador usando a opo armeabi-v7a.

No exemplo ser usado o Jelly Bean - API Level 18, mas fique a vontade para escolher
uma verso que voc tenha no seu computador ou no seu celular.
Ol Android! 10

Figura 1.11 - Escolhendo a imagem (verso do Android) do dispositivo virtual.

Se no encontrar a verso do Android na lista, marque a opo Show downloadable system images
que ser apresentado todas as imagens disponveis do Android.
Ol Android! 11

Figura 1.21 - Baixando uma nova verso do Android.

E, por fim, revisamos as configuraes do emulador:

O nome do AVD; > Sugesto: coloque no nome o modelo, verso da API e resoluo, para ficar
mais fcil de identificar;
Dispositivo que ser simulado;
Verso do Android;
Escala e orientao;
Desempenho do emulador.
Ol Android! 12

Figura 1.12 - Revisando as configuraes do dispositivo virtual.

Clique em Finish para terminar a criao do emulador e pode fechar a tela do Android Virtual
Device Manager.
Escolha o emulador que ser iniciado e clique em OK.

Figura 1.13 - Iniciando um emulador.

O emulador ser iniciado, desbloqueie a tela e o aplicativo OlaAndroid ser publicado e automati-
camente iniciado.
Ol Android! 13

Figura 1.14 - Aplicativo iniciado no emulador.

Dica: O emulador demora um pouco para iniciar, ento enquanto estiver desenvolvendo
mantenha o emulador ligado.

1.3 Personalizando o aplicativo OlaAndroid

Voltando ao Android Studio, vamos alterar o aplicativo para ficar um pouco mais interessante.
Na estrutura do projeto temos alguns pacotes que so de uso frequente como:

app manifests - O arquivo AndroidManifest.xml contm a configurao do projeto;

app java - Estrutura de pacotes com cdigos fonte do aplicativo;
app res - Pacote de recursos;
app res drawable Pacote com as imagens de acordo com a resoluo;
app res layout Arquivos no formato .xml com a estrutura do layout das telas;
app res values Pasta dimens.xml com configuraes de dimenses e tamanho de
fontes que podem ser reutilizados em todo projeto; o arquivo strings.xml com os textos strings;
e o arquivo styles.xml com o estilo de telas do aplicativo.

A figura a seguir mostra a estrutura atual do projeto.

Ol Android! 14

Figura 1.15 - Estrutura do projeto.

Para editar e montar a tela do aplicativo, abra o arquivo app res layout activity_-
main.xml.
A edio de uma tela pode ser feita de modo design adicionando os componentes atravs da paleta
e configurando pelas propriedades.

Figura 1.16 - Edio da tela no modo Design.

Tambm podemos alterar o cdigo da tela editando o arquivo activity_main.xml no modo Text.
 Ol Android! 15

Figura 1.17 - Edio da tela no modo Text.

Note que em ambos modos tambm temos mais opes para configurar o layout que renderizado,
podemos escolher o tipo de aparelho, se o aparelho est na vertical ou horizontal, o tema do
aplicativo, a classe associada com essa tela, a localizao para trabalhar com internacionalizao
de textos e a verso do Android utilizada quando for renderizar a tela do layout.

Figura 1.18 - Opes de preview do aplicativo.

O modo mais comum usando a verso Text e editando diretamente o XML.

No activity_main.xml e altere apenas o cdigo do TextView para:

1 <TextView
2 android:id="@+id/texto"
3 android:layout_width="match_parent"
4 android:layout_height="wrap_content"
5 android:layout_marginTop="50dp"
6 android:gravity="center_horizontal"
7 android:text="@string/hello_world"
8 android:textSize="40sp" />

O TextView representa um texto na tela, como um label (rtulo), no qual pode ser definido o seu
texto, como ser o seu layout, tamanho do texto, cor do texto, entre outros.
Esse TextView est utilizando uma string (texto) chamada hello_world, para alterar o contedo
desse texto, na estrutura do projeto abra o arquivo ** app res values strings.xml** e altero
 Ol Android! 16

o atributo value da string hello_world para Ol Android!!!. O arquivo strings.xml ficar com o
seguinte contedo:

1 <resources>
2 <string name="app_name">OlaAndroid</string>
3 <string name="hello_world">Ol Android!!!</string>
4 <string name="action_settings">Settings</string>
5 </resources>

Agora vamos adicionar uma imagem nessa tela, para isso voc pode utilizar uma imagem que exista
no seu computador ou usar alguma imagem disponvel na Internet, nesse exemplo estou usando um
logo do rob Android disponvel em: http://developer.android.com/images/brand/Android_Robot_-
100.png, esse logo pode ser usado, reproduzido e modificado gratuitamente.
Salve a figura Android_Robot_100.png dentro da pasta app res drawable.
Outro detalhe importante que o nome das imagens pode ter apenas os caracteres [a-z0-9]**,
portanto aps adicionar a imagem **Android_Robot_100.png** aparece a seguinte **men-
sagem de erro no Console: res/drawable-hdpi/Android_Robot_100.png: Invalid file name:
must contain only [a-z0-9.], porque no nome da figura tem caracteres maisculos.
Para resolver isso clique em cima da figura Android_Robot_100.png e escolha no menu Refactor
(Refatorar) a opo Rename (Renomear) ou clique na figura e pressione SHIFT + F6. Altere o nome
do arquivo para android.png.
No arquivo activity_main.xml aps a declarao do TextView, adicione a declarao do ImageView
que far uso da imagem do android.png:

1 <ImageView
2 android:id="@+id/imagem"
3 android:src="@drawable/android"
4 android:layout_width="match_parent"
5 android:layout_height="250dp"
6 android:layout_below="@id/texto"
7 android:contentDescription="@string/hello_world" />

Aps adicionar a figura na pasta drawable, o Android Studio gera automaticamente um registro para
@drawable/android. Como queremos deixar a imagem em baixo do texto adicionamos a propri-
edade android:layout_below="@id/texto" e o Android tambm pede que descrevamos a imagem
que est sendo apresentado para isso utilizamos a propriedade android:contentDescription=
"@string/hello_world" que est utilizando a string hello_world, esse texto ser utilizado apenas
para acessibilidade ele no aparece visualmente na tela.
http://developer.android.com/images/brand/Android_Robot_100.png
 Ol Android! 17

Ficamos com a seguinte estrutura de cdigo e aparncia visual:

Figura 1.19 - Preview do projeto OlaAndroid.

Vamos adicionar uma mensagem Ol! quando a imagem do Android for clicada, para isso altere
no arquivo activity_main.xml a cdigo XML da declarao do ImageView adicionando as ltimas
duas linhas:

1 <ImageView
2 android:id="@+id/imagem"
3 android:src="@drawable/android"
4 android:layout_width="match_parent"
5 android:layout_height="250dp"
6 android:layout_below="@id/texto"
7 android:contentDescription="@string/hello_world"
8 android:clickable="true"
9 android:onClick="mostrarMensagem" />

Foi adicionado a propriedade android:clickable="true" informando que essa imagem pode ser
clicada e tambm a propriedade android:onClick="mostrarMensagem" informando que ao clicar
na imagem ser chamado o mtodo mostrarMensagem.
Abra a classe MainActivity, essa a Activity responsvel pela tela inicial do aplicativo, nela importe
as classes:
 Ol Android! 18

1 import android.view.View;
2 import android.widget.Toast;

E adicione o mtodo mostrarMensagem:

1 public void mostrarMensagem(View view) {

2 Toast toast = Toast.makeText(this, "Ol!", Toast.LENGTH_SHORT);
3 toast.show();
4 }

O Toast uma mensagem que aparece e desaparece da tela e o Toast.LENGTH_SHORT especifica que
uma mensagem que fica por um tempo curto na tela.
O cdigo completo da classe MainActivity ficar assim:

1 package com.leanpub.googleandroid.olaandroid;
2
3 import android.support.v7.app.AppCompatActivity;
4 import android.os.Bundle;
5 import android.view.Menu;
6 import android.view.MenuItem;
7 import android.view.View;
8 import android.widget.Toast;
9
10 public class MainActivity extends AppCompatActivity {
11
12 @Override
13 protected void onCreate(Bundle savedInstanceState) {
14 super.onCreate(savedInstanceState);
15 setContentView(R.layout.activity_main);
16 }
17
18 @Override
19 public boolean onCreateOptionsMenu(Menu menu) {
20 // Inflate the menu; this adds items to the action bar if it is present.
21 getMenuInflater().inflate(R.menu.menu_main, menu);
22 return true;
23 }
24
25 @Override
26 public boolean onOptionsItemSelected(MenuItem item) {
27 // Handle action bar item clicks here. The action bar will
 Ol Android! 19

28 // automatically handle clicks on the Home/Up button, so long

29 // as you specify a parent activity in AndroidManifest.xml.
30 int id = item.getItemId();
31
32 //noinspection SimplifiableIfStatement
33 if (id == R.id.action_settings) {
34 return true;
35 }
36
37 return super.onOptionsItemSelected(item);
38 }
39
40 public void mostrarMensagem(View view) {
41 Toast toast = Toast.makeText(this, "Ol!", Toast.LENGTH_SHORT);
42 toast.show();
43 }
44 }

E o cdigo completo do activity_main.xml ficar assim:

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:paddingLeft="@dimen/activity_horizontal_margin"
6 android:paddingRight="@dimen/activity_horizontal_margin"
7 android:paddingTop="@dimen/activity_vertical_margin"
8 android:paddingBottom="@dimen/activity_vertical_margin"
9 tools:context=".MainActivity">
10
11 <TextView
12 android:id="@+id/texto"
13 android:layout_width="match_parent"
14 android:layout_height="wrap_content"
15 android:layout_marginTop="50dp"
16 android:gravity="center_horizontal"
17 android:text="@string/hello_world"
18 android:textSize="40sp" />
19
20 <ImageView
21 android:id="@+id/imagem"
22 android:src="@drawable/android"
 Ol Android! 20

23 android:layout_width="match_parent"
24 android:layout_height="250dp"
25 android:layout_below="@id/texto"
26 android:contentDescription="@string/hello_world"
27 android:clickable="true"
28 android:onClick="mostrarMensagem" />
29 </RelativeLayout>

Execute novamente o aplicativo no emulador do Android e clique sobre a figura para visualizar a
mensagem:

Figura 1.20 - Executando o projeto OlaAndroid no emulador.

1.4 Resumo
Neste captulo foi apresentado como criar um novo projeto Android usando o Android Studio, como
criar e instalar um aplicativo no emulador. Vimos alguns componentes bsicos como a Activity, e na
tela os componentes TextView e ImageView, para terminar mostramos como um mtodo da Activity
pode ser chamado ao executar uma ao de click na figura. Esse conceito de chamada de mtodo
o mesmo para botes e outras aes como veremos mais adiante.

1.5 Exerccios
Exerccio 1 - Crie um novo emulador para tablet, usando como base o hardware do Nexus 10, e
execute o aplicativo OlaAndroid nele.
Ol Android! 21

Exerccio 2 - Altere o exemplo OlaAndroid para colocar em TexView com o seu nome logo embaixo
da figura do logo do Android.
Exerccio 3 - Para alterar o ttulo do aplicativo para Google Android devemos alterar em qual
arquivo?
Exerccio 4 - O que o componente Toast? E o que significa definir ele com a propriedade
Toast.LENGTH_LONG?

Exerccio 5 - Para definir tamanho dos componentes usamos algumas propriedades do Android como
match_parent e wrap_content, para que serve cada um deles?