1

¿Cómo puedo crear una galería de imágenes con un GridView desde un array con las rutas absolutas a las imágenes? Esto es lo que tengo hasta ahora, pero no funciona:

En el .java donde se muestra el GridView:

    DBHelperPropiedades db = new DBHelperPropiedades(this);

    String[] imagenes= db.getImagenes(idPropiedad); //Retorna un arreglo con las rutas absolutas de las imagenes

    GridView gvImagenes= (GridView) findViewById(R.id.gvGaleria);

    gvImagenes.setAdapter(new adapterImagenes(this, imagenes));

El adapterImagenes:

public class adapterImagenes extends BaseAdapter {

    private final Context context;
    private final String[] valores;

    public adapterImagenes(Context context, String[] valores) {
        this.context = context;
        this.valores=valores;
    }

    @Override
    public int getCount() {
        return valores.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);


        if (convertView == null) {
            ImageView imageView;
            if (convertView == null) {
                imageView = new ImageView(context);
                imageView.setLayoutParams(new GridView.LayoutParams(85, 85));// ancho
                // y alto
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                imageView.setPadding(8, 8, 8, 8);
            } else {
                imageView = (ImageView) convertView;
            }

            Bitmap bitmapOriginal = BitmapFactory.decodeFile(valores[position]);
            Bitmap myBitmap = Bitmap.createScaledBitmap(bitmapOriginal, bitmapOriginal.getWidth() / 50, bitmapOriginal.getHeight() / 50, true);
            bitmapOriginal.recycle();

            //Coloca la imagen
            imageView.setImageBitmap(myBitmap);
            return imageView;
        }

        return null;
    }


}

Compila perfecto. Pero cuando abro la galería se cierra la aplicación con un NullPointerException.

La obtención de imágenes desde la base de datos funciona perfecto. Ya logré mostrar imágenes en un ListView, pero ahora quiero hacerlo en un Grid, y no estoy seguro de como.

La galería que quiero es simple. Solo imágenes una al lado de la otra, sin textos, ni nada complicado, y que cuando se haga clic sobre una imagen, esta se abra en grande (después le agrego el onClick listener una vez que funcione).

Gracias. Saludos

2
  • Si usas Android Studio y generas un RecyclerView de las Pautas, lo puedes configurar como GridView también, el código elige automaticamente entre ListView y GridView segun la cantidad de columnas que configuras. Commented el 4 feb. 2017 a las 18:49
  • Hola te si if (convertView == null) { inflas la vista ya agregas la imagen pero si no tiene valor null, retornas una vista con valor null lo cual es incorrecto. @FacundoCurti
    – Jorgesys
    Commented el 4 feb. 2017 a las 20:54

2 respuestas 2

1

Recuerda que el método getView() debe retornar una vista, la vista únicamente la estas retornando cuando convertView == null, cuando no es así estas retornando un valor null.

Se supone que al tener una vista con valor null se infla una vista, pero si existe una vista debes retornar esa vista:

 @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);


        if (convertView == null) {
            ImageView imageView;
            if (convertView == null) {
                imageView = new ImageView(context);
                imageView.setLayoutParams(new GridView.LayoutParams(85, 85));// ancho
                // y alto
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                imageView.setPadding(8, 8, 8, 8);
            } /*else {
                imageView = (ImageView) convertView;
            }*/
          }else{
           imageView = (ImageView) convertView;
          }

            Bitmap bitmapOriginal = BitmapFactory.decodeFile(valores[position]);
            Bitmap myBitmap = Bitmap.createScaledBitmap(bitmapOriginal, bitmapOriginal.getWidth() / 50, bitmapOriginal.getHeight() / 50, true);
            bitmapOriginal.recycle();

            //Coloca la imagen
            imageView.setImageBitmap(myBitmap);
            return imageView;
      //}

      //  return null;

    }

Si tienes rutas absolutas te sugiero agregar la imagen mediante Picasso y Glide, este tipo de librerías optimizan la imagen y ademas administran el caché, serían de gran ayuda.

Ejemplo Picasso

  Picasso.with(this.context).load(urldeimagen).into(imageView);
5
  • Graciasss. Cuando llegue a casa lo pruebo :) Commented el 4 feb. 2017 a las 21:06
  • Prueba esto y comentas resultados Facundo, saludos.
    – Jorgesys
    Commented el 4 feb. 2017 a las 21:13
  • Si. Gracias :). También estaba teniendo problemas con la optimización, hasta me había dado un outofmemory (luego dividí por 50 el tamaño en el bitmap) jaja. Con Picasso seguro se me soluciona :) Commented el 4 feb. 2017 a las 21:15
  • Conozco los problemas relacionados a este tipo carga de imágenes, otra opción para evitar usar createScaledBitmap() es tener una .aspx el cual optimizaría el tamaño de la imagen de acuerdo a el tamaño del dispositivo antes de descargarla. Pero definitivamente con Picasso te ayudaría sin duda.
    – Jorgesys
    Commented el 4 feb. 2017 a las 21:32
  • ahora funciona, pero se muestran uno abajo del otro, como si fuera un listView en lugar de un Grid. Alguna idea de porque puede ser? :/ Commented el 4 feb. 2017 a las 22:53
