tutorial - como criar sua primeira app para android

INSTITUTO FEDERAL DE MATO GROSSO DO SULTécnico em Informática

Disciplina: Linguagem de Programação 1Prof.º Msc. Sidney Roberto de Sousa

Tutorial – Criando sua primeira app para Android

1 – Fazendo o download das ferramentas de desenvolvimento

Primeiramente, é necessário realizar o download do Android Development ToolkitBundle (ADT Bundle). Este bundle é composto pela SDK do Android (o kit de desenvolvimentode software para Android) e por uma versão da IDE Eclipse já preparada para odesenvolvimento para Android.

Para tanto, você deve acessar o link http://developer.android.com/sdk/index.html eentão clicar no botão Download the SDK. A figura abaixo mostra a página referente com obotão de download. Neste exemplo, o computador onde o site está sendo acessado utiliza oLinux como sistema operacional e, desta forma, o site já preparou para download o bundle paraLinux. Se você utiliza em seu computador o sistema operacional Windows, o site irá prepararautomaticamente para download o bundle para Windows.

Ao clicar no botão de download, irá aparecer uma tela contendo os termos e condiçõesde uso do ADT Bundle. Clique na caixa de seleção com o texto “I have read and agree with theabove terms and conditions” (Eu li e concordo com os termos e condições acima). Cliquetambém em uma das opções de arquitetura de acordo com a arquitetura do seu sistemaoperaciona (32 ou 64 bits). Por fim, clique no botão Download the SDK Bundle para que odownload possa ser inicializado. A figura a seguir exibe a tela de termos e condições.

Figura 1: Página de download do ADT Bundle

http://developer.android.com/sdk/index.html

Observação: O arquivo do bundle é consideravelmente grande (cerca de meiogigabyte – 500 MB). Desta forma, realize o download do bundle o quanto antes possível!

2 – Instalando as ferramentas de desenvolvimento

Após realizar o download do arquivo do bundle (com o nome adt-bundle<sistema-operacional-plataforma>.zip), descompacte-o em uma pasta apropriada a seu gosto. Após,abra a pasta adt-bundle<sistema-operacional-plataforma>/eclipse e execute o programaeclipse.

E pronto! A “instalação” está completa. Esta versão do Eclipse já vem preparada para odesenvolvimento de apps Android.

3 – Criando sua primeira app

Agora que tudo está instalado e configurado, você já pode criar sua primeira appAndroid! Mãos na massa!

Para desenvolver suas apps, você utilizará o Eclipse. Portanto, abra o Eclipse e no menuFile clique na opção New → Other. Após, selecione a opção Android Application Project,conforme ilustrado na figura abaixo. Por fim, clique no botão Next.

Figura 2: Tela de termos e condições

Figura 3: Selecionando a opção de projeto adequada

Na próxima tela, o Eclipse irá te pedir que você defina o nome da sua app, além donome do projeto e do pacote. Neste tutorial, iremos criar uma app para somar dois números, aqual irá se chamar Soma. Assim, tanto o nome da app quanto do projeto será Soma, enquantoque o nome do pacote será br.edu.ifms.lp1.soma. A figura abaixo exibe como ficará a tela comesta configuração.

Se você observar esta tela, você irá perceber que além das definições dos nomes daapp, do projeto e do pacote, ela possui mais quatro campos. O campo Minimum Required SDKdefine qual é a versão mínima (ou mais antiga) do Android que a sua app irá suportar. O campoTarget SDK define qual é a versão máxima (ou mais atual) do Android que a sua app irásuportar. O campo Compile With define qual será a versão do Android a qual você utilizará paracompilar sua app. Por fim, o campo Theme define qual o tema visual que você irá colocar natela da sua app. Para este exemplo, não mude nenhuma destas configurações e clique nobotão Next.

Na tela seguinte, o Eclipse irá apresentar algumas opções de configuração do projeto,conforme ilustrado na figura abaixo. Não iremos mudar nada nesta tela. Clique no botão Next.

Figura 4: Configurando o nome da app e as versões do Android compatíveis

Figura 5: Tela de configuração

Na próxima tela apresentada, é possível definir o ícone da sua app. O ícone default deuma app Android é o mascote da plataforma, conforme ilustrado abaixo. Opcionalmente, vocêpode mudar este ícone, aplicando uma imagem customizada à sua app. Neste exemplo,manteremos o ícone default. Clique no botão Next.

