Search code examples
androidandroid-alertdialogandroid-gridviewimagelist

How to align images in grid view programatically?


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 :

enter image description here

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.


Solution

  • <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);