Android RecyclerView with GridLayout

RecyclerView with GridLayout

RecyclerView with GridLayout:

The RecyclerView is one of the more important UI elements in the world of Android; its function is to present of a list of items. It is more flexible than the ListView it replaced and can efficiently manage the recycling of the views if required.

GridLayout is quite like a table in that it is a layout manager that allows an application to insert items in a two-dimensional format. The textual content is arranged in the acquisition of a grid so that each item lies within a cell and each cell is of equal size.

Example:

                                    
                                      <!-- activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerViewLinear"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</RelativeLayout>

<!-- custom_recycler_grid.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="6dp">

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:contentPadding="6dp"
    android:layout_margin="4dp"
    android:scrollbars="vertical"
    android:focusable="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="8dp"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:id="@+id/image"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_marginBottom="10dp" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:text="Text"
            android:textStyle="bold"
            android:padding="3dp"
            android:textColor="@color/colorPrimaryDark" />

    </LinearLayout>

</androidx.cardview.widget.CardView>

</LinearLayout>

                                    
                                        // MainActivity.java

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    // Declare variables
    ArrayList<GridPojo> arrayList;
    RecyclerView recyclerView;
    AdapterRecycler adapterRecycler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize data for the grid
        gridListData();

        // Set up RecyclerView
        recyclerView = findViewById(R.id.recyclerViewLinear);
        recyclerView.setHasFixedSize(true);
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
        gridLayoutManager.setOrientation(RecyclerView.VERTICAL);
        recyclerView.setLayoutManager(gridLayoutManager);

        // Set up adapter and attach it to RecyclerView
        adapterRecycler = new AdapterRecycler(this, arrayList);
        recyclerView.setAdapter(adapterRecycler);
    }

    // Populate data for the grid
    private void gridListData() {
        arrayList = new ArrayList<>();

        arrayList.add(new GridPojo("Mobile", R.drawable.ic_smartphone));
        arrayList.add(new GridPojo("Internet", R.drawable.ic_internet));
        arrayList.add(new GridPojo("WiFi", R.drawable.ic_wifi));
        arrayList.add(new GridPojo("Database", R.drawable.ic_database));
        arrayList.add(new GridPojo("Battery", R.drawable.ic_battery));
        arrayList.add(new GridPojo("Alarm", R.drawable.ic_alarm_clock));
        arrayList.add(new GridPojo("Signal", R.drawable.ic_signal));
        arrayList.add(new GridPojo("Bluetooth", R.drawable.ic_bluetooth));
        arrayList.add(new GridPojo("Monitor", R.drawable.ic_monitor));
        arrayList.add(new GridPojo("Wallpaper", R.drawable.ic_wallpaper));
    }
}

// AdapterRecycler.java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;

public class AdapterRecycler extends RecyclerView.Adapter<AdapterRecycler.MyHolder> {

    // Declare variables
    Context context;
    ArrayList<GridPojo> arrayList;

    // Constructor
    public AdapterRecycler(Context context, ArrayList<GridPojo> arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }

    @NonNull
    @Override
    public AdapterRecycler.MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflate the layout for each grid item
        View view = LayoutInflater.from(context).inflate(R.layout.custom_recycler_grid, parent, false);
        MyHolder myHolder = new MyHolder(view);
        return myHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull AdapterRecycler.MyHolder holder, final int position) {
        // Bind data to the views in each grid item
        holder.name.setText(arrayList.get(position).getName());
        holder.image.setImageResource(arrayList.get(position).getImage());

        // Set click listener for each grid item
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, "" + arrayList.get(position).getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        // Return the number of items in the grid
        return arrayList.size();
    }

    // ViewHolder class to hold references to the views
    public static class MyHolder extends RecyclerView.ViewHolder {
        TextView name;
        ImageView image;

        public MyHolder(@NonNull View view) {
            super(view);
            name = view.findViewById(R.id.name);
            image = view.findViewById(R.id.image);
        }
    }
}

// GridPojo.java

public class GridPojo {

    // Model class to represent data for each grid item
    private String name;
    private int image;

    public GridPojo(String name, int image) {
        this.name = name;
        this.image = image;
    }

    public String getName() {
        return name;
    }

    public int getImage() {
        return image;
    }
}

                                      
                                        // MainActivity.kt

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

class MainActivity : AppCompatActivity() {

    // Declare variables
    private lateinit var arrayList: ArrayList<GridPojo>
    private lateinit var recyclerView: RecyclerView
    private lateinit var adapterRecycler: AdapterRecycler

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

        // Initialize data for the grid
        gridListData()

        // Set up RecyclerView
        recyclerView = findViewById(R.id.recyclerViewLinear)
        recyclerView.setHasFixedSize(true)
        val gridLayoutManager = GridLayoutManager(this, 2)
        gridLayoutManager.orientation = RecyclerView.VERTICAL
        recyclerView.layoutManager = gridLayoutManager

        // Set up adapter and attach it to RecyclerView
        adapterRecycler = AdapterRecycler(this, arrayList)
        recyclerView.adapter = adapterRecycler
    }

    // Populate data for the grid
    private fun gridListData() {
        arrayList = ArrayList()

        arrayList.add(GridPojo("Mobile", R.drawable.ic_smartphone))
        arrayList.add(GridPojo("Internet", R.drawable.ic_internet))
        arrayList.add(GridPojo("WiFi", R.drawable.ic_wifi))
        arrayList.add(GridPojo("Database", R.drawable.ic_database))
        arrayList.add(GridPojo("Battery", R.drawable.ic_battery))
        arrayList.add(GridPojo("Alarm", R.drawable.ic_alarm_clock))
        arrayList.add(GridPojo("Signal", R.drawable.ic_signal))
        arrayList.add(GridPojo("Bluetooth", R.drawable.ic_bluetooth))
        arrayList.add(GridPojo("Monitor", R.drawable.ic_monitor))
        arrayList.add(GridPojo("Wallpaper", R.drawable.ic_wallpaper))
    }
}

// AdapterRecycler.kt

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import android.widget.Toast
import androidx.recyclerview.widget.RecyclerView

class AdapterRecycler(private val context: Context, private val arrayList: ArrayList<GridPojo>) :
    RecyclerView.Adapter<AdapterRecycler.MyHolder>() {

    // ViewHolder class to hold references to the views
    class MyHolder(view: View) : RecyclerView.ViewHolder(view) {
        val name: TextView = view.findViewById(R.id.name)
        val image: ImageView = view.findViewById(R.id.image)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyHolder {
        // Inflate the layout for each grid item
        val view =
            LayoutInflater.from(context).inflate(R.layout.custom_recycler_grid, parent, false)
        return MyHolder(view)
    }

    override fun onBindViewHolder(holder: MyHolder, position: Int) {
        // Bind data to the views in each grid item
        holder.name.text = arrayList[position].name
        holder.image.setImageResource(arrayList[position].image)

        // Set click listener for each grid item
        holder.itemView.setOnClickListener {
            Toast.makeText(context, "${arrayList[position].name}", Toast.LENGTH_SHORT).show()
        }
    }

    override fun getItemCount(): Int {
        // Return the number of items in the grid
        return arrayList.size
    }
}

// GridPojo.kt

data class GridPojo(val name: String, val image: Int)