Na penúltima tela de criação do projeto da sua app, o Eclipse irá apresentar a tela dafigura abaixo para te perguntar se você deseja criar uma Activity e, caso deseje, que tipo deActivity você deseja criar. Em resumo, uma Activity é alguma coisa que o usuário deseja fazerna sua app. Assim, uma Activity interage com o usuário e a classe da Activity criar a janelaonde você poderá colocar coisas como campos de texto, rótulos e outros componentes paraque o usuário possa entrar com dados ou mesmo visualizar as saídas que a sua app irá gerar.Assim, não mude nada nesta tela para que assim o Eclipse possa criar uma Activity para suaapp do tipo Blank Activity (Activity em branco). Clique no botão Next.

Figura 6: Tela de configuração do ícone da app

Figura 7: Criando uma Activity em branco

Por fim, chegamos na última tela de criação do projeto da sua primeira app! Na telaanterior, pedimos ao Eclipse para que ele gerasse uma Activity em branco para a nossa app.Assim, nesta última tela o Eclipse irá te pedir para que você defina o nome da Activity. Iremoschamá-la de PrincipalActivity, conforme a figura abaixo exibe. Enfim, clique no botão Finish.

Assim, o projeto da sua primeira app está criado. O Eclipse abrirá para você doisarquivos para edição: a classe PrincipalActivity e um arquivo chamadofragment_principal.xml. Feche este último arquivo e então abra o arquivoactivity_principal.xml (o qual fica na pasta layout). A tela abaixo mostra como ficará a telado Eclipse após estas ações.

Figura 8: Definindo o nome da Activity

Figura 9: Tela do Eclipse após a criação do projeto

3.1 – Desenhando a tela da sua app

Agora que o projeto foi criado, iremos implementar a nossa app em dois passos.Primeiramente, iremos criar a tela pela qual o usuário irá interagir com a nossa app. Por fim,iremos alterar a classe PrincipalActivity para que ela pegue os números informados pelousuário na nossa tela, calcule a soma destes números e então exiba na tela o resultado dasoma. Enfim, vamos ao primeiro passo!

A nossa tela conterá dois campos de texto onde o usuário deverá informar os doisnúmeros a serem somados. A tela conterá também um botão pelo qual o usuário irá acionar ocálculo da soma.

Antes de colocar estes componentes na nossa tela, precisamos definir um layout paraela. A função do layout é organizar e alinhar nossos componentes na tela de tal forma que elesnão fiquem “bagunçados” nela. Para incluir um layout na tela da nossa app, abra a pastaLayouts na view Pallete e então clique e arraste o ícone Linear Layout (vertical) para atela da app, conforme mostra a figura abaixo.

Após incluir um layout na tela da app, incluiremos o campo de texto para que o usuárioinforme o primeiro número da soma. Porém, se incluirmos apenas o campo de texto, o usuáriopoderá não entender qual a finalidade daquele campo na tela. Assim, antes de incluir o campode texto, incluiremos um rótulo para informar o que desejamos que o usuário informe nocampo de texto.

Para incluir o rótulo, usaremos o ícone Medium Text da pasta Form Widgets que ficadentro da view Pallete. Para incluir o rótulo na tela da sua app, clique e arraste o íconeMedium Text até a tela da app. A figura a seguir mostra como ficará sua tela após esteprocedimento.

Figura 10: Incluindo um layout na tela da app

Obviamente, não queremos que o texto “Medium Text” fique neste rótulo. Na verdade,incluiremos o texto “Primeiro número:” neste rótulo. Para tanto, clique com o botão direitosobre o rótulo criado e então clique na opção Edit Text. Altere então o texto do rótulo,colocando o texto “Primeiro número:” no lugar. A sua tela deve ficar assim como na figuraabaixo.

Agora que já criamos o rótulo para o campo, vamos enfim incluir o campo de texto paraque o usuário possa informar o primeiro número da soma. Para tanto, abra a pasta Text Fieldsna view Pallete e então clique e arrasque o ícone Number (Decimal) para a tela da app, logoabaixo do rótulo que criamos anteriormente. A figura a seguir mostra como ficará a tela apóseste procedimento.

Figura 11: Criando um rótulo

Figura 12: Corrigindo o rótulo

Repita os procedimentos acima para incluir um rótulo para o campo de texto dosegundo número e então incluir o campo para o segundo número. Após estes procedimentos, atela da sua app deverá ficar como a da figura abaixo.

Para terminar a nossa tela, precisamos incluir o botão pelo qual o usuário irá solicitar asoma dos dois números os quais ele digitou. Para tanto, abra a pasta Form Widgets na viewPallete e então clique e arraste o ícone Button logo abaixo do segundo campo de texto. A suatela deverá ficar como na figura abaixo.

