Create a grid of imageviews dynamically

Question

Okay, so I'm at migraine point with this, and it feels like no matter what I try to do I'm going against the grain.

How do I get a gridview of imageviews (which are covered from bitmaps using the array adapter below) to display side by side with no spacing in between them in a dynamic amount of columns and rows?

public class GameAdapter extends BaseAdapter {

//Variable setup
private Context context;
private Bitmap[] values;

//Construct the image parameter, get context, the array of images, and the height/width of them
public GameAdapter(Context context, Bitmap[] _values) {
    this.context = context;
    this.values = _values;
}

//Convert Dp to pixels for modularity
private int dpToPx(int dp)
{
    float density = context.getResources().getDisplayMetrics().density;
    return Math.round((float)dp * density);
}

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

@Override
public Object getItem(int i) {
    return values[i];
}

@Override
public long getItemId(int i) {
    return values[i].getGenerationId();
}

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    ImageView imageView = new ImageView(context);
    imageView.setImageBitmap(values[i]);
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  //  int pad = dpToPx(1);
//    imageView.setPadding(pad,pad,pad,pad);
//      Log.w("Derp", "" + "Height- "+values[i].getHeight());
//    Log.w("Derp", "" + "Width- "+values[i].getWidth());
    imageView.setLayoutParams(new GridView.LayoutParams(values[i].getWidth(), values[i].getHeight()));
    return imageView;
}


}

Do you ask to set Vertical and Horizontal spacing on each rows and colums to null? Or is that a width issue with multiple ImageViews which aren't the same width? — Blo, Dec 10 '13 at 04:46
They're the same width/height, but I don't know what it is until runtime, so initially they need to be set to null or any other value to be overriden. — user2941307, Dec 10 '13 at 16:10

Born To Win · Answer 1 · 2013-12-10T07:35:15.623

Refer the following for gridview images:

grid_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:columnWidth="90dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center"
    android:stretchMode="columnWidth" >  

</GridView>

ImageAdapter.java

package com.imagesample;

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 ImageAdapter extends BaseAdapter {
     private Context mContext;

     // all Images in array
         public Integer[] mThumbIds = {
             R.drawable.p1, R.drawable.p2,
             R.drawable.p3, R.drawable.p4,
             R.drawable.p5, R.drawable.p6,
             R.drawable.p7, R.drawable.p8,
             R.drawable.p9, R.drawable.p10,
             R.drawable.p11, R.drawable.p12,
            R.drawable.p13, R.drawable.p14,
             R.drawable.p15
     };

     // Constructor
     public ImageAdapter(Context c){
         mContext = c;
     }

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

     @Override
     public Object getItem(int position) {
         return mThumbIds[position];
     }

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

     @Override
     public View getView(int position, View convertView, ViewGroup parent) {
         ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
         imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
         return imageView;
     }   }

GridActivity.java

package com.imagesample;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class GridActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.grid_layout);

        GridView gridView = (GridView) findViewById(R.id.grid_view);

        // Instance of ImageAdapter Class
        gridView.setAdapter(new ImageAdapter(this));
    }
}

Hopefully it helps you a lot.

This kind of link only answer is not acceptable. Yes it can be when you include essential part of the article here. The reason being not counting as an answer is there may be a chance that the article/link may no longer exist in future. — Paresh Mayani, Dec 10 '13 at 05:38
With slight modification to add dynamic feel and loading on scroll change your code was the best.....Thanks a ton. — Ashwani, Nov 16 '16 at 07:19

score 0 · Accepted Answer · edited May 23 '17 at 12:13

To have best performance in runtime you should do this little trick: make a AsyncTask to load your ImageView and set them to null.

final ImageView imageView = (ImageView)   
view.findViewById(R.id.image);  

// Set the ImageView to null
imageView.setImageBitmap(null);  

new AsyncTack<String, Void, Bitmap>() {

    protected Bitmap doInBackground(String... params) {  
        String url = params[0];  
        Bitmap bitmap = downloadBitmap(url);  
        return bitmap;  
    } 

    // Set the ImageView with the Bitmap downloaded
    protected void onPostExecute(Bitmap bitmap) {  
        imageView.setImageBitmap(bitmap);  
    }. 

}.execute(url);

To make a GridView dynamically you should read this SO question asked about it:
Android dynamic GridView

GridView grid = new GridView(this);  
grid.setId(215236);  
grid.setLayoutParams(new GridView.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));  
grid.setBackgroundColor(Color.WHITE);  
grid.setColumnWidth(GridView.AUTO_FIT);  
grid.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);

If you want to remove the spacing (vertical and horizontal) dynamically on each rows and columns, you should try:

gridview.setVerticalSpacing(0);  
gridview.setHorizontalSpacing(0);

And to make the width/height for your rows/columns with the width/height of a ImageView, you could place your GridView into a LinearLayout (which it set MATCH_PARENT) and getMeasured of this layout to know how many ImageViews contain in it.
Check these answers to more information about this trick:
Android: How does GridView auto_fit find the number of columns?

Hope that is what you looking for.

Create a grid of imageviews dynamically

2 Answers2