Tutorial programa em Android Parte 2

Na primeira parte desse tutorial nossa aplicao possui trs botes, porm sem nenhuma funcionalidade e com um layout simples, nesse tutorial vamos melhorar o layout do nosso programa e colocar a algumas funcionalidades nos botes. Vamos comear a melhorar o visual do programa mudando a cor de fundo, centralizando e aumentando o ttulo do programa, e diminuindo um pouco o tamanho dos botes. Primeiro precisamos criar o recurso /res/values/colors.xml ?

1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> <color name="background">#5500ccff</color> 3 </resources> 4

E alterar o main.xml para: ?

1 2 3 <?xml version="1.0" encoding="utf-8"?> <LinearLayout 4 xmlns:android="http://schemas.android.com/apk/res/android" 5 android:background="@color/background" android:layout_height="fill_parent" 6 android:layout_width="fill_parent" 7 android:padding="30dip" 8 android:orientation="horizontal"> 9 <LinearLayout android:orientation="vertical" 10 android:layout_height="wrap_content" android:layout_width="fill_parent" 11 android:layout_gravity="center"> 12 <TextView android:text="@string/titulo" 13 android:layout_height="wrap_content" 14 android:layout_width="wrap_content" 15 android:layout_gravity="center" android:layout_marginBottom="25dip" 16 android:textSize="22.5sp" /> 17 <Button android:id="@+id/play_button" 18 android:layout_width="fill_parent" 19 android:layout_height="wrap_content" android:text="@string/play_label" /> 20 <Button android:id="@+id/sobre_button" 21 android:layout_width="fill_parent" 22 android:layout_height="wrap_content" 23 android:text="@string/sobre_label" /> 24 <Button android:id="@+id/sair_button" android:layout_width="fill_parent" 25 android:layout_height="wrap_content" 26 android:text="@string/sair_label" /> 27 </LinearLayout> 28 </LinearLayout> 29 30

31 32
Observe que alteramos o layout inserindo mais um LayerLayout para centralizarmos os itens e alteramos o tamanho e as margens do ttulo. Alm disso observe que adicionamos a propriedade android:id assim que definimos uma identificao para os botes para mais tarde darmos uma funcionalidade a ele. Visualizando nosso programa agora ele devera estar assim:

Agora que aprendemos como alterar o layout da aplicao vamos implementar algumas funcionalidades aos botes da aplicao. Vamos comear pelo boto Sobre, esse boto dever apresentar uma pequena caixa exibindo informaes sobre o aplicativo e para isso precisaremos:

Definir uma nova Activity e inici-la Usar a classe AlertDialog e exib-la Adicionar no AndroidManifest.xml a activity

Para a activity sobre, precisaremos criar o arquivo de layout sobre.xml em res/layout/ com o seguinte sontedo: ?

1 2 3 4 5

<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dip">

<TextView 6 android:id="@+id/sobre_conteudo" 7 android:layout_width="wrap_content" 8 android:layout_height="wrap_content" 9 android:text="@string/sobre_texto" /> 10 </ScrollView> 11 12

E precisamos adicionar os texto no aquivo strings.xml em values/strings/ ?

1 <string name="sobre_title">Sobre Meu primeiro programa</string> <string name="sobre_texto">\ Meu primeiro programa 1.0 2 <i>mobilein.com.br</i>.</string>
Agora que preparamos o layout precisamos criar efetivamente nossa activity criando a classe Sobre.java, usando no Eclipse File>New>Class, extendendo de Activity do pacote android.app, sobrescrevendo o mtodo onCreate() e chamando o mtodo setContentView(). A classe dever ficar assim: package com.mobilein.exemplos; import android.app.Activity; import android.os.Bundle; public class Sobre extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.sobre); } } Agora vamos adicionar a activity ao AndroidManifest.xml, pois todas as activities devem estar l declaradas, para saber mais sobre o AndroidManifest.xml, leia aqui. Abra o arquivo AndroidManifest.xml e adicione dentro da tag <application> o trecho: ?

