[Android] Adicionando botões dinamicamente na tela da aplicação.

Estava eu estudando um pouco de android (comecei a brincar disso esses dias) e queria colocar objetos diferentes na tela do meu aplicativo dependendo da ação realizada pelo usuário.

A ideia era que se o usuário pressionasse o botão 1 alguns objetos aparecessem na tela, mas se o botão 2 fosse pressionado, outros objetos aparecessem.

Fiquei lendo alguns tutoriais pra descobrir uma forma de fazer isso, mas não encontrei a resposta em um único lugar, por esta razão, depois de ler vários tutoriais e descobrir como fazer resolvi escrever este post.

A minha ideia foi criar dois frames, no primeiro frame haveriam 2 botões (botão 1 e botão 2 - bem criativo). Se o botão 1 fosse pressionado, apareceriam os botões 3 e 4 no frame 2. Caso fosse pressionado o botão 2, os botões 5, 6 e 7 apareceriam no frame 2.

Vejam, assim como foi feito com botões, poderiam ter sido utilizados outros objetos. É que fazer com botões era mais fácil e num precisava de muita criatividade, por isso optei por essa opção. (Na verdade, eu nem acho que tinha uma opção, mas isso não é assunto pra esse blog).

Pois bem, pra montar meu super projetinho foi utilizado o eclipse INDIGO (Xupa JUNO).

Inicialmente eu criei um projetinho android no eclipse com os seguintes passos:

File -> New -> Android Application Project

Tela New Android Application:

Application Name = BotoesInterativos
Project Name = BotoesInterativos
Package Name = com.example.botoesinterativos
Build SDK = Android 4.1 (API16)
Minimum Required SDK = API8: Android 2.2 (Froyo)

Clicar NEXT

Tela Create Activity:

Selecionar o checkbox 'Create Activity'
Selecionar a opção BlankActivity

Clicar NEXT

Tela New Blank Activity

Activity Name = MainActivity
Layout_name = activity_main
Navigation Type = None
Title = MainActivity

Pronto, uma vez criado o projeto, iremos alterar o arquivo activity_main.xml que se encontra no diretório res/layout. Este arquivo tem o seguinte formato.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/frameLayout1"

android:layout_marginLeft="10dp"

android:layout_marginTop="10dp"

android:background="#ABABAB">

<Button

android:id="@+id/botao1"

android:layout_width="90dp"

android:layout_height="35dp"

android:text="Botão 1"

android:textSize="10sp"/>

<Button

android:id="@+id/botao2"

android:layout_width="90dp"

android:layout_height="35dp"

android:text="Botão 2"

android:layout_toRightOf="@+id/botao1"

android:textSize="10sp"

android:layout_centerHorizontal="true"/>

</RelativeLayout>

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="50dp"

android:layout_below="@+id/frameLayout1"

android:id="@+id/frameLayout2"

android:layout_marginTop="10dp"

android:layout_marginLeft="10dp"

android:background="#ABABAB">

<TableLayout

android:id="@+id/tableLayoutFrame2"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:scrollbars="horizontal"

android:shrinkColumns="0">

</TableLayout>

</RelativeLayout>

Observe que foram utilizados 2 RelativeLayout. No primeiro, existem os botões 1 e 2, enquanto que no segundo existe um TableLayout que será utilizado para colocarmos os demais botões dinamicamente.

Em seguida, alteramos o arquivo MainActitivity.java para ficar da seguinte forma:

package com.example.botoesinterativos;

import android.os.Bundle;

import android.app.Activity;

import android.widget.Button;

import android.widget.RelativeLayout;

import android.widget.TableLayout;

import android.widget.TableRow;

import android.view.View;

public class MainActivity extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

final TableRow tr = new TableRow(this);

//Botões para opção botão 1

final Button botao3 = new Button(this);

final Button botao4 = new Button(this);

botao3.setText("Botão 3");

botao4.setText("Botão 4");

botao3.setTextSize(10);

botao4.setTextSize(10);

botao3.setWidth(135);

botao4.setWidth(135);

botao3.setMinimumHeight(30);

botao4.setMinimumHeight(30);

botao3.setHeight(35);

botao4.setHeight(35);

//Botões para opção botão 2

final Button botao5 = new Button(this);

final Button botao6 = new Button(this);

final Button botao7 = new Button(this);

botao5.setText("Botão 5");

botao6.setText("Botão 6");

botao7.setText("Botão 7");

botao5.setTextSize(10);

botao6.setTextSize(10);

botao7.setTextSize(10);

botao5.setWidth(135);

botao6.setWidth(135);

botao7.setWidth(135);

botao5.setMinimumHeight(30);

botao6.setMinimumHeight(30);

botao7.setMinimumHeight(30);

botao5.setHeight(35);

botao6.setHeight(35);

botao7.setHeight(35);

final Button botao1 = (Button) findViewById(R.id.botao1);

botao1.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

//Obtém o TableLayout

TableLayout ll = (TableLayout) findViewById(R.id.tableLayoutFrame2);

//Limpa as views criadas anteriormente

tr.removeAllViews();

ll.removeAllViews();

//Adiciona os botões à tabela

tr.addView(botao3);

tr.addView(botao4);

int lHeight = RelativeLayout.LayoutParams.FILL_PARENT;

int lWidth = RelativeLayout.LayoutParams.WRAP_CONTENT;

//Adiciona a tabela ao TableLayout

ll.addView(tr, new RelativeLayout.LayoutParams(lHeight, lWidth));

}

});

final Button botao2 = (Button) findViewById(R.id.botao2);

botao2.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

//Obtém o TableLayout

TableLayout ll = (TableLayout) findViewById(R.id.tableLayoutFrame2);

//Limpa as views criadas anteriormente

tr.removeAllViews();

ll.removeAllViews();

//Adiciona os botões à tabela

tr.addView(botao5);

tr.addView(botao6);

tr.addView(botao7);

int lHeight = RelativeLayout.LayoutParams.FILL_PARENT;

int lWidth = RelativeLayout.LayoutParams.WRAP_CONTENT;

//Adiciona a tabela ao TableLayout

ll.addView(tr, new RelativeLayout.LayoutParams(lHeight, lWidth));

}

});

}

Note que nesta classe é criado um objeto tr (TableRow). Cada objeto inserido neste TableRow será uma coluna da tabela. Em seguida, são criados os botões 3, 4, 5, 6 e 7. O próximo passo é criar os eventos que serão utilizados pelos botões 1 e 2 para que os botões 3, 4, 5, 6 e 7 possam aparecer na tela.

As figuras abaixo mostram como ficou a tela da aplicação. Na primeira figura, nenhum botão foi pressionado. Na segunda, o botão 1 foi pressionado e apareceram os botões 3 e 4. Na última figura, o botão 2 foi pressionado e apareceram os botões 5, 6 e 7.