Figura 13: Incluindo um campo para o primeiro número

Figura 14: Tela após a inclusão dos dois campos

Figura 15: Tela finalizada

E voilá! A nossa tela está pronta! Na verdade, quase...Ao passo que desenhávamos nossa tela, o Eclipse gerava o código XML necessário para

defini-la. Para visualizar este código, basta clicar na aba activity_principal.xml que ficaabaixo na tela e ao lado da aba Graphical Layout. Após clicar nesta aba, o código abaixo seráexibido.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="br.edu.ifms.lp1.soma.PrincipalActivity" tools:ignore="MergeRootFrame" >

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >

<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Primeiro número:" android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText android:id="@+id/editText1" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:inputType="numberDecimal" >

<requestFocus /> </EditText>

<TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Segundo número:" android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText android:id="@+id/editText2" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:inputType="numberDecimal" />

<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Somar" />

</LinearLayout>

</FrameLayout>

Não entraremos em maiores detalhes deste código, mas é importante que você oobserve e estude a fim de tentar entender como a sua tela foi definida. Porém, observe as tagsEditText. Elas definem os campos de texto dos números a serem digitados pelo usuário. Oprimeiro atributo destas tags (android:id) define o identificador para cada campo. Estesidentificadores serão utilizados pela classe PrincipalActivity para recuperar os númerosdigitados pelo usuário.

Assim, alteraremos os valores destes atributos, mudando os valores editText1 eeditText2 para campoNumero1 e campoNumero2. Além disso, trocaremos também o valordo atributo android:id da tag Button (que define o botão da tela) de button1 parabotaoSoma. Assim, o código do arquivo activity_principal.xml deverá ficar como a seguir.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="br.edu.ifms.lp1.soma.PrincipalActivity" tools:ignore="MergeRootFrame" >

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >

<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Primeiro número:" android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText android:id="@+id/campoNumero1" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:inputType="numberDecimal" >

<requestFocus /> </EditText>

<TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Segundo número:" android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText android:id="@+id/campoNumero2" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:inputType="numberDecimal" />

<Button android:id="@+id/botaoSoma" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Somar" />

</LinearLayout>

</FrameLayout>

Agora sim, a tela está finalizada!

3.2 – Implementando a lógica de negócios da sua app

Neste passo, iremos alterar o código da classe PrincipalActivity para calcular a somados números e exibir o resultado na tela. Para tanto, precisaremos implementar os seguintesprocedimentos:

• Adicionar um evento no botão da tela de tal forma que, quando o usuário apertar obotão, o cálculo dos números seja acionado;

• Recuperar os dois números informados pelo usuário na tela;• Realizar o cálculo da soma;• Exibir o resultado na tela.

Inicialmente, o código da classe PrincipalActivity deve estar como exibido abaixo.

package br.edu.ifms.lp1.soma;

import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v7.app.ActionBarActivity;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;

public class PrincipalActivity extends ActionBarActivity {

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.activity_principal);

if (savedInstanceState == null) {getSupportFragmentManager().beginTransaction()

.add(R.id.container, new PlaceholderFragment()).commit();}

}

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.principal, menu);return true;

}

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();if (id == R.id.action_settings) {

return true;}return super.onOptionsItemSelected(item);

}

/** * A placeholder fragment containing a simple view. */public static class PlaceholderFragment extends Fragment {

public PlaceholderFragment() {}

@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {View rootView = inflater.inflate(R.layout.fragment_principal,

container, false);return rootView;

}}

}

Para você, estudante da disciplina Linguagem de Programação 1, este código pode lheparecer monstruoso, cheio de coisas que você não deve entender ainda. Porém, não seassuste! Você irá mexer apenas em um ponto específico deste código e irá manter todo osresto intacto.

Neste exemplo, iremos alterar apenas o código do método onCreate. Começaremosapagando o código do único if que ele possuem em seu corpo. Após esta alteração, o métodoonCreate deverá ficar como a seguir:



// Começaremos por aqui!}

Primeiramente, recuperaremos o botão da nossa tela para depois podermos adicionar oevento que irá acionar o cálculo da soma da nossa app. Para tanto, modifique o código dométodo onCreate conforme abaixo.



// Começaremos por aqui!

/** * Primeiramente, vamos recuperar o botão da nossa tela */Button botao = (Button) findViewById(R.id.botaoSoma);

}

Após recuperar o botão, iremos adicionar o código a ser acionado quando o usuáriopressionar o botão na tela. Este código é chamado de Listener (ouvinte) e sua função é ficarsempre atento a fim de verificar se o nosso botão foi pressionado. Abaixo, o código modificadopara incluir o Listener.




