Como crear un GridView Image Gallery en Android

Android Studio GridView Image Gallery

Hola amigos seguimos con este curso aprendiendo día  a día, en esta ocasión aprenderemos a utilizar un control Containers GridView el cual usaremos para mostrar múltiples imágenes .

Crear Nuevo Proyecto Android Studio

Bueno para comenzar crearemos un proyecto en nuestro Android Studio (Aquí).

Teniendo listo nuestro proyecto comenzaremos con el diseño de nuestra aplicación.
Utilizaremos un GridView ImageView Gallery para mostrar nuestras múltiples imágenes. Arrastraremos nuestro control y cambiaremos las siguientes propiedades.

Ahora lo modificaremos. Nuevo GridView

Cambiaremos las propiedades.

<GridView android:id="@+id/gridView"
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_margin="5dp"
android:columnWidth="100dp" 
android:drawSelectorOnTop="true" 
android:gravity="center" 
android:numColumns="auto_fit" 
android:stretchMode="columnWidth" 
android:verticalSpacing="5dp" 
android:focusable="true" 
android:clickable="true"/>

Ahora agregaremos un Layout para la apariencia de nuestro gridView en la carpeta Drawable.

Ahora escribiremos el siguiente código dentro de nuestro layout. Pero antes de ello nos dirigiremos a la carpeta siguiente res -> values -> colors.xml y agregaremos los siguientes colores.

<color name="blue">#00abea</color>
<color name="white">#ffffff</color>

Habiendo escrito esto continuaremos en nuestro Layout y escribiremos el siguiente código. res - drawable - grid_color-selector.xml

<selector xmls:android="http://schemas.android.com/apk/res/android">  
<item android:drawable="@color/blue" android:state_pressed="true"/> 
<item android:drawable="@color/blue" android:state_selected="true"/> 
<item android:drawable="@color/white"/> 
</selector>

Ahora agregaremos en el res - values - string.xml la siguiente lista.

<string-array name="image_ids">
<item>@drawable/image_1</item>
<item>@drawable/image_2</item>
<item>@drawable/image_3</item>
<item>@drawable/image_4</item>
<item>@drawable/image_5</item>
<item>@drawable/image_6</item>
<item>@drawable/image_7</item>
<item>@drawable/image_8</item>
<item>@drawable/image_9</item>
<item>@drawable/image_1</item>
<item>@drawable/image_2</item>
<item>@drawable/image_3</item>
<item>@drawable/image_4</item>
<item>@drawable/image_5</item>
<item>@drawable/image_6</item>
<item>@drawable/image_7</item>
<item>@drawable/image_8</item>
<item>@drawable/image_9</item>
</string-array>

Agregaremos los siguientes elementos a nuestro Layout pueden hacerlo de forma visual o código. De la siguiente forma. grid_item_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="@drawable/grid_color_selector"
android:orientation="vertical"
android:padding="5dp">

<ImageView
android:id="@+id/imagen"
android:layout_width="100dp"
android:layout_height="100dp" />

<TextView
android:id="@+id/texto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center"
android:textSize="12sp" />
</LinearLayout>

Ahora agregamos un Layout para el detalle de nuestras imágenes. Le pondremos details_activity.xml

y agregaremos los siguientes elementos.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#000">

<ImageView
android:id="@+id/imagen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="fitCenter" />

<TextView
android:id="@+id/titulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#00000c"
android:padding="10dp"
android:textColor="#fff"
android:textSize="20dp" />
</FrameLayout>

Tenemos listo el diseño de nuestra aplicación ahora pasaremos al siguiente paso que seria el desarrollo de nuestro código. Agregaremos una clase a la cual le pondremos ImagenesItem,
Y escribiremos el siguiente código.

