Tutorial - Como criar sua primeira app para Android

  • Published on
    18-Dec-2014

  • View
    1.444

  • Download
    4

DESCRIPTION

Breve tutorial com um guia passo a passo para configurar um ambiente de desenvolvimento para Android e criar uma aplicao bem simples.

Transcript

  • 1. INSTITUTO FEDERAL DE MATO GROSSO DO SUL Tcnico em Informtica Disciplina: Linguagem de Programao 1 Prof. Msc. Sidney Roberto de Sousa Tutorial Criando sua primeira app para Android 1 Fazendo o download das ferramentas de desenvolvimento Primeiramente, necessrio realizar o download do Android Development Toolkit Bundle (ADT Bundle). Este bundle composto pela SDK do Android (o kit de desenvolvimento de software para Android) e por uma verso da IDE Eclipse j preparada para o desenvolvimento para Android. Para tanto, voc deve acessar o link http://developer.android.com/sdk/index.html e ento clicar no boto Download the SDK. A figura abaixo mostra a pgina referente com o boto de download. Neste exemplo, o computador onde o site est sendo acessado utiliza o Linux como sistema operacional e, desta forma, o site j preparou para download o bundle para Linux. Se voc utiliza em seu computador o sistema operacional Windows, o site ir preparar automaticamente para download o bundle para Windows. Ao clicar no boto de download, ir aparecer uma tela contendo os termos e condies de uso do ADT Bundle. Clique na caixa de seleo com o texto I have read and agree with the above terms and conditions (Eu li e concordo com os termos e condies acima). Clique tambm em uma das opes de arquitetura de acordo com a arquitetura do seu sistema operaciona (32 ou 64 bits). Por fim, clique no boto Download the SDK Bundle para que o download possa ser inicializado. A figura a seguir exibe a tela de termos e condies. Figura 1: Pgina de download do ADT Bundle
  • 2. Observao: O arquivo do bundle consideravelmente grande (cerca de meio gigabyte 500 MB). Desta forma, realize o download do bundle o quanto antes possvel! 2 Instalando as ferramentas de desenvolvimento Aps realizar o download do arquivo do bundle (com o nome adt-bundle.zip), descompacte-o em uma pasta apropriada a seu gosto. Aps, abra a pasta adt-bundle/eclipse e execute o programa eclipse. E pronto! A instalao est completa. Esta verso do Eclipse j vem preparada para o desenvolvimento de apps Android. 3 Criando sua primeira app Agora que tudo est instalado e configurado, voc j pode criar sua primeira app Android! Mos na massa! Para desenvolver suas apps, voc utilizar o Eclipse. Portanto, abra o Eclipse e no menu File clique na opo New Other. Aps, selecione a opo Android Application Project, conforme ilustrado na figura abaixo. Por fim, clique no boto Next. Figura 2: Tela de termos e condies Figura 3: Selecionando a opo de projeto adequada
  • 3. Na prxima tela, o Eclipse ir te pedir que voc defina o nome da sua app, alm do nome do projeto e do pacote. Neste tutorial, iremos criar uma app para somar dois nmeros, a qual ir se chamar Soma. Assim, tanto o nome da app quanto do projeto ser Soma, enquanto que o nome do pacote ser br.edu.ifms.lp1.soma. A figura abaixo exibe como ficar a tela com esta configurao. Se voc observar esta tela, voc ir perceber que alm das definies dos nomes da app, do projeto e do pacote, ela possui mais quatro campos. O campo Minimum Required SDK define qual a verso mnima (ou mais antiga) do Android que a sua app ir suportar. O campo Target SDK define qual a verso mxima (ou mais atual) do Android que a sua app ir suportar. O campo Compile With define qual ser a verso do Android a qual voc utilizar para compilar sua app. Por fim, o campo Theme define qual o tema visual que voc ir colocar na tela da sua app. Para este exemplo, no mude nenhuma destas configuraes e clique no boto Next. Na tela seguinte, o Eclipse ir apresentar algumas opes de configurao do projeto, conforme ilustrado na figura abaixo. No iremos mudar nada nesta tela. Clique no boto Next. Figura 4: Configurando o nome da app e as verses do Android compatveis Figura 5: Tela de configurao
  • 4. Na prxima tela apresentada, possvel definir o cone da sua app. O cone default de uma 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 boto Next. Na penltima tela de criao do projeto da sua app, o Eclipse ir apresentar a tela da figura abaixo para te perguntar se voc deseja criar uma Activity e, caso deseje, que tipo de Activity voc deseja criar. Em resumo, uma Activity alguma coisa que o usurio deseja fazer na sua app. Assim, uma Activity interage com o usurio e a classe da Activity criar a janela onde voc poder colocar coisas como campos de texto, rtulos e outros componentes para que o usurio possa entrar com dados ou mesmo visualizar as sadas que a sua app ir gerar. Assim, no mude nada nesta tela para que assim o Eclipse possa criar uma Activity para sua app do tipo Blank Activity (Activity em branco). Clique no boto Next. Figura 6: Tela de configurao do cone da app Figura 7: Criando uma Activity em branco
  • 5. Por fim, chegamos na ltima tela de criao do projeto da sua primeira app! Na tela anterior, 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. Iremos cham-la de PrincipalActivity, conforme a figura abaixo exibe. Enfim, clique no boto Finish. Assim, o projeto da sua primeira app est criado. O Eclipse abrir para voc dois arquivos para edio: a classe PrincipalActivity e um arquivo chamado fragment_principal.xml. Feche este ltimo arquivo e ento abra o arquivo activity_principal.xml (o qual fica na pasta layout). A tela abaixo mostra como ficar a tela do Eclipse aps estas aes. Figura 8: Definindo o nome da Activity Figura 9: Tela do Eclipse aps a criao do projeto
  • 6. 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 usurio ir interagir com a nossa app. Por fim, iremos alterar a classe PrincipalActivity para que ela pegue os nmeros informados pelo usurio na nossa tela, calcule a soma destes nmeros e ento exiba na tela o resultado da soma. Enfim, vamos ao primeiro passo! A nossa tela conter dois campos de texto onde o usurio dever informar os dois nmeros a serem somados. A tela conter tambm um boto pelo qual o usurio ir acionar o clculo da soma. Antes de colocar estes componentes na nossa tela, precisamos definir um layout para ela. A funo do layout organizar e alinhar nossos componentes na tela de tal forma que eles no fiquem bagunados nela. Para incluir um layout na tela da nossa app, abra a pasta Layouts na view Pallete e ento clique e arraste o cone Linear Layout (vertical) para a tela da app, conforme mostra a figura abaixo. Aps incluir um layout na tela da app, incluiremos o campo de texto para que o usurio informe o primeiro nmero da soma. Porm, se incluirmos apenas o campo de texto, o usurio poder no entender qual a finalidade daquele campo na tela. Assim, antes de incluir o campo de texto, incluiremos um rtulo para informar o que desejamos que o usurio informe no campo de texto. Para incluir o rtulo, usaremos o cone Medium Text da pasta Form Widgets que fica dentro da view Pallete. Para incluir o rtulo na tela da sua app, clique e arraste o cone Medium Text at a tela da app. A figura a seguir mostra como ficar sua tela aps este procedimento. Figura 10: Incluindo um layout na tela da app
  • 7. Obviamente, no queremos que o texto Medium Text fique neste rtulo. Na verdade, incluiremos o texto Primeiro nmero: neste rtulo. Para tanto, clique com o boto direito sobre o rtulo criado e ento clique na opo Edit Text. Altere ento o texto do rtulo, colocando o texto Primeiro nmero: no lugar. A sua tela deve ficar assim como na figura abaixo. Agora que j criamos o rtulo para o campo, vamos enfim incluir o campo de texto para que o usurio possa informar o primeiro nmero da soma. Para tanto, abra a pasta Text Fields na view Pallete e ento clique e arrasque o cone Number (Decimal) para a tela da app, logo abaixo do rtulo que criamos anteriormente. A figura a seguir mostra como ficar a tela aps este procedimento. Figura 11: Criando um rtulo Figura 12: Corrigindo o rtulo
  • 8. Repita os procedimentos acima para incluir um rtulo para o campo de texto do segundo nmero e ento incluir o campo para o segundo nmero. Aps estes procedimentos, a tela da sua app dever ficar como a da figura abaixo. Para terminar a nossa tela, precisamos incluir o boto pelo qual o usurio ir solicitar a soma dos dois nmeros os quais ele digitou. Para tanto, abra a pasta Form Widgets na view Pallete e ento clique e arraste o cone Button logo abaixo do segundo campo de texto. A sua tela dever ficar como na figura abaixo. Figura 13: Incluindo um campo para o primeiro nmero Figura 14: Tela aps a incluso dos dois campos Figura 15: Tela finalizada
  • 9. E voil! A nossa tela est pronta! Na verdade, quase... Ao passo que desenhvamos nossa tela, o Eclipse gerava o cdigo XML necessrio para defini-la. Para visualizar este cdigo, basta clicar na aba activity_principal.xml que fica abaixo na tela e ao lado da aba Graphical Layout. Aps clicar nesta aba, o cdigo abaixo ser exibido. No entraremos em maiores detalhes deste cdigo, mas importante que voc o observe e estude a fim de tentar entender como a sua tela foi definida. Porm, observe as tags EditText. Elas definem os campos de texto dos nmeros a serem digitados pelo usurio. O primeiro atributo destas tags (android:id) define o identificador para cada campo. Estes identificadores sero utilizados pela classe PrincipalActivity para recuperar os nmeros digitados pelo usurio. Assim, alteraremos os valores destes atributos, mudando os valores editText1 e editText2 para campoNumero1 e campoNumero2. Alm disso, trocaremos tambm o valor do atributo android:id da tag Button (que define o boto da tela) de button1 para botaoSoma. Assim, o cdigo do arquivo activity_principal.xml dever ficar como a seguir.
  • 10. Agora sim, a tela est finalizada! 3.2 Implementando a lgica de negcios da sua app Neste passo, iremos alterar o cdigo da classe PrincipalActivity para calcular a soma dos nmeros e exibir o resultado na tela. Para tanto, precisaremos implementar os seguintes procedimentos: Adicionar um evento no boto da tela de tal forma que, quando o usurio apertar o boto, o clculo dos nmeros seja acionado; Recuperar os dois nmeros informados pelo usurio na tela; Realizar o clculo da soma; Exibir o resultado na tela. Inicialmente, o cdigo da classe PrincipalActivity deve estar como exibido abaixo.
  • 11. 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 { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_principal); if (savedInstanceState == null) { getSupportFragmentManager().beginTransaction() .add(R.id.container, new PlaceholderFragment()).commit(); } } @Override public 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; } @Override public 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() { } @Override public 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 Programao 1, este cdigo pode lhe parecer monstruoso, cheio de coisas que voc no deve entender ainda. Porm, no se assuste! Voc ir mexer apenas em um ponto especfico deste cdigo e ir manter todo os resto intacto. Neste exemplo, iremos alterar apenas o cdigo do mtodo onCreate. Comearemos apagando o cdigo do nico if que ele possuem em seu corpo. Aps esta alterao, o mtodo onCreate dever ficar como a seguir:
  • 12. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_principal); // Comearemos por aqui! } Primeiramente, recuperaremos o boto da nossa tela para depois podermos adicionar o evento que ir acionar o clculo da soma da nossa app. Para tanto, modifique o cdigo do mtodo onCreate conforme abaixo. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_principal); // Comearemos por aqui! /** * Primeiramente, vamos recuperar o boto da nossa tela */ Button botao = (Button) findViewById(R.id.botaoSoma); } Aps recuperar o boto, iremos adicionar o cdigo a ser acionado quando o usurio pressionar o boto na tela. Este cdigo chamado de Listener (ouvinte) e sua funo ficar sempre atento a fim de verificar se o nosso boto foi pressionado. Abaixo, o cdigo modificado para incluir o Listener. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_principal); // Comearemos por aqui! /** * Primeiramente, vamos recuperar o boto da nossa tela */ Button botao = (Button) findViewById(R.id.botaoSoma); botao.setOnClickListener(new View.OnClickListener() { /** * Quando o usurio pressionar o boto, este cdigo ser acionado */ @Override public void onClick(View v) { /** * aqui que implementaremos o clculo da soma e apresentaremos * o resultado na tela! */ } }); } Agora, recuperaremos os dois campos de texto que contm os nmeros que o usurio digitou. Para tanto, o cdigo do mtodo onCreate deve ficar como a seguir.
  • 13. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_principal); // Comearemos por aqui! /** * Primeiramente, vamos recuperar o boto da nossa tela */ Button botao = (Button) findViewById(R.id.botaoSoma); botao.setOnClickListener(new View.OnClickListener() { /** * Quando o usurio pressionar o boto, este cdigo ser acionado */ @Override public void onClick(View v) { /** * aqui que implementaremos o clculo da soma e apresentaremos * o resultado na tela! */ // Primeiro, recuperaremos os dois campos de texto EditText 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 so textuais, os nmeros digitados pelo usurio esto representados como strings. Aplicaremos o mtodo trim() ao final das instrues a fim de remover espaos em branco no comeo e no final das strings a fim de evitar possvel problemas. Abaixo, o mtodo alterado. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_principal); // Comearemos por aqui! /** * Primeiramente, vamos recuperar o boto da nossa tela */ Button botao = (Button) findViewById(R.id.botaoSoma); botao.setOnClickListener(new View.OnClickListener() { /** * Quando o usurio pressionar o boto, este cdigo ser acionado */ @Override public void onClick(View v) { /** * aqui que implementaremos o clculo da soma e apresentaremos * o resultado na tela! */ // Primeiro, recuperaremos os dois campos de texto EditText campoNumero1 = (EditText) findViewById(R.id.campoNumero1); EditText campoNumero2 = (EditText) findViewById(R.id.campoNumero2); // Agora, pegaremos os textos dentro dos campos String texto1 = campoNumero1.getText().toString().trim(); String texto2 = campoNumero2.getText().toString().trim(); } }); } Como os valores esto representados como strings, precisamos convert-los para nmeros reais antes de realizar o clculo. Porm, isto s ser possvel caso o usurio tenha de fato informado os dois valores. Assim, verificaremos se as duas strings no esto vazias, realizaremos a converso e ento somaremos os valores.
  • 14. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_principal); // Comearemos por aqui! /** * Primeiramente, vamos recuperar o boto da nossa tela */ Button botao = (Button) findViewById(R.id.botaoSoma); botao.setOnClickListener(new View.OnClickListener() { /** * Quando o usurio pressionar o boto, este cdigo ser acionado */ @Override public void onClick(View v) { /** * aqui que implementaremos o clculo da soma e apresentaremos * o resultado na tela! */ // Primeiro, recuperaremos os dois campos de texto EditText campoNumero1 = (EditText) findViewById(R.id.campoNumero1); EditText campoNumero2 = (EditText) findViewById(R.id.campoNumero2); // Agora, pegaremos os textos dentro dos campos String texto1 = campoNumero1.getText().toString().trim(); String texto2 = campoNumero2.getText().toString().trim(); // Converte as strings em nmeros reais e realiza o clculo if (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 usurio tenha informado os dois nmeros, exibiremos o resultado da soma na tela. Caso contrrio, exibiremos uma mensagem informando o problema. Abaixo, o cdigo final do mtodo onCreate. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_principal); // Comearemos por aqui! /** * Primeiramente, vamos recuperar o boto da nossa tela */ Button botao = (Button) findViewById(R.id.botaoSoma); botao.setOnClickListener(new View.OnClickListener() { /** * Quando o usurio pressionar o boto, este cdigo ser acionado */ @Override public void onClick(View v) { /** * aqui que implementaremos o clculo da soma e apresentaremos * o resultado na tela! */ // Primeiro, recuperaremos os dois campos de texto EditText campoNumero1 = (EditText) findViewById(R.id.campoNumero1); EditText campoNumero2 = (EditText) findViewById(R.id.campoNumero2);
  • 15. // Agora, pegaremos os textos dentro dos campos String texto1 = campoNumero1.getText().toString().trim(); String texto2 = campoNumero2.getText().toString().trim(); String resposta = ""; // Converte as strings em nmeros reais e realiza o clculo if (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 usurio no informou os dois nmeros... resposta = "Voc deve informar os dois nmeros!"; } // Exibe o resultado na tela AlertDialog.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. Porm, ao tentar executar sua app pela primeira vez, o Eclipse ir te informar que nenhum Android Virtual Device (AVD) foi encontrado e se voc deseja adicionar um, conforme ilutrado abaixo. Um AVD consiste em um emulador de smartphone Android no qual voc pode executar as suas apps. Opcionalmente, voc pode executar suas apps diretamente em um smartphone Android real (pesquise sobre isto!). Na tela acima, clique em Yes. Na tela a seguir, clique na opo Launch a new Android Virtual Device e aps no boto Manager. A figura abaixo exibe esta tela. Figura 16: Eclipse solicitando a incluso de um AVD Figura 17: Tela de escolha do dispositivo Android
  • 16. Na prxima tela, clique em New para criar uma nova AVD. A tela de criao de AVD ser exibida. Para o nosso exemplo, emularemos um smartphone Nexus S. Assim, realize a configurao conforme a tela abaixo e clique no boto OK. Aps criar a AVD, clique no boto Start, escolha a opo Wipe User Data e ento clique no boto 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
  • 17. 3.4 That's all, folks! Bem, espero que com este tutorial voc consiga implementar a sua primeira app! Porm, lembre-se sempre: qualquer pessoa dotada de curiosidade e um computador com internet pode dominar o mundo! Figura 20: AVD sendo inicializado Figura 21: App em execuo