/** * Primeiramente, vamos recuperar o botão da nossa tela */Button botao = (Button) findViewById(R.id.botaoSoma);botao.setOnClickListener(new View.OnClickListener() {

/** * Quando o usuário pressionar o botão, este código será acionado */@Overridepublic void onClick(View v) {

/** * É aqui que implementaremos o cálculo da soma e apresentaremos * o resultado na tela! */

}});

}

Agora, recuperaremos os dois campos de texto que contém os números que o usuáriodigitou. Para tanto, o código do método onCreate deve ficar como a seguir.







// Primeiro, recuperaremos os dois campos de textoEditText campoNumero1 = (EditText) findViewById(R.id.campoNumero1);EditText campoNumero2 = (EditText) findViewById(R.id.campoNumero2);

}});

}

Em seguida, pegaremos o texto digitado dentro dos campos. Como os campos sãotextuais, os números digitados pelo usuário estão representados como strings. Aplicaremos ométodo trim() ao final das instruções a fim de remover espaços em branco no começo e nofinal das strings a fim de evitar possível problemas. Abaixo, o método alterado.








// Agora, pegaremos os textos dentro dos camposString texto1 = campoNumero1.getText().toString().trim();String texto2 = campoNumero2.getText().toString().trim();

}});

}

Como os valores estão representados como strings, precisamos convertê-los paranúmeros reais antes de realizar o cálculo. Porém, isto só será possível caso o usuário tenha defato informado os dois valores. Assim, verificaremos se as duas strings não estão vazias,realizaremos a conversão e então somaremos os valores.









// Converte as strings em números reais e realiza o cálculoif (texto1.length() > 0 && texto2.length() > 0) {

double numero1 = Double.parseDouble(texto1);double numero2 = Double.parseDouble(texto2);double resultado = numero1 + numero2;

}

}});

}

Nossa app está quase finalizada! Agora, falta exibir o resultado na tela. Caso o usuáriotenha informado os dois números, exibiremos o resultado da soma na tela. Caso contrário,exibiremos uma mensagem informando o problema. Abaixo, o código final do métodoonCreate.









String resposta = "";// Converte as strings em números reais e realiza o cálculoif (texto1.length() > 0 && texto2.length() > 0) {

double numero1 = Double.parseDouble(texto1);double numero2 = Double.parseDouble(texto2);double resultado = numero1 + numero2;resposta += resultado;

} else {// Se o usuário não informou os dois números...resposta = "Você deve informar os dois números!";

}// Exibe o resultado na telaAlertDialog.Builder builder = new AlertDialog.Builder(

PrincipalActivity.this);builder.setMessage(resposta).setTitle("Resultado");AlertDialog dialog = builder.create();dialog.show();

}});

}

Pronto! A nossa app está pronta! \o/

3.3 – Executando sua app

Para executar a sua app, digite CTRL + F11. Porém, ao tentar executar sua app pelaprimeira vez, o Eclipse irá te informar que nenhum Android Virtual Device (AVD) foi encontradoe se você deseja adicionar um, conforme ilutrado abaixo.

Um AVD consiste em um emulador de smartphone Android no qual você pode executaras suas apps. Opcionalmente, você pode executar suas apps diretamente em um smartphoneAndroid real (pesquise sobre isto!). Na tela acima, clique em Yes.

Na tela a seguir, clique na opção Launch a new Android Virtual Device e após no botãoManager. A figura abaixo exibe esta tela.

Figura 16: Eclipse solicitando a inclusão de um AVD

Figura 17: Tela de escolha do dispositivo Android

Na próxima tela, clique em New para criar uma nova AVD.

A tela de criação de AVD será exibida. Para o nosso exemplo, emularemos umsmartphone Nexus S. Assim, realize a configuração conforme a tela abaixo e clique no botãoOK.

Após criar a AVD, clique no botão Start, escolha a opção Wipe User Data e então cliqueno botão Launch. Assim, a AVD será inicializada!

Feche a AVD e execute novamente a sua app digitando CTRL+F11. A sua app seráexecutada!

Figura 18: Tela de escolha de AVDs

Figura 19: Criando uma nova AVD

3.4 – That's all, folks!

Bem, espero que com este tutorial você consiga implementar a sua primeira app!Porém, lembre-se sempre: qualquer pessoa dotada de curiosidade e um computador cominternet pode dominar o mundo!

Figura 20: AVD sendo inicializado

Figura 21: App em execução

tutorial - como criar sua primeira app para android

Technology