RecyclerView using GridLayoutManager in Android With Example

Using GridLayoutManager with RecyclerView allows you to display items in a grid format. Let's go through a simple example where we display a grid of numbers.

1. XML Layout:

Add the RecyclerView in your layout XML file.

<!-- res/layout/activity_main.xml -->
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2. Adapter:

Here's a simple adapter for displaying numbers:

class NumberAdapter(private val numbers: List<String>) :
    RecyclerView.Adapter<NumberAdapter.NumberViewHolder>() {

    class NumberViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val textView: TextView = itemView.findViewById(R.id.textView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NumberViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_number, parent, false)
        return NumberViewHolder(view)
    }

    override fun onBindViewHolder(holder: NumberViewHolder, position: Int) {
        holder.textView.text = numbers[position]
    }

    override fun getItemCount(): Int = numbers.size
}

3. Item Layout:

This is the layout for each number in the grid.

<!-- res/layout/item_number.xml -->
<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="16dp"
    android:background="?attr/selectableItemBackground" />

4. Set up RecyclerView with GridLayoutManager:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.GridLayoutManager

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Sample number list
        val numbers = List(50) { "Item $it" }

        val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
        recyclerView.layoutManager = GridLayoutManager(this, 3)  // 3 columns
        recyclerView.adapter = NumberAdapter(numbers)
    }
}

In this setup, the GridLayoutManager constructor is given the number of columns we want in our grid, which is 3 in this example. This ensures that the RecyclerView will display items in a 3xN grid format.

Now, when you run this example, you should see a grid of numbers displayed in your app. You can modify the number of columns, the item layout, and the data to suit your needs.

Implementing GridLayoutManager in RecyclerView Android:

Description: Demonstrates setting up a basic GridLayoutManager in a RecyclerView for displaying data in a grid format.

Example Code:

RecyclerView recyclerView = findViewById(R.id.recyclerView);
GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2); // 2 columns
recyclerView.setLayoutManager(gridLayoutManager);

Grid layout example code in Android RecyclerView:

Description: Provides a simple example of how to structure your RecyclerView's XML layout to display a grid.

Example Code:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
    app:spanCount="2" />

Customizing GridLayoutManager in RecyclerView:

Description: Explores various customization options for GridLayoutManager, such as changing the span size for specific items.

Example Code:

gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        return (position % 3 == 0) ? 2 : 1; // Custom span size logic
    }
});

Handling item click events in GridLayoutManager RecyclerView:

Description: Shows how to implement item click handling in a GridLayoutManager RecyclerView.

Example Code:

recyclerView.addOnItemTouchListener(new RecyclerItemClickListener(this,
    new RecyclerItemClickListener.OnItemClickListener() {
        @Override
        public void onItemClick(View view, int position) {
            // Handle item click
        }
    }));

Adding spacing between items in GridLayoutManager RecyclerView:
- Description: Adds padding or spacing between items in a GridLayoutManager RecyclerView for better visual appeal.
- Example Code:
```
int spacing = getResources().getDimensionPixelSize(R.dimen.spacing);
recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, spacing, true));
```