Click here to Skip to main content
Click here to Skip to main content

Customized StickyGridHeaders

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

Introduction

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.
        @Override
        public int getCount() {
             return DataArray.size();
        }
  3. Change getItem() function to return a specific Item of our data ArrayList depending on position parameter.
        @Override
        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.
        @SuppressWarnings("unchecked")
        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(android.R.id.text1);
                convertView.setTag(holder);
            } 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.
        @Override
        @SuppressWarnings("unchecked")
        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(android.R.id.text1);
                 convertView.setTag(holder);
            } 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 {
                 holder.textView.setText(item.get("Name").toString());
            }
    
            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);
                   headers.add(headerData);
               }
               headerData.incrementCount();
               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.

License

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

Share

About the Author

Ahmed Alaa El-Din
Software Developer Enozom Software Company http://enozom.com/enozom/
Egypt Egypt
No Biography provided
Follow on   LinkedIn

Comments and Discussions

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