Google Android. Uma abordagem prática e didática. Rafael Guimarães Sakurai, Diogo Carleto, erodrigo Cascarrolho

Transcrição

1

2 Google Android Uma abordagem prática e didática Rafael Guimarães Sakurai, Diogo Carleto, erodrigo Cascarrolho Esse livro está à venda em Essa versão foi publicada em 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 Rafael Guimarães Sakurai, Diogo Carleto, erodrigo Cascarrolho

3 Conteúdo 1. Olá Android! Criando um novo projeto no Android Studio Executando um aplicativo Android Personalizando o aplicativo OlaAndroid Resumo Exercícios

4 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, também será adicionado uma ação na figura que ao clicar nela aparece uma mensagem Olá!. No final, o aplicativo ficará conforme a imagem a seguir: Figura 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 opção Start a new Android Studio project (Iniciar um novo projeto Android Studio). ¹

5 Olá Android! 2 Figura Android Studio. Na tela Create New Project vamos configurar as informações básicas do projeto como: Application name (Nome do aplicativo): OlaAndroid; Company Domain (Domínio da empresa): seudominio.com.br, exemplo: universidadejava.com.br ou se preferir livro.capitulo1; Project location (Localização do projeto): Caminho no seu computador;

6 Olá Android! 3 Figura Novo projeto Android. Continuando, precisamos escolher qual o foco do projeto, o Android Studio permite desenvolver para Celular e Tablet; Wear (como o relógio); TV; Auto (uso em automóveis); e para o óculos Google Glass. Escolha a opção Phone and Tablet, nesse exemplo será utilizado a API 18: Android 4.3 (Jelly Bean), mas o exemplo apresentado funciona em qualquer versão a partir da 2.3 do Android, então se você tiver uma versão mais recente como Lollipop, pode desenvolver para essa versão.

7 Olá Android! 4 Figura Novo projeto Android. Vamos marcar apenas a opção Phone and Tablet e clique em Next para continuar. Clicando em Next, vamos continuar a criação do projeto informando que ele deve criar uma Activity, de modo geral uma Activity é usada para realizar a ações de uma página. Neste capítulo abordaremos apenas o básico para criar e iniciar um projeto, nos demais capítulos abordaremos todos os exemplos de Activity apresentado nessa lista.

8 Olá Android! 5 Figura Novo projeto Android. Marque a opção Black Activity (Activity em branco) e clique em Next para prosseguir. Essa opção cria uma Activity e tela com um texto de exemplo, algo bem simples que a partir dele é possível continuar a implementação de diversos aplicativos. Agora, temos a opção de customizar os dados da Activity inicial que será criada no projeto. As informações que temos são: Activity Name (Nome da Activity): MainActivity Layout Name (Nome do layout): activity_main Title (Título): MainActivity Menu Resource Name (Nome do recurso do menu): menu_main A Activity representa o nome da classe que será criada para controlar as ações e atributos do layout da tela; o Layout é um arquivo XML que possui a estrutura e componentes da tela; o Título é o nome da tela; e o Recurso do menu é um arquivo XML com a estrutura do menu.

9 Olá Android! 6 Figura Novo projeto Android. Clique em Finish para terminar a criação do projeto. Após a criação do projeto, o Android Studio abre uma visualização completa da estrutura do projeto, clicando do item Project que está na barra do lado esquerdo.

10 Olá Android! 7 Figura Projeto aberto no Android Studio. 1.2 Executando um aplicativo Android Para executar um aplicativo Android podemos utilizar um hardware físico 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 opção de executar o aplicativo através do botão verde de Play ou através 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 opção Launch emulator (Lançar emulador) para abrir um emulador, mas na primeira vez que executamos um aplicativo não temos emuladores criado, por isso para criar um novo emulador clique no botão com o sinal de reticências ( ) em frente a lista de seleção do Android Virtual Device (AVD) (Dispositivo virtual Android).

11 Olá Android! 8 Figura 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 botão + Create Virtual Device (Criar um dispositivo virtual) que está no lado inferior esquerdo da tela. Figura Lista dos dispositivos virtuais criado. Para facilitar a criação de um novo emulador na tela Virtual Device Configuration (Configuração virtual de dispositivos) temos as categorias do emulador como TV, Phone, Wear e Tablet, e para cada

12 Olá Android! 9 categoria temos a opção de usar as configurações 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 configuração do emulador, precisamos ter em mente qual será o tipo de hardware (tamanho, resolução e densidade) que será o foco do aplicativo, mais adiante no livro será apresentado o que significa cada uma dessas características e como criar um aplicativo que funcione de modo agradável em várias resoluções. Por agora você pode criar um emulador com base no hardware do Nexus 5 ou criar um emulador com base no seu celular. Figura Escolhendo o hardware do novo dispositivo virtual. No segundo passo precisamos informar qual a Imagem do Sistema que utilizaremos no emulador, nesse caso a versão do Android. Note que por exemplo para a versão Jelly Bean - API Level 18 temos várias opções, basicamente o que muda é se usamos a versão Android ou versão do Google e o ABI que representa a arquitetura do hardware, o recomendado é usar uma versão com ABI x86 ou x84_64 se seu computador suportar porque é mais rápido que o armeabi-v7a, mas se o emulador não funcionar por falta de compatibilidade do seu computador, então crie o emulador usando a opção armeabi-v7a. No exemplo será usado o Jelly Bean - API Level 18, mas fique a vontade para escolher uma versão que você tenha no seu computador ou no seu celular.

13 Olá Android! 10 Figura Escolhendo a imagem (versão do Android) do dispositivo virtual. E, por fim, revisamos as configurações do emulador: O nome do AVD; > Sugestão: coloque no nome o modelo, versão da API e resolução, para ficar mais fácil de identificar; Dispositivo que será simulado; Versão do Android; Escala e orientação; Desempenho do emulador.

