Android Custom ListView - With Headers and Footer

September 9, 2017 Oclemy Android ListView 3 minutes, 26 seconds

This is android listview customization tutorial.We see how to customize a listview to have grouped headers and footer and display our images and text.

Section 1 : Model Class

This is our POJO class, our data object.

It represents a single Player object with name and image properties.

package com.tutorials.listviewheaders;

public class Player {

  private String name;
  private int img;

   //CONSTRUCTOR
  public Player(String name,int img) {
    // TODO Auto-generated constructor stub
    this.img=img;
    this.name=name;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public int getImg() {
    return img;
  }

  public void setImg(int img) {
    this.img = img;
  }
}

Section 2 : Adapter Class

This is our Custom Adapter class.

This class derives from android.widget.BaseAdapter class.

package com.tutorials.listviewheaders;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class Adapter extends BaseAdapter {

  ArrayList<Object> players;
  Context c;
  LayoutInflater inflater;
  static final int ROW=0;
  static final int HEADER=1;

  public Adapter(Context c,ArrayList<Object> players) {
    // TODO Auto-generated constructor stub
    this.c=c;
    this.players=players;
  }

   //GET TOTAL NUMBER OF ITEMS IN ARRAYLIST
  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return players.size();
  }

   //GET A SINGLE ITEM FROM THE ARRAYLIST
  @Override
  public Object getItem(int pos) {
    // TODO Auto-generated method stub
    return players.get(pos);
  }

    //GET ITEM IDENTIFIER
  @Override
  public long getItemId(int pos) {
    // TODO Auto-generated method stub
    return pos;
  }

  @Override
  public int getItemViewType(int position) {

     //CHECK IF CURRENT ITEM IS PLAYER THEN RETURN ROW
    if(getItem(position) instanceof Player)
    {
      return ROW;
    }

     //OTHERWISE RETURN HEADER
    return HEADER;
  }

  @Override
  public int getViewTypeCount() {
    // TODO Auto-generated method stub
    return 2;
  }
  @Override
  public View getView(int pos, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

      //TYPE OF VIEW
    int type=getItemViewType(pos);

    //IF THERE IS NO VIEW CREATE IT
    if(convertView==null)
    {
      inflater=(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

      switch (type) {
      case ROW:
        convertView=inflater.inflate(R.layout.rowmodel, null);
        break;
       case HEADER:
              convertView=inflater.inflate(R.layout.headermodel,null);
      default:
        break;
      }
    }

     //OTHERWISE CHECK IF ITS ROW OR HEADER AND SET DATA ACCORDINGLY
    switch (type) {
    case ROW:
      Player p=(Player) getItem(pos);

        //INITIALIZE TEXTVIEW AND IMAGEVIEW
      TextView nameTv=(TextView) convertView.findViewById(R.id.nameTv);
       ImageView img=(ImageView)convertView.findViewById(R.id.imageView1);

       //SET TEXT AND IMAGE
       nameTv.setText(p.getName());
       img.setImageResource(p.getImg());

      break;
    case HEADER:
      String header=(String) getItem(pos);
      TextView headerTv=(TextView) convertView.findViewById(R.id.headerTv);

       //SET HEADER TEXT AND MAYBE BACKGROUND
      headerTv.setText(header);
      headerTv.setBackgroundColor(Color.parseColor("#33363c"));

    default:
      break;
    }

    return convertView;
  }

}

Section 3 : MainActivity Class

This is our Main activity class.

This class derives from android.app.Activity.

package com.tutorials.listviewheaders;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends Activity {

  ListView lv;
  String[] players = { "Ander Herera", "Eden Hazard", "Aaron Ramsey",
      "Michael Carrick", "Juan Mata", "Van Persie", "Alexis Sanchez" };
  int[] images = { R.drawable.herera, R.drawable.hazard, R.drawable.ramsey,
      R.drawable.carrick, R.drawable.mata, R.drawable.vanpersie,
      R.drawable.sanchez };

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // INITIALIZE LISTVIEW
    lv = (ListView) findViewById(R.id.listView1);

    // CREATE ADAPTER,SET IT TO LISTVIEW
    Adapter adapter = new Adapter(this, getPlayers());
    lv.setAdapter(adapter);
  }

  // THIS METHOD SHALL RETURN AN ARRAYLIST CONTAINING PLAYERS AND HEADERS
  private ArrayList<Object> getPlayers() {
    // PLAYER OBJECTS
    Player p0 = new Player(players[0], images[0]);
    Player p1 = new Player(players[1], images[1]);
    Player p2 = new Player(players[2], images[2]);
    Player p3 = new Player(players[3], images[3]);
    Player p4 = new Player(players[4], images[4]);
    Player p5 = new Player(players[5], images[5]);
    Player p6 = new Player(players[6], images[6]);

    // ARRAYLIST TO HOLD ALL PALYER OBJECTS AND HEADERS
    ArrayList<Object> people = new ArrayList<Object>();

    // THIS IS THE FIRST HEADER
    people.add("                    Creative Midfielders ");

    // PLAYERS
    people.add(p0);
    people.add(p1);
    people.add(p2);

    // HEADER
    people.add("                     Midfield Dynamos   ");
    // MORE PLAYERS
    people.add(p3);
    people.add("                     Goal Poachers    ");
    people.add(p4);
    people.add(p5);
    people.add(p6);
    // FOOTER
    people.add(" @ 2016            FOOTER");

    return people;

  }

}

Best Regards, Oclemy.

Comments