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.

Connotative

How did you eventually solve this problem? – Condon

Hello, i managed to add the categories but they are shown as a grid cell. Can you help me with this ? – Mandamus

That's just a Gridview instead of a Listview. – Connotative

I am also experiencing the same behavior as Victor. By simply using this SeparatedListAdapter on a GridView instead of a ListView, the headers are also constrained by the grid. – Lombardy

@Michell Bak . Can u plz share some code for doing this. I am stuck here. – Specialist

The Best Smaple code is github.com/guoGavin/Andorid-StickyHeaderGridView here – Hamartia

@MichellBak can u pls take a look here #32182495 to achive this imgur.com/CahCCqI – Arietta

Answer 1

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

Rosaliarosalie

That looks pretty sweet. Thanks for the input! – Connotative

Just revised this again, and this is actually a much better solution. – Connotative

im struggling to do even by looking at both the tutorials.. u guys mind helping me? – Quartile

can you help me how to pass data from ArrarList<> – Haight

The project mentions on github that it has been superseeded by github.com/TonicArtos/SuperSLiM – Woodrowwoodruff

Answer 2

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

Stylite

can you advice how to add click listener to this adapter? – Coopt

@Coopt On SimpleAdapter class, on onBindViewHolder method add this: holder.itemView.setOnClickListener – Integumentary

Thank you @Integumentary for your answer. Currently I am not developing mobile apps any more. It was 3 years ago I asked this question. It seems way you have provided will work correctly. – Coopt

Answer 3

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.

Grandee

How does this have any votes? The SeperatedListAdapter only seems to apply to ListViews... – Snashall

@ingsaurabhi will this work for gridview too with this library github.com/TonicArtos/StickyGridHeaders – Arietta

Answer 4

You can modify an Android RecyclerView to return a grids at each row see here

Add the `gridrecyclerview` library to your project

implementation 'com.github.koros:gridrecyclerview:1.0.2'

Once the library is added, follow these steps to create a grid view:

1. Implement the GridRecyclerViewHelper

Begin by creating a helper class that implements GridRecyclerViewHelper. This class manages the creation of headers, the binding of header data, the setup of grid views, and the creation of grid view holders.

public class SampleGridRecyclerViewHelper implements GridRecyclerViewHelper<GridHeader> {
   @NonNull
   @Override
   public RecyclerView.ViewHolder getHeaderViewHolder(@NonNull ViewGroup parent) {
       ViewGroup view = (ViewGroup) LayoutInflater.from(parent.getContext()).inflate(R.layout.header_view, parent, false);
       return new HeaderViewHolder(view);
   }

   @Override
   public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder, GridHeader headerItem) {
       ((HeaderViewHolder) holder).bind(headerItem);
   }

   @NonNull
   @Override
   public ViewGroup getGridView(GridHeader key, @NonNull ViewGroup parent) {
       switch (key.getKey()) {
           case ACTOR:
               return (ViewGroup) LayoutInflater.from(parent.getContext()).inflate(R.layout.actor_view, parent, false);
           case GENRE:
               return (ViewGroup) LayoutInflater.from(parent.getContext()).inflate(R.layout.genre_view, parent, false);
           case MOVIE:
               return (ViewGroup) LayoutInflater.from(parent.getContext()).inflate(R.layout.movie_view, parent, false);
           case STUDIO:
               return (ViewGroup) LayoutInflater.from(parent.getContext()).inflate(R.layout.studio_view, parent, false);
           case DIRECTOR:
               return (ViewGroup) LayoutInflater.from(parent.getContext()).inflate(R.layout.director_view, parent, false);
           default:
               throw new IllegalArgumentException("Unknown Header Key Value");
       }
   }

   @NonNull
   @Override
   public GridCellViewHolder getGridViewHolder(GridHeader key, @NonNull ViewGroup parent) {
       switch (key.getKey()) {
           case ACTOR:
               return new ActorViewHolder(parent);
           case GENRE:
               return new GenreViewHolder(parent);
           case MOVIE:
               return new MovieViewHolder(parent);
           case STUDIO:
               return new StudioViewHolder(parent);
           case DIRECTOR:
               return new DirectorViewHolder(parent);
           default:
               throw new IllegalArgumentException("Unknown Header Key Value");
       }
   }
}

The GridHeader class serves as a Plain Old Java Object (POJO) holding information about grid section headers.

2. Implement ViewHolder for Each Grid Cell

Next, implement the GridCellViewHolder interface to efficiently bind data to each type of grid cell.

public abstract class GridCellViewHolder<T> extends RecyclerView.ViewHolder {
    // Implement the bind method to efficiently bind data to the ViewHolder.
}

For instance, create a specialized ViewHolder for actor cells:

public class ActorViewHolder extends GridCellViewHolder<Actor> {
    private final Context context;
    private final TextView name;
    private final ImageView image;

    public ActorViewHolder(@NonNull View itemView) {
        super(itemView);
        this.context = itemView.getContext();
        this.name = itemView.findViewById(R.id.name);
        this.image = itemView.findViewById(R.id.image);
    }

    @Override
    public void bind(Actor actor) {
        this.name.setText(actor.getName());
        this.image.setImageDrawable(getDrawableFromName(context, actor.getImage()));
    }
}

Cummins