Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

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í).
Android Studio - GridView Image Gallery
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.
Android Studio - GridView Image Gallery


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.
Android Studio - GridView Image Gallery

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>
Android Studio - GridView Image Gallery
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
Android Studio - GridView Image Gallery


<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.
Android Studio - GridView Image Gallery


<?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.
Android Studio - GridView Image Gallery
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

Android Studio - Curso Español

No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner