Android GridView with categories?

Question

Is it possible to use categories or some sort of headers with a GridView in Android?

I put together a quick illustration of what I was thinking about:

Thanks a lot.

Answer 1

You can use Stickygridheaders library directly or as a model to create your own widget.

Answer 2

probably this code will help you. This is SectionedGridRecyclerViewAdapter, result looks like this:

Answer 3

You can modify the usual listview adapter to return a grids at each row see here

public GenericModelAdapter(Context context, int textViewResourceId, List<Map<String, List<Object>>> items, Map<String, String> sectionHeaderTitles, int numberOfCols, View.OnClickListener mItemClickListener){
    super(context, textViewResourceId, items);
    this.items = items;
    this.numberOfCols = numberOfCols;
    layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    this.mItemClickListener = mItemClickListener;
    this.sectionHeaderTitles = sectionHeaderTitles;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    if(isHeaderPosition(position)){
        convertView = layoutInflater.inflate(R.layout.grid_header_view, null);

        TextView headerText = (TextView)convertView.findViewById(R.id.headerText);
        String section = getItemTypeAtPosition(position);
        headerText.setText(getHeaderForSection(section));
        return convertView;
    }else{
        LinearLayout row = (LinearLayout)layoutInflater.inflate(R.layout.row_item, null);
        Map<String, List<Object>> map = getItem(position);
        List<Object> list = map.get(getItemTypeAtPosition(position));

        for (int i = 0; i < numberOfCols; i++){
            FrameLayout grid = (FrameLayout)layoutInflater.inflate(R.layout.grid_item, row, false);
            ImageView imageView;
            if (i < list.size()){
                GenericModel model = (GenericModel)list.get(i);
                if (grid != null){
                    imageView = (ImageView)grid.findViewWithTag("image");
                    imageView.setBackgroundResource(model.getImageResource());

                    TextView textView = (TextView)grid.findViewWithTag("subHeader");
                    textView.setText(model.getHeader());

                    grid.setTag(R.id.row, position);
                    grid.setTag(R.id.col, i);
                    grid.setOnClickListener(mItemClickListener);
                }
            }else{
                if (grid != null){
                    grid.setVisibility(View.INVISIBLE);
                    grid.setOnClickListener(null);
                }
            }
            row.addView(grid);
        }
        return row;
    }
}

@Override
public int getCount() {
    int totalItems = 0;
    for (Map<String, List<Object>> map : items){
        Set<String> set = map.keySet();
        for(String key : set){
            //calculate the number of rows each set homogeneous grid would occupy
            List<Object> l = map.get(key);
            int rows = l.size() % numberOfCols == 0 ? l.size() / numberOfCols : (l.size() / numberOfCols) + 1;

            // insert the header position
            if (rows > 0){
                headerPositions.add(String.valueOf(totalItems));
                offsetForItemTypeMap.put(key, totalItems);

                itemTypePositionsMap.put(key, totalItems + "," + (totalItems + rows) );
                totalItems += 1; // header view takes up one position
            }
            totalItems+= rows;
        }
    }
    return totalItems;
}

@Override
public Map<String, List<Object>> getItem(int position) {
    if (!isHeaderPosition(position)){
        String itemType = getItemTypeAtPosition(position);
        List<Object> list = null;
        for (Map<String, List<Object>> map : items) {
            if (map.containsKey(itemType)){
                list = map.get(itemType);
                break;
            }
        }
        if (list != null){
            int offset = position - getOffsetForItemType(itemType);
            //remove header position
            offset -= 1;
            int low = offset * numberOfCols;
            int high = low + numberOfCols  < list.size() ? (low + numberOfCols) : list.size();
            List<Object> subList = list.subList(low, high);
            Map<String, List<Object>> subListMap = new HashMap<String, List<Object>>();
            subListMap.put(itemType, subList);
            return subListMap;
        }
    }
    return null;
}

public String getItemTypeAtPosition(int position){
    String itemType = "Unknown";
    Set<String> set = itemTypePositionsMap.keySet();

    for(String key : set){
        String[] bounds = itemTypePositionsMap.get(key).split(",");
        int lowerBound = Integer.valueOf(bounds[0]);
        int upperBoundary = Integer.valueOf(bounds[1]);
        if (position >= lowerBound && position <= upperBoundary){
            itemType = key;
            break;
        }
    }
    return itemType;
}

public int getOffsetForItemType(String itemType){
    return offsetForItemTypeMap.get(itemType);
}

public boolean isHeaderPosition(int position){
    return headerPositions.contains(String.valueOf(position));
}

private String getHeaderForSection(String section){
    if (sectionHeaderTitles != null){
        return sectionHeaderTitles.get(section);
    }else{
        return section;
    }
}

Answer 4

I think You can do it but you have to implement Jeff Shrkey's SeparatedListAdapter

There isn’t an easy way of creating these separated lists, so I’ve put together SeparatedListAdapter which does it quickly. To summarize, we’re creating a new BaseAdapter that can contain several other Adapters, each with their own section headers.