Como crear un GridView en Android

Android GridView Example

Hola amigos comenzaremos a entrar mas y mas cada día en el desarrollo y en esta ocasión le explicare el uso del GridView en Android Studio.

Crear Nuevo Proyecto Android Studio

Para crear un proyecto en Android Studio (Aquí).

Teniendo listo nuestro proyecto comenzaremos a diseñar nuestra aplicación con un claro ejemplo, primero colocaremos el control GridView para poder utilizarlo y lo encontraremos en la barra de herramientas en la sección de Containers.

Android Studio GridView

GridView es un ViewGroup que muestra los elementos en una rejilla de dos dimensiones, desplazable. Los elementos de la cuadrícula se insertan automáticamente a la disposición usando una ListAdapter.

Ahora arrastraremos nuestro GridView a nuestra actividad.

GridView Layout Design

Tendremos que modificar nuestro Gridview de la siguiente forma les dejo el código del diseño.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

 <GridView
 android:id="@+id/gridView"
 android:numColumns="auto_fit"
 android:gravity="center"
 android:columnWidth="50dp"
 android:stretchMode="columnWidth"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"/>
</RelativeLayout>

Código MaintActivity GridView

Ahora comenzaremos con la programación teniendo listo nuestro diseño para esto mostraremos un arreglo de números de la siguiente forma en nuestro GridView.

//--Declaramos la variable de tipo GridView
GridView gridVarible;
//--Arreglo de numeros que mostrarmos en el GridView
static final String[] numeros = new String[] {
"1", "2", "3", "4", "5",
"6", "7", "8", "9", "10",
"11", "12", "13", "14", "15",
"16", "17", "18", "19", "20"};

El siguiente paso para desarrollar nuestro GridView

//--Asignamos las propiedades a la variable gridview
gridVarible = (GridView) findViewById(R.id.gridView);
//--Creamos la variable adaptador y lo llenamos con el arreglo de numeros
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, numeros);
//--Insertamos el adaptador al gridview
gridVarible.setAdapter(adapter);
//--Evento que mostrara un mensaje al presionar un numero del gridview
gridVarible.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(getApplicationContext(),
((TextView) v).getText(), Toast.LENGTH_SHORT).show();
}
});

Código Completo GridView

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
//--Declaramos la variable de tipo GridView
GridView gridVarible;
//--Arreglo de numeros que mostrarmos en el GridView
static final String[] numeros = new String[] {
"1", "2", "3", "4", "5",
"6", "7", "8", "9", "10",
"11", "12", "13", "14", "15",
"16", "17", "18", "19", "20"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//--Asignamos las propiedades a la variable gridview
gridVarible = (GridView) findViewById(R.id.gridView);
//--Creamos la variable adaptador y lo llenamos con el arreglo de numeros
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, numeros);
//--Insertamos el adaptador al gridview
gridVarible.setAdapter(adapter);
//--Evento que mostrara un mensaje al presionar un numero del gridview
gridVarible.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(getApplicationContext(),
((TextView) v).getText(), Toast.LENGTH_SHORT).show();
}
});
}
}

Teniendo listo esto podremos ejecutar nuestra aplicación. Para crear un emulador en Android Studio (Aquí).

El resultado de nuestro ejemplo seria el siguiente.

Descargar proyecto GridView.

Ahora continuamos con el siguiente ejemplo para entender un poco mejor el GridView  y en lugar de mostrar números mostraremos imágenes con un texto referente.

Agregaremos un Layout. gridrows.xml

Nos mostrara la siguiente pantalla donde escribiremos el nombre de nuestro Layout para nuestro GridView.
Teniendo listo presionamos Ok. Y agregaremos el siguiente código a nuestro Layout.

<?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="match_parent">
<ImageView
android:id="@+id/grid_img_row"
android:layout_width="150px"
android:layout_height="150px"
android:layout_marginRight="10px"
android:src="@mipmap/ic_launcher" >
</ImageView>

<TextView
android:id="@+id/grid_text_row"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@+id/label"
android:layout_marginTop="5px"
android:textSize="15px" >
</TextView>
</LinearLayout>

