Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Android / GridView con imagenes en miniatura

GridView con imagenes en miniatura

Por jc mouse domingo, marzo 16, 2014

Entre las muchas aplicaciones que hay en la playstore de google están las galerías de fotos de chicas 🙂 que tantos nos entretienen y divierten en los aburridos días de trabajo 😉 alguna vez se preguntaron ¿cómo lo hacen? la aplicación digo 😉

En este post no crearemos toda la aplicación en si, sino más bien un  proyecto sencillo  para tener una idea más o menos de como va la aplicación, en resumen nuestra aplicación android consistirá en un galería de imágenes en miniatura. En futuros post ampliaremos este mismo código para que al hacer clic en una miniatura, este se amplíe.

Necesitamos

– Eclipse Indigo + Android instalado

Nivel Java-Android: Intermedio

Tiempo: 15 minutos

1.Crea un nuevo Application Android Project con la siguiente configuración:

Application Name: Sample Gallery

Project Name: SampleGallery

Package Name: com.bolivia.samplegallery

Activity: Blank Activity

Activity Name: MainActivity.java

Layout Name: activity_main.xml

2. Para esta galería utilizaremos imágenes JPG de 100×140 pixeles, la cantidad sera de 9 imágenes y el tema «chicas con tatuajes». Puedes hacer uso de imagenes un poco más grandes, pero sin exagerar porque esto ademas de consumir más memoria puede llegar a producir un error de desborde de memoria.

Las imágenes debes colocarlas en la carpeta «res\drawable-mdpi», los nombres de los archivos son «foto1.jpg», «foto2.jpg»…»foto9.jpg»

3. Abrimos el archivo «activity_main.xml» que esta en «res\layout» y reemplazamos el código XML por:

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp"
    tools:context=".GridImageActivity" >

</GridView>

4. Creamos una nueva clase llamada «GridViewImageAdapter.java»

package com.bolivia.samplegallery;

import java.util.ArrayList;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class GridViewImageAdapter extends BaseAdapter {

 private Context mContext;
 private ArrayList<Integer> listPhoto = new ArrayList<Integer>(); 

 /** Constructor de clase */
 public GridViewImageAdapter(Context c){
  mContext = c;
  //se cargan las miniaturas
  listPhoto.add(R.drawable.foto1);
  listPhoto.add(R.drawable.foto2);
  listPhoto.add(R.drawable.foto3);
  listPhoto.add(R.drawable.foto4);
  listPhoto.add(R.drawable.foto5);
  listPhoto.add(R.drawable.foto6);
  listPhoto.add(R.drawable.foto7);
  listPhoto.add(R.drawable.foto8);
  listPhoto.add(R.drawable.foto9);
 }

 @Override
 public int getCount() {
  return listPhoto.size();
 }

 @Override
 public Object getItem(int position) {
  return listPhoto.get(position);
 }

 @Override
 public long getItemId(int position) {
  return 0;
 }

 @Override
 public View getView(int position, View view, ViewGroup viewgroup) {
  ImageView imageView = new ImageView(mContext);
  imageView.setImageResource( listPhoto.get(position) );
  imageView.setScaleType( ImageView.ScaleType.CENTER_CROP );
  imageView.setLayoutParams( new GridView.LayoutParams(180, 220) );
  return imageView;  
 }

}

5. Finalmente modificamos el método onCreate de nuestra clase MainActivity de la siguiente forma:

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_grid_image);
  //---------->Nuevo codigo
  GridView gridView = (GridView) findViewById( R.id.GridView1 );
  gridView.setAdapter( new GridViewImageAdapter(this) );
  //---------->fin
 }

ejecuta y disfruta 🙂

android gallery

 

Tags

Artículos similares

PanoramaImageView: Vista panorámica

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360°[...]

Como capturar cambios del Slider en JavaFX

En este tutorial veremos como usar el componente Slider de JavaFX , capturas los cambios que realice el usuario y con es[...]

Transacciones con Java y MariaDB

Se define como Transacción en base de datos a una «unidad lógica de trabajo» compuesta por un conjunto de operaciones qu[...]

Agregar soporte para JNLP en servidor Apache

Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta especificación, permite tene[...]

Personaliza un JComboBox estilo Metro de Windows

Si bien se pueden encontrar en google estilos java (Look and Feel) listos para cambiar la apariencia de nuestras aplicac[...]

Instalación de Netbeans en Ubuntu

Netbeans es uno de los entornos de desarrollo integrado (Integrated Development Environment – IDE)  más conocidos[...]