Este artículo detalla cómo configurar y utilizar un componente GridView en Android, permitiendo la visualización de elementos en una cuadrícula y respondiendo a las interacciones del usuario.

Layout Principal (activity_main.xml)

El layout principal contiene un botón que servirá para iniciar la actividad que muestra el GridView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/main_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:padding="16dp">

   <Button
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/show_grid_button_text"
       android:onClick="launchGridViewActivity"/>

</LinearLayout>
   

Actividad Principal (MainActivity.java)

La actividad principal implementa la lógica para manejar el clic del botón y navegar a la pantalla del GridView.

package com.example.android_gridview_example;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

   public void launchGridViewActivity(View view) {
       Intent intent = new Intent(this, GridViewDisplayActivity.class);
       startActivity(intent);
   }
}
   

Layout del GridView (activity_grid_view.xml)

Este layout define el componente GridView con propiedades de configuración específicas:

• android:numColumns="auto_fit": Permite que el GridView ajuste automáticamente el número de columnas basándose en el ancho de cada elemento.
• android:columnWidth="90dp": Establece el ancho deseado para cada columa.
• android:stretchMode="columnWidth": Indica que las columnas deben estirarse para llenar el espacio disponible, manteniendo el encho definido.
• android:horizontalSpacing y android:verticalSpacing: Definen el espacio entre los elementos de la cuadrícula.
• android:gravity="center": Centra el contenido del GridView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/grid_view_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:padding="16dp">

   <GridView
       android:id="@+id/itemsGrid"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:numColumns="auto_fit"
       android:columnWidth="90dp"
       android:stretchMode="columnWidth"
       android:horizontalSpacing="8dp"
       android:verticalSpacing="8dp"
       android:gravity="center"/>
</LinearLayout>
   

Actividad de Visualización del GridView (GridViewDisplayActivity.java)

Esta actividad se encarga de poblar el GridView con datos y de implementar el listener para los clics en los elementos.

package com.example.android_gridview_example;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class GridViewDisplayActivity extends Activity {

   private GridView gridViewItems;
   private SimpleAdapter gridAdapter;
   private List<map object="">> dataList;
   private final String IMAGE_KEY = "item_image";
   private final String NAME_KEY = "item_name";

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

       gridViewItems = findViewById(R.id.itemsGrid);
       loadGridData();

       String[] fromFields = {IMAGE_KEY, NAME_KEY};
       int[] toViews = {R.id.itemImageView, R.id.itemNameTextView};

       gridAdapter = new SimpleAdapter(this, dataList, R.layout.grid_item_layout, fromFields, toViews);
       gridViewItems.setAdapter(gridAdapter);

       // Configuración del listener para eventos de clic en elementos
       gridViewItems.setOnItemClickListener(new AdapterView.OnItemClickListener() {
           @Override
           public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
               // Acceder a la vista del elemento seleccionado (un LinearLayout en este caso)
               LinearLayout itemLayout = (LinearLayout) view;
               // Obtener la vista del TextView dentro del LinearLayout
               TextView itemNameView = itemLayout.findViewById(R.id.itemNameTextView);
               // Mostrar un Toast con el nombre del elemento seleccionado
               Toast.makeText(GridViewDisplayActivity.this,
                              "Seleccionado: " + itemNameView.getText().toString(),
                              Toast.LENGTH_SHORT).show();
           }
       });
   }

   /**
    * Carga datos de ejemplo para el GridView.
    */
   private void loadGridData() {
       dataList = new ArrayList<>();
       for (int i = 1; i <= 15; i++) {
           Map<string object=""> map = new HashMap<>();
           // Asignar una imagen de ejemplo (ic_launcher por defecto)
           map.put(IMAGE_KEY, R.mipmap.ic_launcher);
           map.put(NAME_KEY, "Elemento " + i);
           dataList.add(map);
       }
   }
}
   </string></map>

Layout de un Elemento del Grid (grid_item_layout.xml)

Define la apariencia de cada celda individual dantro del GridView, conteniendo una imagen y un texto.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:padding="8dp">

   <ImageView
       android:id="@+id/itemImageView"
       android:layout_width="70dp"
       android:layout_height="70dp"
       android:scaleType="centerCrop"
       android:contentDescription="@string/item_image_description"/>

   <TextView
       android:id="@+id/itemNameTextView"
       android:layout_width="70dp"
       android:layout_height="wrap_content"
       android:gravity="center"
       android:layout_marginTop="4dp"
       android:textSize="12sp"/>
</LinearLayout>