GridRecyclerView
is a native Android library simplifying the display of data in a grid view. The library offers the flexibility to showcase grids with section headers and varying column counts. It efficiently utilizes the Android RecyclerView, ensuring broad device support and easy extensibility.
Add jitpack
repository to your Android project, In the build.gradle
file at the end of repositories add the following line:
repositories {
mavenCentral()
maven { url 'https://jitpack.io' } // <-- Add this
}
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:
Begin by creating a helper class that implements GridRecyclerViewHelper
[https://github.com/koros/gridrecyclerview/blob/master/gridrecyclerview/src/main/java/com/github/koros/gridrecyclerview/GridRecyclerViewHelper.java]. 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 interface GridRecyclerViewHelper<K> {
RecyclerView.ViewHolder getHeaderViewHolder(@NonNull ViewGroup parent);
void onBindHeaderViewHolder(@NonNull RecyclerView.ViewHolder holder, K headerItem);
ViewGroup getGridView(K key, @NonNull ViewGroup parent);
GridCellViewHolder getGridViewHolder(K key, @NonNull ViewGroup parent);
}
In the code snipet above K
is whichever data type you chose to represent/hold the headers, The sample code uses POJO object GridHeader
https://github.com/koros/gridrecyclerview/blob/master/sampleapp/src/main/java/com/github/koros/sampleapp/model/GridHeader.java shown below:
public class GridHeader {
private String header;
private String subHeader;
private HeaderKey key;
public GridHeader(String header, HeaderKey key) {
this.header = header;
this.key = key;
}
// getters and setters
}
A complete example of GridRecyclerViewHelper
can be found in the sample application, https://github.com/koros/gridrecyclerview/blob/master/sampleapp/src/main/java/com/github/koros/sampleapp/grid/SampleGridRecyclerViewHelper.java, a sample snippet is shown below:
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);
}
}
@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);
}
}
}
Next, implement the GridCellViewHolder
interface to 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()));
}
}
In your main activity or fragment, set up the GridRecyclerViewAdapter
to manage your grid view.
The GridRecyclerViewAdapter
receives 3 parameters:
- GridRecyclerViewHelper
- Data to display in form of Key -> Value map, where key will represent different sections on the grid and value will be list of data to display. The list of data for each section is wrapped in a GridDescriptor [https://github.com/koros/gridrecyclerview/blob/master/gridrecyclerview/src/main/java/com/github/koros/gridrecyclerview/GridDescriptor.java], which also determines how many colums will be displayed per section
- Boolean flag which determines whether a header for an empty section should be shown,
false
by default
Below is a code excerpt from the sample app demonstrating the implementation of GridRecyclerView in your Android application.
public class MainActivity extends AppCompatActivity {
private GridRecyclerViewAdapter gridRecyclerViewAdapter;
private RecyclerView recyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recyclerView);
GridRecyclerViewHelper helper = new SampleGridRecyclerViewHelper();
Map<GridHeader, GridDescriptor<?>> gridItems = new HashMap<>();
GridDescriptor<Genre> genres = new GridDescriptor<>(1, getSampleGenres());
gridItems.put(new GridHeader("Genres", HeaderKey.GENRE), genres);
GridDescriptor<Movie> movies = new GridDescriptor<>(2, getSampleMovies());
gridItems.put(new GridHeader("Movies", HeaderKey.MOVIE), movies);
GridDescriptor<Actor> actors = new GridDescriptor<>(3, getSampleActors());
gridItems.put(new GridHeader("Actors", HeaderKey.ACTOR), actors);
gridRecyclerViewAdapter = new GridRecyclerViewAdapter(helper, gridItems, false);
recyclerView.setAdapter(gridRecyclerViewAdapter);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
}
}