Custom Gridview in fragment Android example

Hello ,Guys Today we will learn about Gridview and gridLayout in this tutorial.A Gridview is a ViewGroup the display items in two dimensional scrolling grid. The items in the grid come from the Adapter associated with this View.

What is the GridView and GridLayout ?

A Gridview is a ViewGroup the display items in two dimensional scrolling grid. A gridlayout is a layout through which we can display images or videos in a sequence. We can show any image or video from gridlayout in a good way.

Create New Project

First of all, you have to create a project in your Android Studio. For this, you will first go to file and then go to new project and click and create a new project. As soon as we create a project, we will see two files, first activity_main.xml and MainActivity.java

GridLayout

First we will see how to create gridlayout by layout like this image

gridlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10sp"
        android:columnCount="2"
        android:rowCount="5">

        <Button
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:text="Button"
            android:textSize="20sp" />
        <Button
            android:text="Button"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textSize="20sp"/>
        <Button
            android:text="Button"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textSize="20sp"/>
        <Button
            android:text="Button"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textSize="20sp"/>
        <Button
            android:text="Button"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textSize="20sp"/>

        <Button
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="5sp"
            android:text="Button"div
            android:textSize="20sp" />




    </GridLayout>



</ScrollView>

Android GridView Attributes

ScrollView :We are using a ScrollView in the layout, which will cause the layout to scroll.

GridLayout :A GridLayout is a ViewGroup the display items in two dimensional scrolling grid.In GridView, we have used columnCount, in which we have entered value 2, due to which item 2 will appear in the column, if we put 3 then three columns would print how much you want, but in columnCount 2 or 3, the items are good. Will appear in the layout from.

It can be created by xml layout without coding, ie no code has to be written for it, just paste the code above in the layout, then gridlayout will be created.

GridView

In GridView, with the help of Adapter, we will display the image and text in GridView with the help of cardView.For this, we will use RecyclerView in activity_main and a new layout to show the file in the layout, we can also name it something.

Given below is the code name of all layout and class.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/recycler"
    tools:context=".MainActivity">

</androidx.recyclerview.widget.RecyclerView>

Here we are using RecyclerView in activity_main, in which we will display one by one with the help of adapter.

MainActivity.java

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

public class MainActivity extends AppCompatActivity {
 private RecyclerView recyclerView;
 List<String>titles;
 List<Integer>images;
 GridAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView=findViewById(R.id.recycler);
        titles=new ArrayList<>();
        images=new ArrayList<>();
        titles.add("First");
        titles.add("Second");
        titles.add("Third");
        titles.add("Four");
        titles.add("Five");
        titles.add("Six");
        titles.add("Seven");
        titles.add("Eight");
        images.add(R.drawable.air);
        images.add(R.drawable.camera);
        images.add(R.drawable.g5);
        images.add(R.drawable.man);
        images.add(R.drawable.setting);
        images.add(R.drawable.trac);
        images.add(R.drawable.snooze);
        images.add(R.drawable.virus);
        adapter=new GridAdapter(this,titles,images);
        GridLayoutManager gridLayoutManager=new GridLayoutManager(this,2,GridLayoutManager.VERTICAL,false);
        recyclerView.setLayoutManager(gridLayoutManager);
        recyclerView.setAdapter(adapter);

    }
}

Here you will see an error named GridAdapter. To fix this, you will move the cursor over the error and right click and create a GridAdapter class and paste the code of GridAdapter in which the code is given below.

If you get an error of the image then you will create from the vector asset. After this you will see that through this class GridLayoutManager we can easily display the file gridlayoutManager as the parameter will take context and columnCount and take orientation if you do not give orientation. If you want, you can give two parameters

GridAdapter.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.List;

public class GridAdapter extends RecyclerView.Adapter<GridAdapter.ViewHolder> {

    Context mcontext;
    List<String>title;
    List<Integer> images;
    LayoutInflater layoutInflater;

    public GridAdapter(Context context, List<String>title, List<Integer>images)
    {
       mcontext=context;
       this.title=title;
       this.images=images;
       this.layoutInflater=LayoutInflater.from(mcontext);
    }
    @NonNull
    @Override
    public GridAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       View view=layoutInflater.inflate(R.layout.grid_layout,parent,false);
       return new ViewHolder(view);

    }

    @Override
    public void onBindViewHolder(@NonNull GridAdapter.ViewHolder holder, int position) {
        holder.textView.setText(title.get(position));
        holder.imageView.setImageResource(images.get(position));

    }

    @Override
    public int getItemCount() {
        return title.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;
        ImageView imageView;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            textView=itemView.findViewById(R.id.textView);
            imageView=itemView.findViewById(R.id.imageView);


            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                  //  Toast.makeText(mcontext, "Clicked :"+ getAdapterPosition(), Toast.LENGTH_SHORT).show();
                    if (getAdapterPosition()==0)
                    {
                        Toast.makeText(mcontext, "0 position click :"+ getAdapterPosition(), Toast.LENGTH_SHORT).show();
                    }
                    else if (getAdapterPosition()==4)
                    {
                        Toast.makeText(mcontext, "4"+ getAdapterPosition(), Toast.LENGTH_SHORT).show();
                    }

                  else   if (getLayoutPosition()==6)
                    {
                        Toast.makeText(mcontext, "6"+ getAdapterPosition(), Toast.LENGTH_SHORT).show();
                    }

                    else {
                        Toast.makeText(mcontext, "Clicked :"+ getAdapterPosition(), Toast.LENGTH_SHORT).show();
                    }
                }
            });
        }
    }
}

Here you will get the error of grid_layout. To fix this, move the cursor over the error and right click, you will create the layout and put the code below in it.

grid_layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        app:cardElevation="10dp"
        android:padding="15dp"
        app:contentPadding="10dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true"
        app:cardCornerRadius="2dp">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginTop="1dp"

            android:layout_gravity="center_horizontal"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           android:textColor="@color/purple_700"
            android:layout_gravity="center"
            android:text="Text "
            android:textSize="15sp"
            android:layout_marginTop="30dp" />


    </androidx.cardview.widget.CardView>

</RelativeLayout>

And finally, by running this project, we will see below some screenshots of how this app will work.

I hope you like this article very much.

Thank you...