Grid view with fixed width and responsive height (Android)

Question

i'm developing an Android application i have to create a layout composed from a grid view with two columns with a fixed width and a certain number of row.

This gridview is composed from images, in each "square" of my grid there is a image, i need that the the dimensions are exactly the size of the screen, I do not want to be visulizzate by scrolling.

I was able to fix the length, but not the height. How can I make sure that my grill has the size that I specified?

this is my layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="am.MainActivity"
    tools:showIn="@layout/activity_main">

    <GridView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="2"
        android:verticalSpacing="4dp"
        android:horizontalSpacing="8dp"
        android:stretchMode="columnWidth"/>
</RelativeLayout>

This is the java code:

GridView gridview = (GridView) findViewById(R.id.gridview);
            gridview.setAdapter(new ImageAdapter(this));


  public class ImageAdapter extends BaseAdapter {
        private Context mContext;

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

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

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

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

        // 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) {

                DisplayMetrics dm = new DisplayMetrics();
                getWindowManager().getDefaultDisplay().getMetrics(dm);
                int width = dm.widthPixels / 2;

                imageView = new ImageView(mContext);
                imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                imageView.setLayoutParams(new GridView.LayoutParams(width, width));

            } else {
                imageView = (ImageView) convertView;
            }

            imageView.setImageResource(mThumbIds[position]);
            return imageView;
        }

        // references to our images
        private Integer[] mThumbIds = {
                R.drawable.bacheca, R.drawable.turni,
                R.drawable.utility, R.drawable.contatti,
                R.drawable.invia, R.drawable.info
        };
    }

The output is perfectly for the width (two images that is contained in the screen size) but the height is wrong because it activates scrolling when I would rather have everything on the screen

what do you mean by responsive.. if you have given wrap content height then it will be adjusted by content — Ashish Tiwari, May 15 '16 at 08:33

score 1 · Answer 1 · edited May 23 '17 at 12:16

As mentioned in the answer here - Gridview with two columns and auto resized images

You can make a custom ImageView for this

public class SquareImageView extends ImageView {
    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
    }
}

and then use this in your grid view cell layout as

<package_that_contains_SquareImageView.SquareImageView
    android:id="@+id/picture"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"/>

score 0 · Answer 2 · answered May 15 '16 at 09:56

If you want all of the grid's rows display on Screen, why you use this line of code?

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

It will make imageView to have a shape of square. So it can not fit your screen height!!

Please measure your screen height (same as measuring width), then set it to LayoutParams:

imageView.setLayoutParams(new GridView.LayoutParams(screenWidth/numOfColumn, screenHeight/numOfRow));

Grid view with fixed width and responsive height (Android)

2 Answers2