0

Te mostrare una forma "simple" usaremos Glide para el uso de carga de imagenes, importamos agregando al gradle

compile 'com.github.bumptech.glide:glide:3.7.0'

Tu adaptas los Id de las variables o las dejas. Este método esta funcionando.

Primero crearemos la clase AdaptadorDeFotos

public class AdaptadorDeFotos extends BaseAdapter {
    private Context context;

    public AdaptadorDeFotos(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return Foto.ITEMS.length;
    }

    @Override
    public Foto getItem(int position) {
        return Foto.ITEMS[position];
    }

    @Override
    public long getItemId(int position) {
        return getItem(position).getId();
    }

    @Override
    public View getView(int position, View view, ViewGroup viewGroup) {

        if (view == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.grid_item, viewGroup, false);
        }

        ImageView imagenCoche = (ImageView) view.findViewById(R.id.imagen_st);
        TextView nombreCoche = (TextView) view.findViewById(R.id.nombre_st);
        final Foto item = getItem(position);
        Glide.with(imagenCoche.getContext())
                .load(item.getIdDrawable())
                .into(imagenCoche);

        nombreCoche.setText(item.getNombre());

        return view;
    }

}

esta clase esta asociada al siguiente XML

<?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="200dp">

    <ImageView
        android:id="@+id/imagen_st"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
         />

    <TextView
        android:id="@+id/nombre_st"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#90000000"
        android:maxLines="1"
        android:padding="16dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:textColor="@android:color/white" />

</FrameLayout>

Ahora creamos ActividadPrincipal

public class ActividadPrincipal extends AppCompatActivity implements AdapterView.OnItemClickListener

{
    private GridView gridView;
    private AdaptadorDeFotos adaptador;

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


    gridView = (GridView) findViewById(R.id.grid);
    adaptador = new AdaptadorDeFotos(this);
    gridView.setAdapter(adaptador);
    gridView.setOnItemClickListener(this);
}


    @Override
    public void onItemClick (AdapterView < ? > parent, View view,int position, long id){
    Foto item = (Foto) parent.getItemAtPosition(position);

    Intent intent = new Intent(this, ActividadDetalle.class);
    intent.putExtra(ActividadDetalle.EXTRA_PARAM_ID, item.getId());

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

        ActivityOptionsCompat activityOptions =
                ActivityOptionsCompat.makeSceneTransitionAnimation(
                        this,
                        new Pair<View, String>(view.findViewById(R.id.imagen_st),
                                ActividadDetalle.VIEW_NAME_HEADER_IMAGE)
                );

        ActivityCompat.startActivity(this, intent, activityOptions.toBundle());
    } else
        startActivity(intent);
}

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.galeria, menu);
        return true;
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        if (id == R.id.atras) {
            onBackPressed();
            return true;
        } else if (id == R.id.salir) {
            finishAffinity();
            return true;

        }


           return super.onOptionsItemSelected(item);
        }
}

que tiene asociada este XML

<?xml version="1.0" encoding="utf-8"?>

<GridView
    android:id="@+id/grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="150dp"
    android:horizontalSpacing="0dp"
    android:numColumns="auto_fit"
    android:padding="0dp"
    android:verticalSpacing="0dp" />

este Gridview se mostrara de acuerdo al tamaño de la pantalla cuantas columas aunque tu puedes decir que quieres 2 o 1 etc. En la propiedad android:numColumns="2"

Ahora haremos una clase para cuando pulses la imagen se expanda y la llamaremos ActividadDetalle

    public class ActividadDetalle extends AppCompatActivity {
    public static final String EXTRA_PARAM_ID = "extra.ID";
    public static final String VIEW_NAME_HEADER_IMAGE = "imagen_compartida";
   // private Toolbar toll;
    private Foto itemDetallado;
    private ImageView imagenExtendida;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_actividad_detalle);
        // Obtener la foto con el identificador establecido en la actividad principal
        itemDetallado = Foto.getItem(getIntent().getIntExtra(EXTRA_PARAM_ID, 0));
        imagenExtendida = (ImageView) findViewById(R.id.imagen_extendida);
        Toolbar toolbar =(Toolbar) findViewById(R.id.toolbar3);
        setTitle("");
        setSupportActionBar(toolbar);


        cargarImagenExtendida();
    }
    private void cargarImagenExtendida() {
        Glide.with(imagenExtendida.getContext())
                .load(itemDetallado.getIdDrawable())
                .into(imagenExtendida);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.galeria, menu);
        return true;
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        if (id == R.id.atras) {
            onBackPressed();
            return true;
        } else if (id == R.id.salir) {
            finishAffinity();
            return true;

        }
        return super.onOptionsItemSelected(item);
    }
}

y su respectivo XML

<?xml version="1.0" encoding="utf-8"?>

tools:context="com.example.hp14.iteracion2.Galeria.ActividadDetalle"
android:background="@color/black_overlay">

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/imagen_extendida"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    >

</ImageView>

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:theme="?attr/actionBarTheme"
    android:minHeight="?attr/actionBarSize"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:id="@+id/toolbar3" />

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.