1 <activity android:name=".Sobre" android:label="@string/sobre_title" > 2 </activity> 3

Agora vamos implementar a funcionalidade no boto para abrir a nossa caixa sobre. Primeiro devemos alterar o onCreate() da classe PrimeiroPrograma.java adicionando aps o setContentView() o seguinte cdigo: View playButton = findViewById(R.id.play_button); playButton.setOnClickListener(this); View sobreButton = findViewById(R.id.sobre_button); sobreButton.setOnClickListener(this); View sairButton = findViewById(R.id.sair_button); sairButton.setOnClickListener(this); Estamos chamando o mtodo findViewById(), que pega um recurso pelo Id, e diz para o Android qual recurso manipular atravs do mtodo setOnClickListener, mas para isso, a classe PrimeiroPrograma.java dever implementar a interface OnClickListener e tambm sobrescrever o mtodo onClick() dentro da classePrimeiroPrograma.java. public void onClick(View v) { switch (v.getId()) { case R.id.sobre_button: Intent i = new Intent(this, Sobre.class); startActivity(i);

break; } } Para iniciar uma activity no Android primeiro precisamos criar uma instncia da classe Intent. Existem dois tipos de Intents: public intents (nomedas) que so registradas no sistema e podem ser chamadas por qualquer aplicao e privaty intents (annimas) que so utilizadas por uma s aplicao. Saiba mais sobre intents aqui. Agora quando voc rodar sua aplicao e clicar em sobre uma tela ser exibida com o texto do sobre.

Obs.: Para fechar a tela do Sobre aperte ESC no emulador.

Mas no ficou com muita cara de About Box, ento vamos aplicar um tema a essa tela para melhorar o visual, para isso altere no AndroidManifest.xml a tag activity do sobre para: ?

1 <activity android:name=".Sobre" android:label="@string/sobre_title" android:theme="@android:style/Theme.Dialog"> 2 3 </activity>

Agora rode o programa novamente e veja como ficou bem melhor:

Antes do fim da parte 2 desse tutorial vamos inserir funcionalidade em mais um boto, o boto sair, essa vai ser simples, no mtodo onClick() da classe PrimeiroPrograma.java adicione mais um case. case R.id.sair_button: finish(); break; Termino aqui a segunda parte desse tutorial, pois o mesmo est ficando muito extenso, na prxima parte adicionaremos menus e mais funcionalidades. At a prxima!

Publicar no Delicious Publicar no Facebook 2 2 2 2 2 2 2 2 2

Enviar via Gmail Adicionar ao LinkedIn

Publicar no StumbleUpon Adicionar ao Tumblr Publicar no Twitter 4 4 4 4 4 4 4 4 4

Adicionar ao Google Bookmarks Enviar via E-mail program Adicionar ao Reddit

(Visited 5,242 times, 35 visits today) android, desenvolvimento, tutorial

This entry was posted on 29 de dezembro de 2010, 17:10 and is filed under Android. You can follow any responses to this entry through RSS 2.0. Voc pode deixar uma resposta, ou citar de seu prprio site.

COMENTRIOS (13) CITAES (1) RELATED POSTS

1. #1 by Fabio Nobre on 29 de dezembro de 2010 - 23:46

Ola, Muito bacana sua iniciativa, tambm estou iniciando no mundo dos Androids e acho que poderemos trocar muitas idias ainda. Estou estudando bastante, e simultaneamente estou criando uma To-do list, que acredito ser algo tambm simples, que pode ir sendo feito aos poucos e que no final pode agregar muito conhecimento. O que senti falta, foi saber quem escreve, de onde escreve e etc. D uma olhada nisso. Abraos.

2. #2 by Aristenio on 30 de dezembro de 2010 - 15:00

Caro Fbio, no entendi foi saber quem escreve, de onde escreve e etc, voc explicar melhor?

