GridView with square elements in android with adaptive width / height

Question

I have a custom gridview with such elements

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="false" android:focusable="false" android:focusableInTouchMode="false" android:gravity="center" android:longClickable="false" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="false" android:focusable="false" android:focusableInTouchMode="false" android:longClickable="false" android:text="0" android:textSize="60sp" /> </LinearLayout> 

I want my objects to be squares, and I want the gridview to stretch the width to fill the entire width of the screen in portrait orientation and all the height in landscape orientation. It should look like this

Where A is the side of the square, and B is the width of the field (it can be zero). I think I should probably override the onMeasure method, but what exactly should I do? Maybe someone can help?

EDIT OK, I tried to set the width and height of the elements manually in the getView method of the adapter, this is better, but still this is not what I wanted. How can I get rid of this column spacing?

Answer 1

First, you want to create your own View class, which you can use instead of the default LinearLayout. Then you want to override the call to View onMeasure and make it square:

 public class GridViewItem extends ImageView { public GridViewItem(Context context) { super(context); } public GridViewItem(Context context, AttributeSet attrs) { super(context, attrs); } public GridViewItem(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, widthMeasureSpec); // This is the key that will make the height equivalent to its width } } 

Then you can change the row_grid.xml file to:

 <path.to.item.GridViewItem xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/item_image" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/ic_launcher" > </path.to.item.GridViewItem> 

Just remember to change "path.to.item" to the package that contains the GridViewItem.java class.

Edit:

Also changed the scaleType from fitXY to centerCrop so that your image does not stretch and maintain its aspect ratio. And, as long as this is a square image, nothing should be cropped, independently.

Answer 2

So you need a GridView that is suitable for a screen with stretchMode="columnWidth" and stretchMode="rowWidth" . Unfortunately, the last one is not a real attribute, and you really need to do these calculations at runtime, as suggested by Sheriff al-Katib.

GridView is suitable for the screen and automatically stretches the columns for you.

 <GridView android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchMode="columnWidth" /> 

Therefore, we just need to stretch the string. What can we do by calculating how much rowHeight should be if we know the height of the GridView and rowsCount.

 public class YourAdapter extends BaseAdapter { int rowsCount; @Override public View getView(int position, View convertView, ViewGroup parent) { View itemView = convertView; if (itemView == null) { itemView = layoutInflater.inflate(R.layout.item_view, parent, false); int height = parent.getHeight(); if (height > 0) { LayoutParams layoutParams = itemView.getLayoutParams(); layoutParams.height = (int) (height / rowsCount); } // for the 1st item parent.getHeight() is not calculated yet } } }