14 Olá Android! 11 Figura Revisando as configurações do dispositivo virtual. Clique em Finish para terminar a criação do emulador e pode fechar a tela do Android Virtual Device Manager. Escolha o emulador que será iniciado e clique em OK. Figura Iniciando um emulador. O emulador será iniciado, desbloqueie a tela e o aplicativo OlaAndroid será publicado e automaticamente iniciado.

15 Olá Android! 12 Figura Aplicativo iniciado no emulador. Dica: O emulador demora um pouco para iniciar, então 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 são de uso frequente como: app manifests - O arquivo AndroidManifest.xml contém a configuração do projeto; app java - Estrutura de pacotes com códigos fonte do aplicativo; app res - Pacote de recursos; app res drawable Pacote com as imagens de acordo com a resolução; app res layout Arquivos no formato.xml com a estrutura do layout das telas; app res values Pasta dimens.xml com configurações de dimensões 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 páginas da aplicação. A figura a seguir mostra a estrutura atual do projeto.

16 Olá Android! 13 Figura Estrutura do projeto. Para editar e montar a tela do aplicativo, abra o arquivo app res layout activity_- main.xml. A edição de uma tela pode ser feita de modo design adicionando os componentes através da paleta e configurando pelas propriedades. Figura Edição da tela no modo Design. Também podemos alterar o código da tela editando o arquivo activity_main.xml no modo Text.

17 Olá Android! 14 Figura Edição da tela no modo Text. Note que em ambos modos também temos mais opções 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 localização para trabalhar com internacionalização de textos e a versão do Android utilizada quando for renderizar a tela do layout. Figura Opções de preview do aplicativo. O modo mais comum é usando a versão Text e editando diretamente o XML. No activity_main.xml e altere apenas o código 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 (rótulo), 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 conteúdo desse texto, na estrutura do projeto abra o arquivo ** app res values strings.xml** e altero

18 Olá Android! 15 o atributo value da string hello_world para Olá Android!!!. O arquivo strings.xml ficará com o seguinte conteúdo: 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 disponível na Internet, nesse exemplo estou usando um logo do robô Android disponível em: 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 após adicionar a imagem **Android_Robot_100.png** aparece a seguinte **mensagem 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 maiúsculos. Para resolver isso clique em cima da figura Android_Robot_100.png e escolha no menu Refactor (Refatorar) a opção Rename (Renomear) ou clique na figura e pressione SHIFT + F6. Altere o nome do arquivo para android.png. No arquivo activity_main.xml após a declaração do TextView, adicione a declaração 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" /> Após adicionar a figura na pasta drawable, o Android Studio gera automaticamente um registro Como queremos deixar a imagem em baixo do texto adicionamos a propriedade android:layout_below="@id/texto" e o Android também 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 não aparece visualmente na tela. ²

19 Olá Android! 16 Ficamos com a seguinte estrutura de código e aparência visual: Figura 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 código XML da declaração 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 também a propriedade android:onclick="mostrarmensagem" informando que ao clicar na imagem será chamado o método mostrarmensagem. Abra a classe MainActivity, essa é a Activity responsável pela tela inicial da aplicação, nela importe as classes:

20 Olá Android! 17 1 import android.view.view; 2 import android.widget.toast; E adicione o método 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 código completo da classe MainActivity ficará assim: 1 package br.com.universidadejava.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 { protected void oncreate(bundle savedinstancestate) { 14 super.oncreate(savedinstancestate); 15 setcontentview(r.layout.activity_main); 16 } 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 } public boolean onoptionsitemselected(menuitem item) { 27 // Handle action bar item clicks here. The action bar will

21 Olá Android! // 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(); //noinspection SimplifiableIfStatement 33 if (id == R.id.action_settings) { 34 return true; 35 } return super.onoptionsitemselected(item); 38 } public void mostrarmensagem(view view) { 41 Toast toast = Toast.makeText(this, "Olá!", Toast.LENGTH_SHORT); 42 toast.show(); 43 } 44 } E o código completo do activity_main.xml ficará assim: 1 <RelativeLayout xmlns:android=" 2 xmlns: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"> <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" /> <ImageView 21 android:id="@+id/imagem" 22 android:src="@drawable/android"

22 Olá Android! android:layout_width="match_parent" 24 android:layout_height="250dp" android:clickable="true" 28 android:onclick="mostrarmensagem" /> 29 </RelativeLayout> Execute novamente a aplicação no emulador do Android e clique sobre a figura para visualizar a mensagem: Figura Executando o projeto OlaAndroid no emulador. 1.4 Resumo Neste capítulo foi apresentado como criar um novo projeto Android usando o Android Studio, como criar e instalar uma aplicação no emulador. Vimos alguns componentes básicos como a Activity, e na tela os componentes TextView e ImageView, para terminar mostramos como um método da Activity pode ser chamado ao executar uma ação de click na figura. Esse conceito de chamada de método é o mesmo para botões e outras ações como veremos mais adiante. 1.5 Exercícios Exercício 1 - Crie um novo emulador para tablet, usando como base o hardware do Nexus 10, e execute a aplicação OlaAndroid nele.

23 Olá Android! 20 Exercício 2 - Altere o exemplo OlaAndroid para colocar em TexView com o seu nome logo embaixo da figura do logo do Android. Exercício 3 - Para alterar o título do aplicativo para Google Android devemos alterar em qual arquivo? Exercício 4 - O que é o componente Toast? E o que significa definir ele com a propriedade Toast.LENGTH_LONG? Exercício 5 - Para definir tamanho dos componentes usamos algumas propriedades do Android como match_parent e wrap_content, para que serve cada um deles?