Tutorial Android #3 – Aprimorando o Formulário

Padrão

Olá pessoal! Hoje, dando continuidade aos nossos tutoriais sobre desenvolvimento para Android, vamos continuar com a nossa aplicação da Lista de Restaurantes. No post de hoje, vamos melhorar a aparência do nosso formulário, alterando seu layout para o estilo TableLayout.

Abra o arquivo main.xml dentro do diretório res/layout e edite-o, deixando-o dessa forma:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">
    <TableRow>
        <TextView android:text="Nome:"/>
        <EditText android:id="@+id/nome"/>
    </TableRow>
    <TableRow>
        <TextView android:text="Endereço:"/>
        <EditText android:id="@+id/end"/>
    </TableRow>
    <Button android:id="@+id/salvar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Salvar"/>
</TableLayout>

Podemos perceber que o código ficou bem mais “enxuto” nesta versão. O TableLayout é útil para formulários onde deseja-se tamanhos padronizados tanto de largura quanto de altura para os itens. Nos parâmetros deste layout, temos o novo elemento android:stretchColumns, dizendo que o tamanho das colunas deve-se adaptar ao conteúdo, ajustando suas dimensões. Como trata-se de uma tabela, obtemos a posição esteticamente alinhada dos itens.

O item filho do TableLayout são os itens TableRow, onde cada item inserido entre suas tags são inseridos como uma coluna. Consequentemente, cada TableRow (como o próprio nome nos diz), representa uma linha da tabela.

Por fim, inserimos o item Button separadamente, sem definirmos a linha (TableRow), para que ele ocupe toda a extensão horizontal. Assim, nosso formulário vai parecer com isso:

Continuando, vamos começar a fazer uma alteração para inserirmos  uma classificação por categoria nos nossos restaurantes. Vamos, então, adicionarmos alguns itens do tipo RadioButton (aqueles botões marcadores) em nosso formulário. Continuando as modificações no main.xml, adicione os itens RadioGroup e RadioButton, conforme o código:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">
    <TableRow>
        <TextView android:text="Nome:"/>
        <EditText android:id="@+id/nome"/>
    </TableRow>
    <TableRow>
        <TextView android:text="Endereço:"/>
        <EditText android:id="@+id/end"/>
    </TableRow>
    <TableRow>
        <TextView android:text="Tipo:"/>
        <RadioGroup android:id="@+id/tipos">
            <RadioButton android:id="@+id/rodizio"
                android:text="Rodízio"/>
            <RadioButton android:id="@+id/fast_food"
                android:text="Fast Food"/>
            <RadioButton android:id="@+id/a_domicilio"
                android:text="A Domicílio"/>
        </RadioGroup>
    </TableRow>
    <Button android:id="@+id/salvar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Salvar"/>
</TableLayout>

Para o elemento RadioGroup, definimos o atributo identificador, no exemplo definido como tipos, que será o meio pelo qual iremos acessá-lo no código-fonte Java. Internamente a esse elemento, temos definido um TextView que exibirá o texto Tipo e os elementos do tipo RadioButton propriamente ditos. Em nosso exemplo, definimos os botões Rodízio (rodizio), Fast Food (fast_food) e A Domicílio (a_domicilio).

O próximo passo é obtermos tal opção no código-fonte Java. Primeiramente, precisamos modificar nossa classe Restaurante para abrigar o tipo. Vamos definir um atributo chamado tipo e seus métodos get e set. A classe Restaurante ficará assim:

package net.rafaeltoledo.restaurante.model;

public class Restaurante {

	private String nome = "";
	private String endereco = "";
	private String tipo = "";

	public String getNome() {
		return nome;
	}

	public void setNome(String nome) {
		this.nome = nome;
	}

	public String getEndereco() {
		return endereco;
	}

	public void setEndereco(String endereco) {
		this.endereco = endereco;
	}

	public String getTipo() {
		return tipo;
	}

	public void setTipo(String tipo) {
		this.tipo = tipo;
	}
}

Agora vamos alterar o código da nossa Activity, para obtermos a opção selecionada pelo usuário. Dentro do método onClick, vamos adicionar um trecho de código puxando os dados do RadioGroup e verificando seu status de acordo com a opção selecionada. O código fica assim:

package net.rafaeltoledo.restaurante;

import net.rafaeltoledo.restaurante.model.Restaurante;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioGroup;

public class ListaRestaurantes extends Activity {

	Restaurante r = new Restaurante();

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		Button salvar = (Button) findViewById(R.id.salvar);
		salvar.setOnClickListener(onSave);
	}

	private OnClickListener onSave = new OnClickListener() {

		public void onClick(View arg0) {
			EditText nome = (EditText) findViewById(R.id.nome);
			EditText endereco = (EditText) findViewById(R.id.end);

			r.setNome(nome.getText().toString());
			r.setEndereco(endereco.getText().toString());

			RadioGroup tipos = (RadioGroup) findViewById(R.id.tipos);

			switch (tipos.getCheckedRadioButtonId()) {
			case R.id.rodizio:
				r.setTipo("rodizio");
				break;
			case R.id.fast_food:
				r.setTipo("fast_food");
				break;
			case R.id.a_domicilio:
				r.setTipo("a_domicilio");
				break;
			}
		}
	};
}

Obtemos o elemento tipos da mesma forma que fizemos para nome e endereco, utilizando o método findViewById(). Logo após isso, fazemos um switch com o conteúdo do método getCheckedRadioButtonId(), de acordo com o id de cada um dos botões definidos por nós. Ao final, nosso formulário estará assim:

Pra quem não conseguiu acompanhar ou teve problemas, o projeto pode ser baixado aqui.

Bom pessoal, é isso! Espero que estejam gostando dos posts. Comentem, deixem sugestões e participem do blog, afinal, ele é feito pra vocês leitores!

Até a próxima! 🙂

  • renato

    Muito bom o tutorial, estou seguindo todos…

  • Márcia

    Muito bom seu tutorial. Sou iniciante em programação Android e dá para aprender muito bem.
    Parabéns!!!!

  • Jorge M. Abdalla

    Está dando erro na hora de colocar o tipo, rodizio, fast_food, a_domicilio no Activity, é como se ela nao reconhecesse esses ids

    • Verifique se os ids foram declarados no XML de layout. Caso contrário eles não serão reconhecidos

  • otimo tutorial!