I have a GridLayout (4 columns / 8 rows) of MaterialCardView
s. Each card has equal layout_columnWeight
and layout_rowWeight
of 0.25
and their layout_gravity
is set to center|fill_horizontal
.
The cards have a TextView
and two ImageView
s of width 30dp in a vertical LinearLayout
. Normally the width of each card is 60dp + LinearLayout
's margin (6dp); so 72dp in total. However, if the text is too long, the width of the card could exceed 72dp. Also, the GridLayout
has 6dp padding and the cards have 6dp margin.
Condsider the following example:
The row's available width is 500dp; Each card should end up being 110dp wide since 110 * 4 + 4 * 6 * 2 (cards' margin) + 6 * 2 (grid layout's padding) = 500dp. This is regardless of the size of the text as long as it doesn't exceed 110dp - 6 * 2 (linear layout's margin) = 98dp.
However, when the text's width exceeds 60dp (the width of the two images), the grid layout doesn't give the cards equal width but rather divides the extra available space between them equally so the cards could end up with different widths.
For example, if all the texts were shorter than 60dp, the cards would be 72dp and they would stretch to 110dp, but say one the texts is actually 80dp; The extra available space would be: 500 - 3 * (60 + 6 + 6) - (80 + 6 + 6) - 6 * 2 (grid layout's padding) - 4 * 6 * 2 (cards' margin) = 132dp. Each card would get 132 / 4 = 33dp and the small ones would end up being 105dp and the large one 125dp.
How can I make the cards have equal width instead of equal extra width ?
the grid layout:
<androidx.gridlayout.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fragment_home_bottom_sheet_io"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:clipToPadding="false"
android:layoutDirection="ltr"
android:padding="6dp"
app:columnCount="4"
app:rowCount="8">
<include
layout="@layout/item_port"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
app:layout_column="0"
app:layout_columnWeight="0.25"
app:layout_gravity="center|fill_horizontal"
app:layout_row="0"
app:layout_rowWeight="0.25" />
<!-- include repeated 31 more times with appropriate column and row numbers -->
</androidx.gridlayout.widget.GridLayout>
item_port.xml:
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/blue_light_3"
android:checkable="false"
android:focusable="false"
app:cardCornerRadius="24dp"
app:cardElevation="4dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="6dp"
android:orientation="vertical">
<LinearLayout
android:id="@+id/item_port_number_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:id="@+id/item_port_number"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true" />
<ImageView
android:id="@+id/item_port_type"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true" />
</LinearLayout>
<TextView
android:id="@+id/item_port_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textSize="12sp" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>