terça-feira, 14 de fevereiro de 2012

Hello Android - Parte 1

Hoje iremos aprender passo a passo alguns conceitos básicos de como construir um aplicativo pro Android. Este tutorial é indicado para quem deseja se aventurar no mundo do Android, possui alguma experiência com programação (já programou alguma coisa na vida), e deseja aprender como a plataforma do Android funciona. Aqui consideramos que você já possui todo equipamento necessário e configurado para rodar Android, se não for o caso siga este tutorial.

O que iremos fazer hoje é criar uma aplicação que exibe uma imagem, uma caixa de texto e um botão, e quando o botão for clicado a aplicação mostrará em outra tela o nome que foi digitado na tela anterior. Assim poderemos aprender sobre widgets (componentes de interação da tela), como manipula-los pelo código e passagem de uma Activity (tela) com passagem de parâmetros para outra.

Vamos começar criando nosso projeto no Eclipse. File -> New -> Android Project. Escolha um nome para o seu projeto, ou simplesmente "Hello Android Tutoriandroid". Escolha o Build Target, que é a versão do Android que você irá desenvolver (o que não implica necessariamente que versões anteriores não irão funcionar). Vamos escolhar a API 7 (Android 2.1), ou escolha uma maior caso esteja sem esse API instalado. Escolha um nome para seu pacote, que deve ser único para publicar no Android Market, ou coloque simplesmente com.tutoriandroid.helloandroid.

Com nosso projeto criado já temos um Hello World básicão, que exibe um texto na tela com a mensagem: "Hello World, HelloAndroidTutoriandroidActivity!". Mas não é exatamente isso que queremos. Então iremos alterar o layout para adicionar as views que queremos. A plataforma Android oferece uma forma muito fácil e poderosa de construir o layout da aplicação, através de arquivos xml, separando-o do código propriamente dito da Activity (de forma grosseira, Activity é sinônimo de 'tela' no Android). Vamos alterar o arquivo res/layout/main.xml (você pode também alterar o nome dele para algo mais explicativo), que originalmente está assim:
<?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:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
</LinearLayout>
Para isto:
<?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" >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/imagem_centro" />
    <EditText android:id="@+id/txt_nome"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    <Button android:id="@+id/bt_ok"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/proxima"/>
</LinearLayout>
Temos como nó raiz (note que todo nó raiz tem que conter o xmlns:android...) o LinearLayout, que controla como as views dentro dele serão exibidas, nesse caso serão exibidas sequencialmente no sentido vertical. Toda view (nó no xml) precisa definir os atributos android:layout_width android:layout_height, que indica a largura e altura, respectivamente, e pode receber como valores um número literal (pouco indicado), ou as constantes fill_parent (ou match_parent em API 8+) e wrap_content, que preenche o espaço fornecido pelo pai ou apenas o necessário para o conteúdo, respectivamente. Com o uso esses conceitos se tornaram intuitivos e muito úteis.

A seguir temos ImageView que apenas exibe a imagem especificada pelo atributo android:src. Temos então um EditText, que é um campo para entrada de texto. Definimos nele um id, assim podemos recupera-lo no código e fazer o que quisermos com ele. Podemos definir o id de qualquer view, mas usualmente só definimos para aqueles que iremos usar no código da Activity. A seguir temos um Button, que é simplesmente um botão sem nenhum enfeite e com o texto definido na strings.xml. Podemos também adicionar o texto diretamente no atributo, mas é uma boa prática colocar todas suas strings em res/values/strings.xml pois facilita a manutenção, internacionalização, etc.

É indicado dois erros: o primeiro é a falta da imagem_centro, então salve a seguinte imagem (ou outra de sua escolha) com nome imagem_centro.png em res/drawable-hdpi:


O segundo erro é a falta da string "proxima", então abra o arquivo res/values/strings.xml, que deve estar assim:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, HelloAndroidTutoriandroidActivity!</string>
    <string name="app_name">Hello Android Tutoriandroid</string>
</resources>
E adicione a seguinte linha em baixo do ultimo </string>:
<string name="proxima">Próxima</string>
Pode parecer redundante mas é muito útil pois você pode criar, por exemplo, uma pasta values-en e colocar lá um strings.xml com strings, usando o mesmo nome, mas traduzido para o inglês.

