Criando sua primeira app Android

INSTITUTO FEDERAL DE MATO GROSSO DO SUL
Técnico em Informática
Disciplina: Linguagem de Programação 1
Prof.º 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 Toolkit
Bundle (ADT Bundle). Este bundle é composto pela SDK do Android (o kit de desenvolvimento
de software para Android) e por uma versão 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
então clicar no botão Download the SDK. A figura abaixo mostra a página referente com o
botão 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 botão de download, irá aparecer uma tela contendo os termos e condições
de uso do ADT Bundle. Clique na caixa de seleção com o texto “I have read and agree with the
above terms and conditions” (Eu li e concordo com os termos e condições acima). Clique
também em uma das opções de arquitetura de acordo com a arquitetura do seu sistema
operaciona (32 ou 64 bits). Por fim, clique no botão Download the SDK Bundle para que o
download possa ser inicializado. A figura a seguir exibe a tela de termos e condições.
Figura 1: Página de download do ADT Bundle

Observação: O arquivo do bundle é consideravelmente grande (cerca de meio
gigabyte – 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 programa
eclipse.
E pronto! A “instalação” está completa. Esta versão 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! Mãos na massa!
Para desenvolver suas apps, você utilizará o Eclipse. Portanto, abra o Eclipse e no menu
File 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 do
nome do projeto e do pacote. Neste tutorial, iremos criar uma app para somar dois números, 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 configuração.
Se você observar esta tela, você irá perceber que além das definições dos nomes da
app, do projeto e do pacote, ela possui mais quatro campos. O campo Minimum Required SDK
define qual é a versão mínima (ou mais antiga) do Android que a sua app irá suportar. O campo
Target 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á 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, não mude nenhuma destas configurações e clique no
botã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 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 botão Next.
Na penúltima tela de criação 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 usuário deseja fazer
na sua app. Assim, uma Activity interage com o usuário e a classe da Activity criar a janela
onde você poderá colocar coisas como campos de texto, rótulos e outros componentes para
que 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 sua
app 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 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 botão Finish.
Assim, o projeto da sua primeira app está criado. O Eclipse abrirá para você dois
arquivos para edição: a classe PrincipalActivity e um arquivo chamado
fragment_principal.xml. Feche este último arquivo e então abra o arquivo
activity_principal.xml (o qual fica na pasta layout). A tela abaixo mostra como ficará a tela
do 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 pelo
usuário na nossa tela, calcule a soma destes números e então exiba na tela o resultado da
soma. Enfim, vamos ao primeiro passo!
A nossa tela conterá dois campos de texto onde o usuário deverá informar os dois
números a serem somados. A tela conterá também um botão pelo qual o usuário irá acionar o
cálculo da soma.
Antes de colocar estes componentes na nossa tela, precisamos definir um layout para
ela. A função do layout é organizar e alinhar nossos componentes na tela de tal forma que eles
não fiquem “bagunçados” nela. Para incluir um layout na tela da nossa app, abra a pasta
Layouts na view Pallete e então clique e arraste o ícone Linear Layout (vertical) para a
tela 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ário
informe o primeiro número da soma. Porém, se incluirmos apenas o campo de texto, o usuário
poderá não entender qual a finalidade daquele campo na tela. Assim, antes de incluir o campo
de texto, incluiremos um rótulo para informar o que desejamos que o usuário informe no
campo de texto.
Para incluir o rótulo, usaremos o ícone Medium Text da pasta Form Widgets que fica
dentro da view Pallete. Para incluir o rótulo 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 após este
procedimento.
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 direito
sobre 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 figura
abaixo.
Agora que já criamos o rótulo para o campo, vamos enfim incluir o campo de texto para
que o usuário possa informar o primeiro número da soma. Para tanto, abra a pasta Text Fields
na view Pallete e então clique e arrasque o ícone Number (Decimal) para a tela da app, logo
abaixo do rótulo que criamos anteriormente. A figura a seguir mostra como ficará a tela após
este 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 do
segundo número e então incluir o campo para o segundo número. Após estes procedimentos, a
tela 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 a
soma dos dois números os quais ele digitou. Para tanto, abra a pasta Form Widgets na view
Pallete e então 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 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 fica
abaixo 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: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:ems="10"
android:inputType="numberDecimal" >
<requestFocus />
</EditText>
<TextView
android:text="Segundo número:"
<EditText
android:id="@+id/editText2"
android:ems="10"
android:inputType="numberDecimal" />
<Button
android:id="@+id/button1"
android:text="Somar" />
</LinearLayout>
</FrameLayout>
Não entraremos em maiores detalhes deste código, mas é importante que você o
observe e estude a fim de tentar entender como a sua tela foi definida. Porém, observe as tags
EditText. Elas definem os campos de texto dos números a serem digitados pelo usuário. O
primeiro atributo destas tags (android:id) define o identificador para cada campo. Estes
identificadores serão utilizados pela classe PrincipalActivity para recuperar os números
digitados pelo usuário.
Assim, alteraremos os valores destes atributos, mudando os valores editText1 e
editText2 para campoNumero1 e campoNumero2. Além disso, trocaremos também o valor
do atributo android:id da tag Button (que define o botão da tela) de button1 para
botaoSoma. 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"
tools:context="br.edu.ifms.lp1.soma.PrincipalActivity"
tools:ignore="MergeRootFrame" >
<LinearLayout
android:orientation="vertical" >
<TextView
android:text="Primeiro número:"
<EditText
android:id="@+id/campoNumero1"
android:ems="10"
android:inputType="numberDecimal" >
<requestFocus />
</EditText>
<TextView
android:text="Segundo número:"
<EditText
android:id="@+id/campoNumero2"
android:ems="10"
android:inputType="numberDecimal" />
<Button
android:id="@+id/botaoSoma"
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 soma
dos números e exibir o resultado na tela. Para tanto, precisaremos implementar os seguintes
procedimentos:
• Adicionar um evento no botão da tela de tal forma que, quando o usuário apertar o
botã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 {
@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 Programação 1, este código pode lhe
parecer monstruoso, cheio de coisas que você não deve entender ainda. Porém, não se
assuste! Você irá mexer apenas em um ponto específico deste código e irá manter todo os
resto intacto.
Neste exemplo, iremos alterar apenas o código do método onCreate. Começaremos
apagando o código do único if que ele possuem em seu corpo. Após esta alteração, o método
onCreate deverá ficar como a seguir:

@Override
// Começaremos por aqui!
}
Primeiramente, recuperaremos o botão da nossa tela para depois podermos adicionar o
evento que irá acionar o cálculo da soma da nossa app. Para tanto, modifique o código do
método onCreate conforme abaixo.
@Override
/**
* 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ário
pressionar o botão na tela. Este código é chamado de Listener (ouvinte) e sua função é ficar
sempre atento a fim de verificar se o nosso botão foi pressionado. Abaixo, o código modificado
para incluir o Listener.
@Override
/**
*/
botao.setOnClickListener(new View.OnClickListener() {
/**
* Quando o usuário pressionar o botão, este código será acionado
*/
@Override
public 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ário
digitou. Para tanto, o código do método onCreate deve ficar como a seguir.

@Override
/**
*/
/**
*/
@Override
/**
*/
// Primeiro, recuperaremos os dois campos de texto
EditText campoNumero1 = (EditText) findViewById(R.id.campoNumero1);
}
});
}
Em seguida, pegaremos o texto digitado dentro dos campos. Como os campos são
textuais, os números digitados pelo usuário estão representados como strings. Aplicaremos o
método trim() ao final das instruções a fim de remover espaços em branco no começo e no
final das strings a fim de evitar possível problemas. Abaixo, o método alterado.
@Override
/**
*/
/**
*/
@Override
/**
*/
// Agora, pegaremos os textos dentro dos campos
String texto1 = campoNumero1.getText().toString().trim();
}
});
}
Como os valores estão representados como strings, precisamos convertê-los para
números reais antes de realizar o cálculo. Porém, isto só será possível caso o usuário tenha de
fato 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.

@Override
/**
*/
/**
*/
@Override
/**
*/
// Converte as strings em números reais e realiza o cálculo
if (texto1.length() > 0 && texto2.length() > 0) {
double numero1 = Double.parseDouble(texto1);
double resultado = numero1 + numero2;
}
}
});
}
Nossa app está quase finalizada! Agora, falta exibir o resultado na tela. Caso o usuário
tenha 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étodo
onCreate.
@Override
/**
*/
/**
*/
@Override
/**
*/

String resposta = "";
// Converte as strings em números reais e realiza o cálculo
if (texto1.length() > 0 && texto2.length() > 0) {
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 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. Porém, 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 opção Launch a new Android Virtual Device e após no botão
Manager. 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 um
smartphone Nexus S. Assim, realize a configuração conforme a tela abaixo e clique no botão
OK.
Após criar a AVD, clique no botão Start, escolha a opção Wipe User Data e então clique
no 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 com
internet pode dominar o mundo!
Figura 20: AVD sendo inicializado
Figura 21: App em execução

Criando sua primeira app Android

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Criando sua primeira app Android

Ähnlich wie Criando sua primeira app Android (20)

Mehr von Sidney Roberto

Mehr von Sidney Roberto (20)

Criando sua primeira app Android