public class ImagenesItem { 
//--Variables de Imagen y Texto
private Bitmap image;
private String title;
//--Constructor de imagen y texto.
public ImagenesItem(Bitmap image, String title) {
super();
this.image = image;
this.title = title;
}
//---Funciones de agregar y retornar valores
public Bitmap getImage() {
return image;
}
public void setImage(Bitmap image) {
this.image = image;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}

Agregaremos la siguiente clase DetailsActivity. y escribiremos el siguiente código.

public class DetailsActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.details_activity);
//Declaramos las variables para las imagenes y el titulo
String title = getIntent().getStringExtra("title");
Bitmap bitmap = getIntent().getParcelableExtra("image");
//--Asignamos el texto al control textView
TextView titleTextView = (TextView) findViewById(R.id.title);
titleTextView.setText(title);
//--Asignamos la imagen al control imageView
ImageView imageView = (ImageView) findViewById(R.id.image);
imageView.setImageBitmap(bitmap);
}
}

Y la ultima clase sera la GridViewAdapter para llenar nuestro GridView ImageView Gallery.

public class GridViewAdapter extends ArrayAdapter<ImagenesItem> {
//--Declaramos las variables 
private Context context;
private int layoutResourceId;
//--Declaramos el arreglo de tipo ImagenesItem que es nuestra clase
private ArrayList<ImagenesItem> data = new ArrayList<ImagenesItem>();
//--Constructor de nuestro gridAdapter para recibir los valores 
public GridViewAdapter(Context context, int layoutResourceId, ArrayList<ImagenesItem> data) {
super(context, layoutResourceId, data);
this.layoutResourceId = layoutResourceId;
this.context = context;
this.data = data;
}

//--Funcion View para diseñar la parte visual de nuestra aplicación
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
ViewHolder holder;
//--Si la fila es nula
if (row == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new ViewHolder();
holder.imageTitle = (TextView) row.findViewById(R.id.text);
holder.image = (ImageView) row.findViewById(R.id.image);
row.setTag(holder);
} else {
holder = (ViewHolder) row.getTag();
}

//--Asigna los valores 
ImagenesItem item = data.get(position);
holder.imageTitle.setText(item.getTitle());
holder.image.setImageBitmap(item.getImage());
return row;
}
static class ViewHolder {
TextView imageTitle;
ImageView image;
}
}

Por ultimo solo nos faltaría nuestra clase principal del GridView ImageView Gallery.

public class MainActivity extends ActionBarActivity {
//--Declaramos las variables
private GridView gridView;
private GridViewAdapter gridAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//--Asignamos las propiedades del control
gridView = (GridView) findViewById(R.id.gridView);
//--Llenamos nuestro gridview con el adaptador
gridAdapter = new GridViewAdapter(this, R.layout.grid_row_items, getData());
gridView.setAdapter(gridAdapter);
//--Evento cuando se le da click al gridView y visualizar la imagen en otro actividad
gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
//--Crear la variable de la clase ImagenesItem
ImagenesItem item = (ImagenesItem) parent.getItemAtPosition(position);
//Crear intent
Intent intent = new Intent(MainActivity.this, DetailsActivity.class);
intent.putExtra("title", item.getTitle());
intent.putExtra("image", item.getImage());

//Ejecutar actividad con los parametros
startActivity(intent);
}
});
}
//--Funcion del arreglo que construye el gridView
private ArrayList<ImagenesItem> getData() {
final ArrayList<ImagenesItem> imageItems = new ArrayList<>();
TypedArray imgs = getResources().obtainTypedArray(R.array.image_ids);
for (int i = 0; i < imgs.length(); i++) {
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), imgs.getResourceId(i, -1));
imageItems.add(new ImagenesItem(bitmap, "Image#" + i));
}
return imageItems;
}
}

Crear Emulador AVD (Aquí)

Vamos a crear nuestro emulador para ver la aplicación GridView ImageView Gallery.
Teniendo listo esto podremos ejecutar nuestra aplicación y obtener el resultado.

Descargar.

Espero el contenido haya sido de su agrado y entendimiento cualquier duda por favor déjame tu comentario y con gusto te responderé. Compártelo para promover el conocimiento. Gracias por tu tiempo.

Android Studio - Curso Español