Nosso layout está pronto! Vamos agora partir para o código da Activity. Abra o arquivo src/com.tutoriandroid.helloandroid/HelloAndroidTutoriandroidActivity.java e temos isso:
package com.tutoriandroid.helloandroid;
import android.app.Activity;
import android.os.Bundle;
public class HelloAndroidTutoriandroidActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}
Apenas o que ele faz por enquanto é indicar qual layout a Activity irá usar através do comando  setContentView(R.layout.main). A Activity lida com várias coisa para você, em especial algumas funções que são chamadas em cada fase do ciclo de vida da Activity. Especialmente onCreate, que é chamada sempre que a Activity é criada, e é onde colocaremos nosso código. Para saber mais entre aqui (não deixe de ler). Vamos fazer algumas alterações, deixando a classe assim:
public class HelloAndroidTutoriandroidActivity extends Activity {
Button proximaButton;
EditText nomeEditText;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        nomeEditText = (EditText) findViewById(R.id.txt_nome);
        proximaButton = (Button) findViewById(R.id.bt_ok);
        proximaButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(HelloAndroidTutoriandroidActivity.this, MostrarNomeActivity.class);
i.putExtra("NOME", nomeEditText.getText().toString());
startActivity(i);
}
});
    }
}
Importe o que for necessário. O que fizemos aqui foi pegar a referência aos objetos Button e EditText, através do findViewById passando o id definido no layout como parâmetro, e dizer o que acontecerá quando o botão for clicado através do proximaButton.setOnClickListener. Dentro do onClick usamos uma Intent, que é um dos objetos mais importantes da plataforma Android. Basicamente ele descreve a sua intenção de fazer alguma operação. Neste caso a intenção é chamar outra Activity, então passamos a classe dela como segundo parâmetro (o primeiro é o Context da Intent, no caso a atual Activity, adicionamos uma informação extra, associada a chave "NOME" (é uma boa prática usar constantes), com o valor da string contida no EditText, recuperada através do comando nomeEditText.getText().toString(). Depois disso mandamos iniciar uma Activity de acordo com a Intent que criamos.

É acusado um erro: não existe MostrarNomeActivity, ainda. Vamos primeiro criar o layout da nova tela. Clique com botão direito em res/layout depois New -> Android XML File. Se em Resource Type não tiver selecionado Layout, selecione-o. Em File digite o nome do arquivo, no nosso caso activity_mostrar_nome e em Root Element deixe o LinearLayout selecionado e clique em Finish. Teremos então o seguinte arquivo:
<?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" >
</LinearLayout>
Como queremos apenas mostrar o nome que a pessoa usou na primeira Activity, vamos apenas adicionar um TextView no nó do LinearLayout (logo antes da </LinearLayout>):
<TextView android:id="@+id/text_hello"
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
Note que ainda não setamos nenhum texto para o TextView, pois isso será feito no código da Activity pegando parâmetro da Intent. A seguir vamos criar a Activity: clique com botão direito em src/com.tutoriandroid.helloandroid em seguida New -> Class. Em Name coloque MostrarNomeActivity (ou um nome de sua preferência) e em Superclass digite android.app.Activity ou vá pelo Browse... até Activity, depois Finish. Foi criado uma classe, estendida de Activity, vazia. Vamos adicionar o método onCreate e o código necessário para que exiba o nome:
public class MostrarNomeActivity extends Activity {
TextView nomeText;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mostrar_nome);
        nomeText = (TextView) findViewById(R.id.text_hello);
        Intent i = getIntent();
        String nome = i.getStringExtra("NOME");
        nomeText.setText(nome);
    }
}
Novamente importe o que for necessário. O que fizemos foi: recuperar o TextView, pegar a Intent que usamos para chamar a Activity, que é onde está nosso parâmetro, através do getIntent(), recuperar o parâmetro usando a mesma chave "NOME" usada para passar o parâmetro com o comando  i.getStringExtra, e setamos o texto do TextView através de nomeText.setText.

Se tentarmos executar o aplicativo agora, ele irá travar no momento que o botão for clicado, pois toda Activity precisa ser declarada no AndroidManifest. Não precisamos fazer isso para a HelloAndroidTutoriandroidActivity pois como ela foi criada automaticamente o próprio Eclipse se responsabilizou de fazer isto. Vamos abrir o arquivo AndroidManifest.xml, que deverá estar assim (a menos que você tenha mudado o nome do projeto):
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tutoriandroid.helloandroid"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk android:minSdkVersion="7" />
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".HelloAndroidTutoriandroidActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>
Iremos apenas adicionar a declaração da nossa nova Activity dentro do nó application (coloque entre </activity> e </application>):
        <activity android:name=".MostrarNomeActivity"/>
Pronto, agora é só rodar e ver o resultado. Pode não parecer muita coisa mas isso é extremamente importante e por ser usado para qualquer tipo de dado primitivo. Taí o resultado:


Baixe o projeto final aqui.

Hello Android - Parte 2 >>

6 comentários:

Igor Sousa at 4 de novembro de 2012 às 23:54 disse...

Hey man, mto legal essa introdução ao android, mas acho ki pra eu desenvolver preciso aprender as linguagens, sabe dizer onde eu encontro um bom material pra iniciante? eu tenho noções de programação mas a unica linguagem moderna ki sei é PHP(aliás tow aprendendo agora)não sei nada sobre java ou xml, pode me ajudar com isso? Vlw.

Gustavo Carvalho at 7 de dezembro de 2012 às 05:39 disse...

@Igor: Não conheço nenhum fonte que posso dizer com certeza "essa eu recomendo". Mas o Google tai prai isso, pesquise e com certeza você irá encontrar boas fontes. Uma dica: se conseguir ler em inglês, pesquise e estude em inglês, pois as fontes são muito mais abundantes e de qualidade.

Anônimo at 26 de março de 2013 às 13:36 disse...

Estou realmente supreso com o site e os tutoriais, algo realmente muito profissional. As pessoas deveriam fazer mais isto no Brasil.

Fernando Matos at 26 de março de 2013 às 16:58 disse...

No meu caso ocorreu problema no emulador. Ao clicar na APP aparece uma mensagem UNFORUNATELY APP HAS STOPPED. Alguém saberia o que seria este problema?

Gustavo Carvalho at 27 de março de 2013 às 20:19 disse...

@Anônimo: Muito obrigado!

@Fernando: Isso ocorreu devido a alguma Exception no código. Abra o LogCat (Window -> Show View -> (Other...) -> LogCat e lá aparecerá a descrição do erro (Exception).

Unknown at 17 de junho de 2013 às 16:24 disse...

O meu nunca acha a "string/proxima" cara

Couldn't resolve resource @string/proxima

Me ajuda?

Postar um comentário

 
© 2011 Tutoriandroid | Recode by Ardhiansyam | Based on Android Developers Blog