Array Adapter with Grid

View
Output
What is Gridview?
• A GridView is a type of AdapterView that
displays items in a two-dimensional scrolling
grid.
• Items are inserted into this grid layout from
a database or from an array.
• The adapter is used for displaying this
data, setAdapter() method is used to join
the adapter with GridView. 
• The main function of the adapter in GridView
is to fetch data from a database or array and
insert each piece of data in an appropriate
item that will be displayed in GridView.
XML Attributes of GridView
• android:numColumns: This attribute of GridView will be used
to decide the number of columns that are to be displayed in
Grid.
• android:horizontalSpacing: This attribute is used to define
the spacing between two columns of GridView.
• android:verticalSpacing: This attribute is used to specify the
spacing between two rows of GridView.
Step 1: Creating a New Project
• Create an Empty Project and select Java as a your
programming Language
 <?xml version="1.0" encoding="utf-8"?>
Step 2: Modify <androidx.constraintlayout.widget.ConstraintLayout

activity_main.x xmlns:android="http://schemas.android.com/apk/res/android"
ml file xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
Add GridView
to activity_main <!-- android:numColumns=2 is the number of columns for
Grid View
.xml file. android:horizontalSpacing is the space between
horizontal
grid items.-->
<GridView
android:id="@+id/idGVcourses"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:horizontalSpacing="6dp"
android:numColumns="2"
android:verticalSpacing="6dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Create an
XML layout file for
GridView
Create an XML file for grid item to
be displayed in GridView. Click on
the app > res > layout > Right-
Click > Layout Resource file and
then name the file as card_item.
Below is the code for
the card_item.xml file.
<?xml version="1.0" encoding="utf-8"?>
<!--XML implementation of Card Layout-->
<androidx.cardview.widget.CardView
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="120dp"
android:layout_gravity="center"
android:layout_margin="5dp"
app:cardCornerRadius="5dp"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
Step 3:
Continuation of the <ImageView
XML file
Note: Please add a small
icon like image in the
imageview inside drawable
android:id="@+id/idIVcourse"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/idTVCourse"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textAlignment="center" />

</LinearLayout>

</androidx.cardview.widget.CardView>
Step 4: Create a Modal Class for storing
Data
• Modal Class is the JAVA Class that handles data to be added in
each GridView item of GridView. For Creating Modal Class.
• Now click on app > java > apps package name > Right-Click on
it.
• Then Click on New > Java Class.
• Name your Java Class file as CourseModel.
 public class CourseModel {

Step 4: Create a Modal//// string course_name for storing course_name

and imgid for storing image id.
Class for storing Data private String course_name;
private int imgid;

public CourseModel(String course_name, int imgid) {

this.course_name = course_name;
this.imgid = imgid;
}

public String getCourse_name() {

return course_name;
}

public void setCourse_name(String course_name) {

this.course_name = course_name;
}

public int getImgid() {

return imgid;
}

public void setImgid(int imgid) {

this.imgid = imgid;
}
}
Step 5: Create an Adapter Class
• Adapter Class adds the data from Modal Class in each item of
GridView which is to be displayed on the screen. For Creating
Adapter Class.
• Now click on app > java > apps package name > Right-
Click on it.
• Then Click on New > Java Class.
• Name your Java Class file as CourseGVAdapter.
Layout Inflaters
• "Inflating" a view means taking the layout XML and parsing it to
create the view and viewgroup objects from the elements and
their attributes specified within, and then adding the
hierarchy of those views and viewgroups to the parent
ViewGroup.
• When you call setContentView(), it attaches the views it
creates from reading the XML to the activity.
• You can also use LayoutInflater to add views to another
ViewGroup, which can be a useful tool in a lot of
circumstances.
 @NonNull
Step 5: Create an Adapter Class @Override
public View getView(int position, @Nullable View
import android.content.Context;
convertView, @NonNull ViewGroup parent) {
import android.view.LayoutInflater;
View listitemView = convertView;
import android.view.View;
if (listitemView == null) {
import android.view.ViewGroup;
// Layout Inflater inflates each item to be
import android.widget.ArrayAdapter;
displayed in GridView.
import android.widget.ImageView;
listitemView =
import android.widget.TextView;
LayoutInflater.from(getContext()).inflate(R.layout.card
import androidx.annotation.NonNull;
_item, parent, false);
import androidx.annotation.Nullable;
}
import java.util.ArrayList;
CourseModel courseModel = getItem(position);
TextView courseTV =
public class CourseGVAdapter extends
listitemView.findViewById(R.id.idTVCourse);
ArrayAdapter<CourseModel> {
ImageView courseIV =
public CourseGVAdapter(@NonNull Context
listitemView.findViewById(R.id.idIVcourse);
context, ArrayList<CourseModel>
courseTV.setText(courseModel.getCourse_name());
courseModelArrayList) {
super(context, 0, courseModelArrayList);
courseIV.setImageResource(courseModel.getImgid());
}
return listitemView;
}
}
Step 6: Modify
the MainActivity.java file
Now in this import android.os.Bundle;
file, we will import android.widget.GridView;
perform all import androidx.appcompat.app.AppCompatActivity;
backend import java.util.ArrayList;
operations that
will be adding public class MainActivity extends AppCompatActivity {
data to
GridView. GridView coursesGV;

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

coursesGV = findViewById(R.id.idGVcourses);
Step 6: Modify ArrayList<CourseModel> courseModelArrayList = new
the MainActivity.java file ArrayList<CourseModel>();
courseModelArrayList.add(new CourseModel("DSA",
R.drawable.ic_gfglogo));
courseModelArrayList.add(new CourseModel("JAVA",
Now in this R.drawable.ic_gfglogo));
file, we will courseModelArrayList.add(new CourseModel("C++",
perform all R.drawable.ic_gfglogo));
backend courseModelArrayList.add(new CourseModel("Python",
operations that R.drawable.ic_gfglogo));
will be adding courseModelArrayList.add(new CourseModel("Javascript",
data to R.drawable.ic_gfglogo));
GridView. courseModelArrayList.add(new CourseModel("DSA",
R.drawable.ic_gfglogo));

CourseGVAdapter adapter = new CourseGVAdapter(this,

courseModelArrayList);
coursesGV.setAdapter(adapter);
}
}
Output