Android Custom ListView - With Headers and Footer


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.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think

Dear readers drop us your comments below. We are building a community of students and learners. Start by dropping us your suggestions below. What tutorials do you want us to do for example? Where can we improve? What are some awesome resources out there? Do you have any code you want to share with us?
By the way that example or snippet you have lying in your computer can really help beginner programmers. We can share it here with other students.

Previous Post Next Post