Caríssimos seguidores, este presente tutorial tem como grande objectivo desmistificar as questões:
“-Como construir uma aplicação android de uma forma rápida?
-Como faço troca de páginas (views) de forma dinâmica?
– Como troco informação entre páginas (views)?”
Sem entrar em muitos rodeios e pormenores desnecessários, tento explicar todos os passos da “maneira mais simples de criar uma app para o android”.
O cenário idealizado para o presente tutorial é o seguinte.
Assim que o utilizador entre na aplicação, será apresentado um splash screen com uma imagem. Em seguida, este será levado até à segunda activity (janela / tela) da aplicação, onde terá de preencher os respectivos campos. Após o devido preenchimento dos campos assinalados acima, nick, username e password, o utilizador tem de clicar no botão “Entrar“.
Esta activity, tem de trocar uma variável interna com a próxima activity (3), nomeadamente no nick do utilizador. Nesta, o utilizador será recebido com uma mensagem de boas-vindas, “Ola <nick>” e poderá visualizar as mensagens deixadas por outros utilizadores, assim como, adicionar também uma mensagem ao histórico de comentários. Estas mensagens, são guardadas numa caixa de texto de forma sequencial. Assim que o utilizador clique no botão para enviar a mensagem, um alerta será imediatamente disparado a notificá-lo da salvaguarda do comentário.
Implementação
Nesta fase de implementação da App, vou focando de forma detalhada os pormenores para abordar a melhor maneira de construção do protótipo.
1. Compilação Automática VS Compilação Manual do Eclipse.
Um dos muitos aspectos a tomar em atenção no desenvolvimento de aplicações móveis via ecplise, é a compilação automática que o IDE deixa marcada como automática nas definições do projecto. Este processo é usado para libertar o utilizador de certas tarefas (como clicar no botão de “compilar”), mas um conselho que deixo aqui, é que o desactivem e façam a compilação do projecto sempre manualmente. Uma das principais razões são os conflitos que por vezes existem entre variáveis e endereços de memória que o IDE coloca e define no ficheiro R do projecto.
A imagem anterior mostra os quatro passos essenciais na criação de um projecto android.
Na fase em que o utilizador já criou o projecto android (e.g: nome do projecto: Android_Tutorial), é necessário definir o modo de compilação do projecto, como mencionado anteriormente.
Nota: Sempre que desejar executar e correr o projecto, compila-lo e guarda-lo. Teclas de atalho:(CTRL+B e CTRL+S), caso contrário clicar directamente no ícone de compilação.
2. Criação das 3 activities para a App.
No android apenas uma janela pode ser vista de uma vez, isto é, não permite multi-janelas ao mesmo tempo, como por exemplo os sistemas operativos nos têm habituado ao longo destes anos de sua existência.
De uma forma genérica, uma App possuí classes de vários tipos, mas as mais comuns são:
- Classes do tipo Activity.
- Classes do tipo Não Activity.
As classes do tipo Activity, são classes que extendem a classe mãe Activity (“extends Activity“). De uma forma geral, uma classe que extende a classe mãe Activity tem como intuito ser visualizada no telemóvel. Relembrando o mockup que foi apresentado acima, a App proposta terá 3 Activities (classes a mostrar no ecrã do telemóvel), mas isto não implica que o projecto apenas terá três classes. O sistema operativo android apenas permite a execução de uma activty por sua vez.
“-Quantas activities são necessárias para a App? Resposta: Três. Vamos cria-las.“
A primeira já foi criada automaticamente pelo Eclipse (MainActivity.java). É necessário perceber que, cada activity tem um ficheiro .xml associado. Este ficheiro, tem todo o layout que pode ser visto aquando a inicialização da activity no telemóvel.
Nota: Sempre que uma nova classe é criada no android, e esta é do tipo activity é necessário sempre dizer ao Ecplise que esta é do tipo Activity. Para tal, é necessário aceder ao ficheiro AndroidManifest.xml e associar-lhe a nova classe do tipo activity.
Para tal, basta clicar no ficheiro (passo 1), escolher a opção “Application” no menu separador, e em seguida fazer scroll até ao fundo da página e clicar no botão “Add..” para seleccinar a nova Activity. Vamos ver e perceber esse fluxo.
2.1. Criar Activities.
O ecplise criou a primeira activity por defeito, portanto é necessário apenas criar 2:
- MainActivity.java (já criada pelo ecplise).
- Login.java (Vamos criar).
- Show.java (Vamos criar).
Para criar a Activity Login é necessário criar uma classe como apresentado na seguinte imagem.
Não esquecer de clicar com o botão direito em cima do “package“, é de extrema importância que esta tenha sido criada dentro do “package” da App (com.example.android_tutorial).
Em seguida, definimos o nome da nova classe (“Login“) e a superclass a que esta pertence, isto é, a classe mãe.
Como era de esperar, a classe login vai ser visualizada no telemóvel, não é apenas uma classe auxiliar com código, portanto, é uma classe que extende a classe Activity (android.app.Activity).
Como se pode visualizar, a nova classe Login.java não tem qualquer código. Portanto, vamos ter que adiconar o evento <OnCreate()>, para que quando a classe seja iniciada carregue o .xml e o código associado.
Antes de tudo, é necessário criar o .xml, onde vamos criar o layout de um formulário de login.
Uma boa política a seguir é colocar o nome do xml igual ao da classe, apenas trocando o primeiro carácter (minúsculo).
Como se percebe, o novo ficheiro de layout já está guardado na pasta layout do android. Neste momento vamos definir o seu layout.
Em vez de usar o layout pré-defnido pelo eclipse, vamos alterar esta base pelo que vou fornecer em seguida.
<ScrollViewxmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
>
<TableLayout
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
android:stretchColumns=“1”
>
(botões, textviews, etc.)
</TableLayout>
</ScrollView>
Esta é a base que irá ser utilizada em todos os ficheiros de layout. Ela permite configurá-lo e incluir todo o conteúdo numa ScrollView e em forma de tabela.
É mais fácil desta forma estruturar o layout, e simplifica todo o trabalho em torno da sua construção. Por vezes esta é a tarefa que todos os programadores odeiam, vamos simplificar as coisas.
Ficamos então com o seguinte layout, que foi o que projectámos no mockup inicial. O código xml por detrás é o seguinte.
<?xmlversion=“1.0”encoding=“utf-8”?>
<ScrollViewxmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
>
<TableLayout
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
android:stretchColumns=“1”
>
<TextView
android:id=“@+id/titulo”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:text=“Login”
android:textAppearance=“?android:attr/textAppearanceLarge” />
<EditText
android:id=“@+id/text_nick”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:ems=“10”
android:text=“nick”>
<requestFocus/>
</EditText>
<EditText
android:id=“@+id/text_username“
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:ems=“10”
android:text=“username”/>
<EditText
android:id=“@+id/text_password”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:ems=“10”
android:inputType=“textPassword”
android:text=“teste”/>
<Button
android:id=“@+id/button1”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:text=“Entrar”/>
</TableLayout>
</ScrollView>
Reparar nos “id’s” de cada objecto (textview, button), é necessário sempre colocar uma tag para reconhecermos o nome dos botões. É importante seguir esta política, porque em projectos de maior dimensão teríamos dificuldade e perceber qual o nome do botão da activity Login.
Se quisermos ser ainda mais rigorosos, poderíamos substituir e fazer isto da seguinte maneira.
android:id=“@+id/text_nick” -> android:id=“@+id/login_text_nick”
Desta forma, construímos uma tag de forma [classe_tipo_nome].
2.1.1. Relacionar o xml à Activity (actividade) Login.
Tendo o xml criado temos de fazer com que, quando a actividade Login seja carregada, carregue com ela o xml respectivo.
A classe Login fica então da seguinte maneira.
Apenas informá-mos a App que, ao carregar e criar os objectos na actividade tem de carregar o ficheiro xml (R.layout.login).
2.1.2. Adicionar a Activity Login no ficheiro xml AndroidManiest.xml.
Como referênciado na secção 2, sempre que desejamos que uma classe seja do tipo actividade temos de adicioná-la no ficheiro de configurações da App.
Após o clique em “OK”, é necessário esperar uns segundos, seleccionar a actividade e clicar novamente em “OK”.
Em seguida o processo é o mesmo para a criação da actividade Show.java.
3. Criação e Implementação do splash screen na classe “MainActivity“.
Neste ponto ja temos as 3 classes da App criadas no Eclipse. Estamos apostos para criar a actividade de entrada da App.
Somente foi necessário inserir os dois blocos de código assinalados acima. Inicialmente uma variável que possuí o tempo que Activity está presente. Quando este contador se esgotar, isto é, quando for zero o método “run()” é disparado.
Dentro do método run() estão presentes 3 linhas de código.
Intent i = newIntent(MainActivity.this, Login.class);
startActivity(i);
finish();
Intent refere-se às intenções. São determinados comandos que podemos enviar ao Sistema Operacional Android para realizar alguma acção, com Intents é possivel enviar ou recuperar dados. O método startActivity(Intent intent) envia dados e requisições de telas, o método getIntent() recupera uma intent enviada por meio do startActivity(), o método putExtra(“nome_de_identificação”, valor) insere na intent algum valor, ou seja, o primeiro parâmetro é um nome para que possa ser identificado mais tarde e o segundo parâmetro um valor que pode ser String, boolean, int, float, etc.
Neste ponto basta apenas abrir o xml referente ao MainActivity e defnir o xml ao seu gosto.
Em seguida podemos executar a App no android e verificar os resultados.
4. Código relativo à Actividade Login.
Ao executar a aplicação ela leva-nos até à actividade login, nesta necessitamos de fazer os seguintes passos:
- Criar o evento para injecção de código aquando o click no botão “Entrar”.
- Obter valores das textviews.
- Verificar se o username e password correspondem a determinados valores.
Analisando todo o código da classe na vertical, antes de tudo, são instanciadas algumas variáveis. Estas são do tipo Button e EditText, servem para interagir com os objectos da actividade.Para que tudo faça sentido é necessário criar uma ligação entre as variáveis agora declaradas e os objectos da actividade, que são os que foram “desenhados” no xml.
btn_entrar=(Button) findViewById(R.id.button1);
nick=(EditText) findViewById(R.id.text_nick);
O método “findViewById()” faz exactamente essa interligação, daí neste momento os nomes usados no <id> de cada objecto no xml fez todo o sentido agora. É muito mais simples identificar esses objectos pelas tags usadas.
Em seguida, apenas é necessário dizer à aplicação o seguinte:
“-Quando o botão “Entrar” for clicado quero despoletar determinadas acções!“.
btn_entrar.setOnClickListener(newView.OnClickListener() {
@Override
publicvoidonClick(View v) {
//restante código
}
});
Segue-se a função anterior, faz exactamente o pretendido!
Em seguida através da seguinte instrução, é possível obter os valores da caixas de texto.
s_nick=nick.getText().toString();
s_user=user.getText().toString();
s_pwd=pwd.getText().toString();
Neste ponto, é feita uma verificação do valor das variáveis, para tal, um bloco condicional (if) é usado.
Caso o retorno seja positivo, uma nova actividade é “chamada”, caso contrário uma mensagem de erro é disparada.
if(s_user.equals(“ptavares”) && s_pwd.equals(“123”))
{
Intent i;
i=newIntent (Login.this,Show.class);
Bundle params = newBundle();
params.putString(“nick”,s_nick);
i.putExtras(params);
Login.this.startActivity(i);
}
Este trecho de código efectua uma verificação estática na actividade. Se os valores corresponderem, um pedido para uma nova actividade é executado (Intent). Esta nova actividade é a classe Show.class que se irá tornar numa actividade. Tudo isto, funciona igual à actividade examinada anteriormente (MainActivity), excepto a passagem de uma parâmetro, através do método:
params.putString(“nick”,s_nick);
Desta forma, foi criado uma pacote agrupado à Intent, e passamos um registo associado ao ID “nick“.
5. Código relativo à Activity Show.
O código relativo a esta actividade é apresentado em seguida.
Como explicado acima, em primeiro lugar têm de se criar variáveis para relacionar aos objectos da actividade (xml).
A novidade em termos de código desta actividade é nomeadamente a obtenção da variável do Intent (“nick“), que foi enviada de uma outra actividade. Esta é a maneira como podemos trocar variáveis entre actividades no android.
Posteriormente, o valor da variável nick é listado no formulário e duas funções são implementadas:
- WriteComments();
- LoadComments();
A primeira função obtém o valor da caixa de texto comentário, posteriormente coloca-o no histórico de comentários.
A segunda função, apenas inicializa o histórico de comentários.
Deixo alguns screens da aplicação assim como o pdf do tutorial e o código para download.
Alguma dúvida, comente.
Boa Continuação!
O porquê de tutoriais em português?
Na sua maior parte, a internet está cansada de partilhar tutoriais em inglês.
