How to align images in grid view programatically?

Question

I am showing one dialog to show the list of images and choose one of them. I have created an adapter to set the images in grid view.

I have followed this link :http://www.tutorialspoint.com/android/android_grid_view.htm , to get the idea.

But now the dialog shows images very far from each other and not aligned properly.

Dialog now is as below :

Adapter :

 public class ImageAdapter extends BaseAdapter {
    Context Context;
    int [] imageId;

    public ImageAdapter(Context context, int[] prgmImages) {
        // TODO Auto-generated constructor stub
        Context = context;
        imageId = prgmImages;

    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            // if it's not recycled, initialize some attributes
            imageView = new ImageView(Context);
            imageView.setLayoutParams(new GridView.LayoutParams(85,85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(2,2,2,2);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(imageId[position]);
        return imageView;
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return imageId.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }
    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

}

show dialog code:

 private void showAlertDialog() {

    GridView gridView = new GridView(this);

    int[] mThumbIds = {
            R.drawable.roundicons05,R.drawable.roundicons08,
            R.drawable.roundicons16,R.drawable.roundicons37,
    };

    gridView.setAdapter(new ImageAdapter(CheckListActivity.this,mThumbIds));
    gridView.setNumColumns(3);
    gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            // do something here
        }
    });

    // Set grid view to alertDialog
    AlertDialog.Builder builder = new AlertDialog.Builder(this);
    builder.setView(gridView);
    builder.setTitle("Select icon");
    builder.show();

}

How can I align this properly for example in center, and 4 images in one row etc.. Thank you.

Answer 1

<GridView

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="150dp"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:listSelector="#fff"
    android:numColumns="3"
    android:scrollbars="none"
    android:stretchMode="spacingWidthUniform"
    android:paddingTop="10dp"
    android:layout_margin="5dp">

</GridView>

To set these properties dynamically because u said that you are adding grid view dynamically then this is how you can set these properties through java

mGridView.setGravity(Gravity.CENTER);
    mGridView.setColumnWidth(150);
    mGridView.setHorizontalSpacing(20);
    mGridView.setVerticalSpacing(20);
    mGridView.setNumColumns(3);
    mGridView.setStretchMode(GridView.STRETCH_SPACING_UNIFORM);

Answer 2

To show proper ImageView ,make xml layout file and apply proper padding and margin and inflate this xml in adapter's getView method Like this :

Your xml layout grid_item.xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical">

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</LinearLayout>

Adapter's getView method :

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

    if (convertView == null)
    {
        LayoutInflater infalInflater = (LayoutInflater)    context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = infalInflater.inflate(R.layout.grid_item, null);
      imageView = (ImageView) convertView.findViewById(R.id.imgDoc);
        convertView.setTag(viewHolder);
    }
    else
    {
       imageView = (ImageView) convertView;
    }

 imageView.setImageResource(imageId[position]);      
 return convertView;
    }

for more proper layout apply horizontalSpacing and verticalSpacing in Gridview.

    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"

Answer 3

i suggest you to try with setAdjustViewBounds true. It will align imageview

Answer 4

try

imageView.setLayoutParams(new GridView.LayoutParams(48,48));