3. #3 by Samuel Facchinello on 5 de janeiro de 2011 - 18:28

timo tutorial, parabens estou comeando agora com o Android s complementando o Tutorial, faltou dizer que a classe PrimeiroPrograma.java deve implementar de OnClickListener no final do tutorial a classe PrimeiroPrograma.java ficou assim: public class PrimeiroProgramaextends Activity implements OnClickListener { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); View playButton = findViewById(R.id.play_button); playButton.setOnClickListener(this); View sobreButton = findViewById(R.id.sobre_button); sobreButton.setOnClickListener(this); View sairButton = findViewById(R.id.sair_button); sairButton.setOnClickListener(this); } public void onClick(View v) { switch (v.getId()) { case R.id.sobre_button: Intent i = new Intent(this, Sobre.class); startActivity(i); break; case R.id.sair_button: finish(); break; } } }

4. #4 by Fabio Licks on 26 de janeiro de 2011 - 14:53

Ol pessoal!

Samuel, apenas para complementar a informao. A partir da verso 1.6 do Android no necessrio implementar a interface OnClickListener. No h nenhum impeditivo de ser feito assim como voc falou, mas existe uma outra forma. Basta criar um mtodo dentro da sua Activity conforme o que segue: class MyActivity extends Activity { public void myClickHandler( View target ) { // Do stuff } } E depois referenciar este mtodo no arquivo de layout, da seguinte forma: ** Importante: o mtodo obrigatoriamente deve receber uma View por parmetro. Abs.

5. #5 by Fabio Licks on 26 de janeiro de 2011 - 14:55

Ops faltou a referncia do arquivo de layout:

6. #6 by Clarissa on 8 de outubro de 2011 - 2:49

Ol, Parabns pelo tutorial. No entendo muito do assunto e estou tentando segui-lo, tenho uma dvida: Se eu no quiser alterar o layout, se quiser somente adicionar funcionalidades aos botes, preciso criar o arquivo de layout sobre.xml em res/layout/ com ou posso comear no Eclipse File>New>Class, extendendo de Activity do pacote android.app?? Obrigada

7. #7 by Jlio on 9 de outubro de 2011 - 3:43

Consegui seguir direitinho o tutorial 1 mas nesse segundo me perdi na criao da classe sobre.java. Algum poderia postar um print da tela de criao de uma nova classe ou informar o que deve ser selecionado? No sei que opes marcar em modifiers, superclass e interface.

8. #8 by Andr on 23 de outubro de 2011 - 15:45

Tambem me perdi na parte de criao da classe, postem algo para nos ajudar, obg.

9. #9 by Aristenio on 24 de outubro de 2011 - 17:23

Na verdade a classe PrimeiroPrograma no precisa implementar OnClickListener, ela deve apenas extender de Activity mesmo

10. #10 by Aristenio on 24 de outubro de 2011 - 17:31

De qual arquivo de layout? o maix.xml j est criado na parte 1 e o sobre.xml indico que deve ficar em res/layout/

11. #11 by Aristenio on 24 de outubro de 2011 - 17:34

Voc pode criar o layout todo no OnCreate da sua activity, mas seria muito trabalhoso, futuramente farei um post comparativo sobre o uso do xml para criar o layout x fazer na mo

12. #12 by Ronaldo Ottoni on 29 de outubro de 2011 - 11:41

Companheiro, sei que o post antigo mas encontrei ele s agora e estou com um probleminha no onCLick, montei o case da seguitne forma: public void onClick(View v) { switch (v.getId()){ case R.id.sobre_button: Intent i = new Intent(this, Sobre.class); startActivity(i); case R.id.sair_button: finish(); break; } } Mas quando eu clico no boto sobre, alm dele mostrar a tela sobre ele fecha sozinho o programa, como se j estivesse indo direto pro R.id.sair_button. sabe me dizer onde posso ter errado? Sds