Con esto tendríamos listo nuestro diseño ahora comenzaremos con la programación. Ahora agregaremos una clase que sera la encargada de llenar nuestro gridview.

Le escribiremos el nombre de AdaptadorImagenes.java

Presionamos Ok. Teniendo listo esto vamos a escribir el siguiente código en nuestra nueva clase.

public class AdaptadorImagenes extends BaseAdapter {
//--Declaramos las variables
private Context context;
//--Arreglo de filas
private final String[] rowValues;
//--Constructor de variables recibidas
public AdaptadorImagenes(Context context, String[] rowValues) {
this.context = context;
this.rowValues = rowValues;
}
//--Muestra imagenes y texto
public View getView(int position, View convertView, ViewGroup parent) {
//--Variable de tipo LayoutInflater
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//--Variable visual de gridview
View gridView;
//--Si la función es nulla
if (convertView == null) {
//--Asigan el context visual
gridView = new View(context);

//--Asigna el layout de filas
gridView = inflater.inflate(R.layout.gridrows, null);
//--Agrega el texto recibido al TextView
TextView textView = (TextView) gridView.findViewById(R.id.grid_text_row);
textView.setText(rowValues[position]);
//--Agrega la imagen recibida en la ImageView
ImageView imageView = (ImageView) gridView
.findViewById(R.id.grid_img_row);
//--Posicion de la fila en la que se asigna el valor
String row = rowValues[position];
//--Dependiendo del tipo de nombre asigna la imagen
if (row.equals("microsoft")) {
imageView.setImageResource(R.drawable.microsoft);
} else if (row.equals("apple")) {
imageView.setImageResource(R.drawable.apple);
} else if (row.equals("facebook")) {
imageView.setImageResource(R.drawable.facebook);}
else if (row.equals("twitter")) {
imageView.setImageResource(R.drawable.twitter);}
else if (row.equals("youtube")) {
imageView.setImageResource(R.drawable.youtube);
} else {
imageView.setImageResource(R.drawable.google);
}
} else {
gridView = (View) convertView;
}
//--Devuelve la visualización construida
return gridView;
}
@Override
public int getCount() {
return rowValues.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
}

Ahora continuaremos en el MainActivity escribiremos el siguiente código para inicial izar nuestro GridView.

//--Declaramos la variable de tipo gridview
GridView gridView;
//--Arreglo de nombres
static final String[] Empresas = new String[] {
"google", "youtube","microsoft", "facebook","twitter","apple" };

Asignaremos las propiedades y crearemos el siguiente evento.

//--Asignamos las propiedades a la variable gridView
gridView = (GridView) findViewById(R.id.gridView);
//--Enviamos el arreglo a la función para que se ejecute
gridView.setAdapter(new AdaptadorImagenes(this, Empresas));
//--Evento que mostrara un mensaje al presionar una de las imagenes en el gridview
gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(
getApplicationContext(),
((TextView) v.findViewById(R.id.grid_text_row))
.getText(), Toast.LENGTH_SHORT).show();
}
});

Código Completo GridView ImageView

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;

public class Main2Activity extends AppCompatActivity {
//--Declaramos la variable de tipo gridview
GridView gridView;
//--Arreglo de nombres
static final String[] Empresas = new String[] {
"google", "youtube","microsoft", "facebook","twitter","apple" };

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

//--Asignamos las propiedades a la variable gridView
gridView = (GridView) findViewById(R.id.gridView);
//--Enviamos el arreglo a la función para que se ejecute
gridView.setAdapter(new AdaptadorImagenes(this, Empresas));
//--Evento que mostrara un mensaje al presionar una de las imagenes en el gridview
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(
getApplicationContext(),
((TextView) v.findViewById(R.id.grid_text_row))
.getText(), Toast.LENGTH_SHORT).show();


}
});
}
}

Crear Emulador AVD

Teniendo listo esto podremos ejecutar nuestra aplicación y ver el resultado.

Listo! Descargar proyecto GridView Image.

Espero que el contenido haya sido de su comprensión cualquier duda puedes dejarme tu comentario y con gusto te responderé. Comparte lo para promover el conocimiento. Muchas gracias por tu tiempo.

Android Studio - Curso Español