Bom vamos começar nosso desenvolvimento com uma calculadora simples.
Com o tempo eu irei criando mais artigos com mais exemplos de aplicações.
Primeiramente crie um novo projeto Android como mostrei na parte anterior, com as seguintes propriedades:
- Project Name: calculadora
- Build Target: Android 2.2
- Application Name: Calculadora 1.0
- Package Name: br.com.calculadora
- CreateActivity: calcActivity
- Min. SDK Version: 8
Primeiramente clique 2 vezes no arquivo
main.xml na pasta res -> layout, esse arquivo é o responsável pela interface gráfica da nossa aplicação, como vocês podem ver na tela abaixo:
Reparem que na parte de cima nós temos algumas propriedades:
- A primeira que temos é a da resolução do dispositivo, clique nele e selecione 3.2in HVGA (ADAP2), que no caso é o padrão 320x480 px. Note que ele aumentou a janela para adicionarmos nossos widgets;
- Ao lado da resolução temos a orientação: Portrait ou Landscape, ou seja, Retrato ou Paisagem, deixe como Portrait(Retrato);
- Ao lado temos os temas, deixe como está. E por último temos a plataforma usada, ou seja, Android 2.2;
- No lado esquerdo abaixo temos nossa paleta de widgets, é aqui que se encontram todos os nossos componentes visuais, basta como no Delphi, Lazarus ou NetBeans, clicar e arrastar para adicionar o nosso widget.
Muito prático, mas também é possível adicionar ou alterar nossos componentes via xml clicando logo abaixo em main.xml:
Vejam que dos dois modos é muito fácil de se criar uma janela com xml, faça um teste, se você está no modo xml clique em
Graphical Layout e apague todos os widgets que estão nele clicando em cima apertando a tecla DEL, adicione o primeiro widget chamado
TextView, ele é o equivalente ao
Label do Delphi/Lazarus, em seguida clique em main.xml e veja que ele automaticamente criou o código xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView android:text="TextView" android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content">
</LinearLayout>
Agora no modo xml selecione a linha que começa por
<TextView, copie com CTRL+C, dê um enter e cole com CTRL+V, agora volte ao modo gráfico, e veja que ele já adicionou um novo TextView, legal demais. Faça os testes, coloque um Button pelo modo gráfico e entre no modo xml e veja o código, notem que ele tem muitas propriedades. Tá! E pra alterar estas propriedades?
Simples, no modo gráfico olhe a aba
outline dê 2 cliques no nome do widget e veja abaixo as propriedades:
Mas, nada me impede de alterar as propriedades via xml, vamos conhecer algumas:
android:text - está propriedade altera o texto do widget, você pode colocar um texto normal ou uma variável criada no arquivo strings.xml.
Exemplo 1: Altere a propriedade android:text do widget TextView:
<TextView android:text="Olá Mundo" android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
Execute o emulador clicando com botão direito do mouse em cima do projeto e clique em
Run As -> Android Application e veja o resultado.
Exemplo 2: Abra o arquivo strings.xml na pasta
res -> values, clique em
add, será mostrado a seguinte tela:
Clique em
String e de um
ok, ele irá voltar para a tela de adição de variáveis, clique na variável
String que acabamos de criar e olhem a direita, temos 2 propriedades para preencher: Name e Value. Preencha como "teste" e "Olá mundo2".
Agora volte ao nosso main.xml e no modo xml altere a propriedade android:text para:
<TextView android:text="@string/teste" android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
Execute novamente a aplicação, como eu já havia mostrado antes.
Com isto estamos referenciando o texto para pegar o valor da variável teste que criamos.
android:id
A propriedade android:id nada mais é do que um identificador para os widgets, ou seja, quando formos criar nossas aplicações no arquivo java, iremos referenciar no widgets ao código java por este ID.
Vamos a um exemplo pratico, volte ao modo gráfico e adicione um Button na tela, em seguida volte ao modo xml e altere as seguintes linhas:
<TextView android:text="@string/teste" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
Para:
<TextView android:text="@string/teste" android:id="@+teste/txtTexto" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<Button android:text="Trocar Texto" android:id="@+teste/btnTroca" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
Veja que alteramos a propriedade id do TextView para @+teste/txtTexto, ou seja, trocamos o seu nome e seu identificador, a mesma coisa com o Button, essa propriedade é muito interessante caso você tenha uma aplicação com várias telas, você poderia identificar cada widget em suas respectivas telas.
Outra coisa interessante também seria você abrir o arquivo R.java na pasta gen e olhar seu conteúdo, mas lembre-se de não altera-lo:
Notem que tudo o que foi criado se encontra nele, é ele que irá fazer a ponte entre o xml dos widgets e o código java em si.
Voltemos então ao nosso exemplo prático, abra o arquivo principal do nosso exemplo, o
calcActivity.java:
Nele iremos fazer acontecer a mágica. Eis o seu conteúdo:
package br.com.calculadora;
import android.app.Activity;
import android.os.Bundle;
public class calcActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
Primeiramente vamos importar as bibliotecas necessárias. Na seção imports digite:
import android.widget.*; // Importando a classe widget
import android.view.*; // importando a classe view
Sem essas classes não iremos conseguir manipular os widgets e nem criar seus eventos.
Agora vamos instanciar nossos widgets, antes de
@override digite o seguinte código:
TextView txtTexto; // Cria um Objeto TextView
Button btnTroca; // Cria um Objeto Button
Criado nossos widgets vamos referência-los ao nosso main.xml, logo abaixo a linha
setContentView(R.layout.main); digite:
txtTexto = (TextView) findViewById(R.teste.txtTexto); // Aqui fazemos a referencia com o método findViewById(), muito fácil.
btnTroca = (Button) findViewById(R.teste.btnTroca);
Que tal agora criarmos um evento pra eles, logo abaixo a linha
btnTroca = (Button) findViewById(R.teste.btnTroca); digite o seguinte código:
btnTroca.setOnClickListener(new View.OnClickListener() { // Criando o evento para o clique do botão
@Override
public void onClick(View arg0) {
txtTexto.setText("Você trocou o texto!");
}
});
Execute novamente e olhe o resultado. Muito simples não?
Eis o código completo:
package br.com.calculadora;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
import android.view.*;
public class calcActivity extends Activity {
/** Called when the activity is first created. */
TextView txtTexto;
Button btnTroca;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
txtTexto = (TextView) findViewById(R.teste.txtTexto);
btnTroca = (Button) findViewById(R.teste.btnTroca);
btnTroca.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
txtTexto.setText("Você trocou o texto!");
}
});
}
}