Click here to Skip to main content
12,242,718 members (69,116 online)
Click here to Skip to main content
Add your own
alternative version


6 bookmarked

Customized StickyGridHeaders

, 13 Sep 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
I customized StickyGridHeaders to work on any data and group by any data.


I customized StickyGridHeaders to group any type of data and group by any data.

Using the Code

I will explain every part of the code and classes that need to be changed in order to make it work as required.

We will change in the following classes:

  1. StickyGridHeadersSimpleArrayAdapter
  2. StickyGridHeadersSimpleAdapter
  3. StickyGridHeadersSimpleWrapper

1. StickyGridHeadersSimpleArrayAdapter

  1. Let's get our class ready to hold our ArrayList data by changing the constructor and init() functions.
    //Initialize an ArrayList that holds the data received by constructor
    private ArrayList<HashMap<String, String>> DataArray;
    //Added a new parameter to both constructors of type ArrayList that holds our data
    public StickyGridHeadersSimpleArrayAdapter(Context context,
    int headerResId, int itemResId , ArrayList<HashMap<String, String>> data) {
         init(context, headerResId, itemResId, data);
    //Passing the data to our prive ArrayList DataArray
    private void init(Context context, int headerResId,
    int itemResId, ArrayList<HashMap<String, String>> data) {
         this.mHeaderResId = headerResId;
         this.mItemResId = itemResId;
         this.DataArray = data;
         mInflater = LayoutInflater.from(context);
  2. Change getCount() function to return the right count of our data ArrayList.
    public int getCount() {
         return DataArray.size();
  3. Change getItem() function to return a specific Item of our data ArrayList depending on position parameter.
    public HashMap<string> getItem(int position) {
         return DataArray.get(position);
  4. Change getHeaderId() function to work with an element inside ArrayList. In my example, it's "Name" .
    public CharSequence getHeaderId(int position) {
    //Change Item Type from "T" to "HashMap"
      HashMap<string> item  = getItem(position);
      CharSequence value;
      //get the string that you want to group by.Here i would like to group by "Name"
      if (item.get("Name") instanceof CharSequence) {
            //Insert it inside value variable
            value = (CharSequence) item.get("Name");
      } else {
            //Insert it inside value variable
            value = item.get("Name").toString();
      return value.subSequence(0, 1);
  5. Change getHeaderView() function. One of the most important functions that will return the string that will appear on the Header.
    public View getHeaderView(int position, View convertView, ViewGroup parent) {
        HeaderViewHolder holder;
        if (convertView == null) {
            convertView = mInflater.inflate(mHeaderResId, parent, false);
            holder = new HeaderViewHolder();
            holder.textView = (TextView) convertView.findViewById(;
        } else {
            holder = (HeaderViewHolder) convertView.getTag();
        HashMap<string> item = getItem(position);
        CharSequence string;
        if (item.get("Name") instanceof CharSequence) {
            string = (CharSequence) item.get("Name");
        } else {
            string = item.get("Name").toString();
        // set header text as first char in string
        //HERE the Text that will appear on header ,you can change the subSequence to any character
        //like display 1 character as below link or 2 or ( item.get("Name").length - 1 )
        holder.textView.setText(string.subSequence(0, 1));
        return convertView;
  6. Change getView() function. One of the most important functions that will return the data that will appear.
    You can check More Information field below to change the header and data style or add an imageview to display.
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
             convertView = mInflater.inflate(mItemResId, parent, false);
             holder = new ViewHolder();
             holder.textView = (TextView) convertView.findViewById(;
        } else {
             holder = (ViewHolder) convertView.getTag();
        HashMap<String, String> item = getItem(position);
        if (item.get("Name") instanceof CharSequence) {
             holder.textView.setText((CharSequence) item.get("Name"));
        } else {
        return convertView;

2. StickyGridHeadersSimpleAdapter

  1. Change the type of returned data from long to CharSequence.
    CharSequence getHeaderId(int position);

3. StickyGridHeadersSimpleWrapper

  1. Change the type of "mapping" from long to CharSequence.
    protected HeaderData[] generateHeaderList(StickyGridHeadersSimpleAdapter adapter) {
       //Change Map from long to CharSequence
       Map<CharSequence, HeaderData> mapping = new HashMap<CharSequence, HeaderData>();
       List<HeaderData> headers = new ArrayList<HeaderData>();
       for (int i = 0; i < adapter.getCount(); i++) {
           CharSequence headerId = adapter.getHeaderId(i);
           HeaderData headerData = mapping.get(headerId);
           if (headerData == null) {
               headerData = new HeaderData(i);
           mapping.put(headerId, headerData);
       return headers.toArray(new HeaderData[headers.size()]);

More Information

  • You can change the Header Style from header.xml.
  • You can change the item data to display from item.xml.
  • You must include the gridview com.example.stickyheadertest.StickyGridHeadersGridView to get it work.

Thank you everyone for reading this tip, and hopefully it helps everyone out.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ahmed Alaa El-Din
Software Developer Enozom Software Company
Egypt Egypt
No Biography provided

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160426.1 | Last Updated 13 Sep 2013
Article Copyright 2013 by Ahmed Alaa El-Din
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid