GRIDVIEW IN ANDROID

 

A GridView is a type of AdapterView that displays items in a two-dimensional scrolling grid.

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

 

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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">

  

    <!-- android:numColumns=2 is the number of columns for Grid View

         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>

 

 

Create an XML layout file for each item of GridView

Create an XML file for each 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">

  

        <ImageView

            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>

Create a Model Class for Storing Data

Model Class is the Java/Kotlin Class that handles data to be added to each GridView item of GridView. For Creating Model Class. 

Now click on app > java > apps package name > Right-Click on it. Then Click on New > Java Class. Name your Java/Kotlin Class file as CourseModel. Below is the code for the <CourseModel file.

public class CourseModel {

  

    // string course_name for storing course_name 

    // and imgid for storing image id.

    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;

    }

}

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. Below is the code for the CourseGVAdapter file.

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import androidx.annotation.NonNull;

import androidx.annotation.Nullable;

import java.util.ArrayList;

  

public class CourseGVAdapter extends ArrayAdapter<CourseModel> {

      

    public CourseGVAdapter(@NonNull Context context, ArrayList<CourseModel> courseModelArrayList) {

        super(context, 0, courseModelArrayList);

    }

  

    @NonNull

    @Override

    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        

        View listitemView = convertView;

        if (listitemView == null) {

            // Layout Inflater inflates each item to be displayed in GridView.

            listitemView = LayoutInflater.from(getContext()).inflate(R.layout.card_item, parent, false);

        }

        

        CourseModel courseModel = getItem(position);

        TextView courseTV = listitemView.findViewById(R.id.idTVCourse);

        ImageView courseIV = listitemView.findViewById(R.id.idIVcourse);

        

        courseTV.setText(courseModel.getCourse_name());

        courseIV.setImageResource(courseModel.getImgid());

        return listitemView;

    }

}

Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.

import android.os.Bundle;

import android.widget.GridView;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;

  

public class MainActivity extends AppCompatActivity {

  

    GridView coursesGV;

  

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        

        coursesGV = findViewById(R.id.idGVcourses);

        ArrayList<CourseModel> courseModelArrayList = new ArrayList<CourseModel>();

        

        courseModelArrayList.add(new CourseModel("DSA", R.drawable.ic_gfglogo));

        courseModelArrayList.add(new CourseModel("JAVA", R.drawable.ic_gfglogo));

        courseModelArrayList.add(new CourseModel("C++", R.drawable.ic_gfglogo));

        courseModelArrayList.add(new CourseModel("Python", R.drawable.ic_gfglogo));

        courseModelArrayList.add(new CourseModel("Javascript", R.drawable.ic_gfglogo));

        courseModelArrayList.add(new CourseModel("DSA", R.drawable.ic_gfglogo));

  

        CourseGVAdapter adapter = new CourseGVAdapter(this, courseModelArrayList);

        coursesGV.setAdapter(adapter);

    }

}

 

Comments

Post a Comment

Popular posts from this blog

SYSTEM CALLS ON OPERATING SYSTEM

Image
System Calls in Operating System A system call is a way for a user program to interface with the operating system. The program requests several services, and the OS responds by invoking a series of system calls to satisfy the request. A system call can be written in assembly language or a high-level language like  C  or  Pascal . System calls are predefined functions that the operating system may directly invoke if a high-level language is used. In this article, you will learn about the system calls in the operating system and discuss their types and many other things. What is a System Call? A system call is a method for a computer program to request a service from the kernel of the  operating system on which it is running. A system call is a method of interacting with the operating system via programs. A system call is a request from computer software to an operating system's kernel. The   Application Program Interface (API)   connects the operating system...
Read more

TALLY ERP9

Image
  BUDGET AND CONTROL   BUDGET AND CONTROL   The annual estimate of accounts is called Budget. It can be annual, six monthly, and tri monthly or monthly.   ESTIMATED VALUE   To activate budget and control, follow these steps:-   Path for activate budget and control:-   G. O. T. (gateway of tally)  -->  press  F11 (company features) -->  press F1 (accounting features).     Now we create ledger in the company. Path for ledger creation:-  G. O. T. (gateway of tally)  -->  account info -->  ledger -->  create (multiple).       After ledger creation, we create budget as follow:-   Path for budget creation:-  G. O. T. (gateway of tally)  -->  account info -->  budget -->  create.   Select “Budget” option from accounts info as follow:-   After that, select “create” op...
Read more
Image
  UNIT-5 Explain Directory Structure. A  directory  is a container that is used to contain folders and files. It organizes files and folders in a hierarchical manner.  There are several logical structures of a directory, these are given below.   ·          Single-level directory –   The single-level directory is the simplest directory structure. In it, all files are contained in the same directory which makes it easy to support and understand.  A single level directory has a significant limitation, however, when the number of files increases or when the system has more than one user. Since all the files are in the same directory, they must have a unique name. if two users call their dataset test, then the unique name rule violated. Advantages:     ·          Since it is a single directory, so its implementation is very easy. · ...
Read more