O ExpandableListView é um Widget (Componente Visual) muito utilizado em diversos Apps Android mas que é um tanto manhoso para desenvolvedores de primeira viagem.

Se você gostaria de criar um App com uma lista que, ao ser clicada, exibe sub-itens encadeados num acordeão como vemos em centenas de sites na web, este é o componente que você deve utilizar.

Como diversos outros componentes no Android, você deve criar no seu App um Adaptador (classe que vai ser responsável por montar item a item da lista), um layout para o item agrupador (aquele no qual você clica para expandir a lista) e o item de detalhe (aquele que aparece quando você clicar no item agrupador). No nosso exemplo, vamos mostrar uma lista que exibe nomes de programas de TV e os detalhes em seguida.

Crie uma classe chamada ProgramaResumido como a seguir:

public class ProgramaResumido {
     public String Titulo;
     public String Horario;

     public ProgramaResumido(){

     }
}

Crie uma classe chamada ProgramaDetalhado como a seguir:

public class ProgramaDetalhado {
     public String Titulo;
     public String Titulo;
     public String Horario;
     public boolean Favorito;
     public Bitmap Imagem;

     public ProgramaDetalhado(){

     }
}<span style="color: #141412; font-family: 'Source Sans Pro', Helvetica, sans-serif; font-size: 16px; line-height: 1.5;"> </span>

Crie um layout para o agrupador que nosso Widget irá utilizar. No nosso exemplo, o XML abaixo:

<?xml version="1.0" encoding="utf-8"?>

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

android:layout_width="match_parent" android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="titulo"
android:id="@+id/titulo"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="30dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="horario"
android:id="@+id/horario"
android:layout_below="@+id/titulo"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="30dp" />

</RelativeLayout>

Crie um layout para os Itens. No nosso exemplo, o XML abaixo:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Favorito"
android:id="@+id/favorito"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:checked="false" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="titulo"
android:id="@+id/titulo"
android:layout_toEndOf="@+id/favorito"
android:layout_alignBottom="@+id/favorito"
android:layout_alignParentEnd="true"
android:layout_marginBottom="5dp"
android:layout_marginLeft="15dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="horario"
android:id="@+id/horario"
android:layout_below="@+id/titulo"
android:layout_alignStart="@+id/titulo"
android:layout_alignParentEnd="true" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:id="@+id/imagem"
android:layout_below="@+id/horario"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true" />

</RelativeLayout>

Em seguida, você vai precisar de uma classe para implementar a interface BaseExpandableAdapter que te permitirá customizar a maneira que um ExpandableListView irá trabalhar com seus dados.

public class Adaptador extends BaseExpandableListAdapter {

private Context context;
private List<ProgramaResumido> programasResumidos;
private List<ProgramaDetalhado> programasDetalhados;

public Adaptador(Context context, List<ProgramaResumido> programasResumidos, List<ProgramaDetalhado> programasDetalhados){

this.context = context;
this.programasResumidos = programasResumidos;
this.programasDetalhados = programasDetalhados;

}

@Override
public int getGroupCount() {
     return programasResumidos.size();
}

@Override
public int getChildrenCount(int groupPosition) {
     return 1;
}

@Override
public Object getGroup(int groupPosition) {
     return programasResumidos.get(groupPosition);
}

@Override
public Object getChild(int groupPosition, int childPosition) {
     return programasDetalhados.get(childPosition);
}

@Override
public long getGroupId(int groupPosition) {
     return groupPosition;
}

@Override
public long getChildId(int groupPosition, int childPosition) {
     return childPosition;
}

@Override
public boolean hasStableIds() {
     return false;
}

@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
     if(convertView == null){
          convertView = View.inflate(context, R.layout.grupo,      null);
     }

TextView titulo = (TextView) convertView.findViewById(R.id.titulo);
TextView horario = (TextView) convertView.findViewById(R.id.horario);

ProgramaResumido programaResumido = programasResumidos.get(groupPosition);

titulo.setText(programaResumido.Titulo);
horario.setText(programaResumido.Horario);

return convertView;
}

@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
if(convertView == null){
convertView = View.inflate(context, R.layout.item, null);
}

CheckBox favorito = (CheckBox) convertView.findViewById(R.id.favorito);
TextView titulo = (TextView) convertView.findViewById(R.id.titulo);
TextView horario = (TextView) convertView.findViewById(R.id.horario);

ImageView imagem = (ImageView) convertView.findViewById(R.id.imagem);

ProgramaDetalhado programaDetalhado = programasDetalhados.get(groupPosition);
favorito.setChecked(programaDetalhado.Favorito);
titulo.setText(programaDetalhado.Titulo);
horario.setText(programaDetalhado.Horario);
imagem.setImageBitmap(programaDetalhado.Imagem);
return convertView;
}

 

@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
     return true;
}
}

Finalmente, criamos o Layout da Atividade do nosso App com o XML abaixo:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin">

<ExpandableListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/lista"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>

E para o código da Atividade:

public class AtividadePrincipal extends Activity {
 
@Override
protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_atividade_principal);

ExpandableListView lista = (ExpandableListView) findViewById(R.id.lista);

List<ProgramaResumido> programasResumidos = new ArrayList<ProgramaResumido>();

ProgramaResumido programaResumido = new ProgramaResumido();
programaResumido.Titulo = "Titulo Primeiro";
programaResumido.Horario = "Dia 01/01 as 23:00";
programasResumidos.add(programaResumido);

programaResumido = new ProgramaResumido();
programaResumido.Titulo = "Titulo Segundo";
programaResumido.Horario = "Dia 02/02 as 23:00";
programasResumidos.add(programaResumido);

programaResumido = new ProgramaResumido();
programaResumido.Titulo = "Titulo Terceiro";
programaResumido.Horario = "Dia 03/03 as 23:00";
programasResumidos.add(programaResumido);

List<ProgramaDetalhado> programasDetalhados = new ArrayList<ProgramaDetalhado>();

ProgramaDetalhado programaDetalhado = new ProgramaDetalhado();
programaDetalhado.Favorito = true;
programaDetalhado.Titulo = "Titulo Primeiro";
programaDetalhado.Horario = "Dia 01/01 as 23:00";
programaDetalhado.Imagem = BitmapFactory.decodeResource(getResources(), R.drawable.starstuff300150);
programasDetalhados.add(programaDetalhado);

programaDetalhado = new ProgramaDetalhado();
programaDetalhado.Favorito = false;
programaDetalhado.Titulo = "Titulo Segundo";
programaDetalhado.Horario = "Dia 02/02 as 23:00";

programaDetalhado.Imagem = BitmapFactory.decodeResource(getResources(), R.drawable.starstuff300150);
programasDetalhados.add(programaDetalhado);

programaDetalhado = new ProgramaDetalhado();
programaDetalhado.Favorito = true;
programaDetalhado.Titulo = "Titulo Terceiro";
programaDetalhado.Horario = "Dia 03/03 as 23:00";
programaDetalhado.Imagem = BitmapFactory.decodeResource(getResources(), R.drawable.starstuff300150);

programasDetalhados.add(programaDetalhado);

Adaptador adaptador = new Adaptador(getBaseContext(), programasResumidos, programasDetalhados);

lista.setAdapter(adaptador);

}
}

Deste modo, quando você rodar o aplicativo, verá algo parecido com as Figuras 1 e 2.

     

 

Quer ver mais dicas como esta? Acesso e o IAI? site.iai.art.br