Android gridview streachmode="columnWidth", set the item content to fit in the view

Question

I have a GridView with the following properties:

<GridView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/PhoneImageGrid"
        style="@style/PhotoGridLayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:alwaysDrawnWithCache="true"
        android:clipChildren="true"
        android:columnWidth="100dp"
        android:horizontalSpacing="2dp"
        android:numColumns="auto_fit"
        android:padding="4dp"
        android:scrollbars="none"
        android:scrollingCache="true"
        android:smoothScrollbar="true"
        android:stretchMode="columnWidth"
        android:verticalSpacing="4dp" />

Here is the grid item:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/thumbImage"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <CheckBox
        android:id="@+id/itemCheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

</RelativeLayout>

Now when when i run the app, i got a gridview, looks everything right in portrait and when i turn it to landscape the col width is being changed but i want the contents of the item also to be scaled proportionately according to the new col width(item_height = item_width = new col width). How can i achieve this? Thanks

Answer 1

Its bit tricky to set get the gridview col width. One you got the col width you can set the imageview height to the col width and notify adapter of changes. (code taken from the android samples: https://developer.android.com/training/displaying-bitmaps/index.html)

Here's the way to measure the col width:

imagegrid.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (imageAdapter.getNumColumns() == 0) {
                    final int numColumns = (int) Math.floor(imagegrid.getWidth()
                            / (mImageThumbSize + mImageThumbSpacing));
                    if (numColumns > 0) {
                        final int columnWidth = (imagegrid.getWidth() / numColumns) - mImageThumbSpacing;
                        imageAdapter.setNumColumns(numColumns);
                        imageAdapter.setItemHeight(columnWidth);

                    }
                }
            }
        });

Create these methods in the Adapter:

public void setNumColumns(int numColumns) {
            mNumColumns = numColumns;
        }

        public int getNumColumns() {
            return mNumColumns;
        }

        public void setItemHeight(int height) {
            if (height == mItemHeight) {
                return;
            }
            mItemHeight = height;
            mImageViewLayoutParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, mItemHeight);
            // mImageFetcher.setImageSize(height);
            notifyDataSetChanged();
        }

Set the initial image size as:

mImageViewLayoutParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                        LayoutParams.MATCH_PARENT);

Here's the complete adapter class:

public class ImageAdapter extends BaseAdapter {
        private LayoutInflater mInflater;
        private int mItemHeight = 0;
        private int mNumColumns = 0;
        private RelativeLayout.LayoutParams mImageViewLayoutParams;

        public ImageAdapter() {
            mInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            mImageViewLayoutParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                    LayoutParams.MATCH_PARENT);
        }

        public void setNumColumns(int numColumns) {
            mNumColumns = numColumns;
        }

        public int getNumColumns() {
            return mNumColumns;
        }

        public void setItemHeight(int height) {
            if (height == mItemHeight) {
                return;
            }
            mItemHeight = height;
            mImageViewLayoutParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, mItemHeight);
            // mImageFetcher.setImageSize(height);
            notifyDataSetChanged();
        }

        public int getCount() {
            return images.size();
        }

        public Object getItem(int position) {
            return position;
        }

        public long getItemId(int position) {
            return position;
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {
                holder = new ViewHolder();
                convertView = mInflater.inflate(R.layout.galleryitem, null);
                holder.imageview = (ImageView) convertView.findViewById(R.id.thumbImage);
                holder.checkbox = (CheckBox) convertView.findViewById(R.id.itemCheckBox);

                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            ImageItem item = images.get(position);
            holder.imageview.setId(position);

            // holder.imageview.setImageBitmap(item.img);
            holder.imageview.setLayoutParams(mImageViewLayoutParams);

            // Check the height matches our calculated column width
            if (holder.imageview.getLayoutParams().height != mItemHeight) {
                holder.imageview.setLayoutParams(mImageViewLayoutParams);
            }
            holder.imageview.setImageBitmap(item.img);
            holder.checkbox.setChecked(item.selection);
            return convertView;
        }
    }