GridView en Android con ejemplo

Un GridView es un tipo de AdapterView que muestra elementos en una cuadrícula de desplazamiento bidimensional. Los elementos se insertan en este diseño de cuadrícula desde una base de datos o desde una array. El adaptador se usa para mostrar estos datos, el método setAdapter() se usa para unir el adaptador con GridView. La función principal del adaptador en GridView es obtener datos de una base de datos o array e insertar cada dato en un elemento apropiado que se mostrará en GridView. Así es como se ve la estructura GridView.

Atributos XML de GridView

• android:numColumns : este atributo de GridView se usará para decidir la cantidad de columnas que se mostrarán en Grid.
• android:horizontalSpacing : este atributo se usa para definir el espacio entre dos columnas de GridView.
• android:verticalSpacing : este atributo se usa para especificar el espacio entre dos filas de GridView.

Ejemplo

Ahora veamos un ejemplo en el que implementaremos un GridView simple en la aplicación de Android. En GridView, ahora mostramos la lista de cursos disponibles en GeeksforGeeks.  

Paso 1: Creación de un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue el repositorio de Google en el archivo build.gradle del proyecto de la aplicación.

script de compilación {

 repositorios {

    Google()

    mavenCentral()

}

Todos los componentes de Jetpack están disponibles en el repositorio de Google Maven, inclúyelos en el archivo build.gradle

todos los proyectos {

 repositorios {

    Google()

   mavenCentral()

 }

}

Paso 3: Modificar el archivo activity_main.xml

Agregue GridView al archivo activity_main.xml . A continuación se muestra el código para el  archivo activity_main.xml .

<?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>

Paso 4: cree un archivo de diseño XML para cada elemento de GridView

Cree un archivo XML para cada elemento de la cuadrícula que se mostrará en GridView. Haga clic en la aplicación > res > diseño > clic derecho > archivo de recursos de diseño y luego nombre el archivo como card_item . A continuación se muestra el código para el  archivo card_item.xml .

<?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>

Paso 5: crea una clase modal para almacenar datos

Modal Class es la clase JAVA que maneja los datos que se agregarán en cada elemento de GridView de GridView. Para crear una clase modal. 

• Ahora haga clic en aplicación> java> nombre del paquete de aplicaciones> haga clic con el botón derecho en él.
• Luego haga clic en Nuevo > Clase Java .
• Asigne un nombre a su archivo de clase Java como . A continuación se muestra el código para el  archivo .java .

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;
    }
}

Paso 6: crear una clase de adaptador

Adapter Class agrega los datos de Modal Class en cada elemento de GridView que se mostrará en la pantalla. Para crear una clase de adaptador.

• Ahora haga clic en aplicación> java> nombre del paquete de aplicaciones> haga clic con el botón derecho en él.
• Luego haga clic en Nuevo > Clase Java .
• Asigne un nombre a su archivo de clase Java como . A continuación se muestra el código para el  archivo .java . 

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;
    }
}

Paso 7: Modifique el archivo MainActivity.java 

Ahora, en este archivo, realizaremos todas las operaciones de back-end que agregarán datos a GridView. A continuación se muestra el código del  archivo MainActivity.java .

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);
    }
}

Producción: