GridLayout (not GridView) how to stretch all children evenly
UPDATE: Weights are supported as of API 21. See PaulT's answer for more details.
There are limitations when using the GridLayout, the following quote is taken from the documentation.
"GridLayout does not provide support for the principle of weight, as
defined in weight. In general, it is not therefore possible to
configure a GridLayout to distribute excess space in non-trivial
proportions between multiple rows or columns ... For complete control
over excess space distribution in a row or column; use a LinearLayout
subview to hold the components in the associated cell group."
Here is a small example that uses LinearLayout subviews. (I used Space Views that takes up unused area and pushes the buttons into desired position.)
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="1"
>
<TextView
android:text="2x2 button grid"
android:textSize="32dip"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="horizontal">
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 2" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 4" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</GridLayout>
How do I stretch a GridLayout to its parent?
When android API level < 21, it doesn't work well.
So we can add dependency in app gradle file:
implementation 'androidx.gridlayout:gridlayout:1.0.0'
If you've still not migrated to androidx (which you ought to), then use:
implementation 'com.android.support:gridlayout-v7:28.0.0'
Then change your code.
Use androidx.gridlayout.widget.GridLayout (or android.support.v7.widget.GridLayout, if not androidx) in your XML code.
<androidx.gridlayout.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/keyboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="4"
app:rowCount="5">
<Button
android:id="@+id/clearButton"
style="@style/CalculatorButtonStyle"
android:text="C"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/button15"
style="@style/CalculatorButtonStyle"
android:text="Button"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/percentButton"
style="@style/CalculatorButtonStyle"
android:text="%"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/divideButton"
style="@style/CalculatorButtonStyle"
android:text="÷"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/sevenNumButton"
style="@style/CalculatorButtonStyle"
android:text="7"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/eightNumButton"
style="@style/CalculatorButtonStyle"
android:text="8"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/nineNumButton"
style="@style/CalculatorButtonStyle"
android:text="9"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/plusButton"
style="@style/CalculatorButtonStyle"
android:text="+"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/fourNumButton"
style="@style/CalculatorButtonStyle"
android:text="4"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/fiveNumButton"
style="@style/CalculatorButtonStyle"
android:text="5"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/sixNumButton"
style="@style/CalculatorButtonStyle"
android:text="6"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/multiplyButton"
style="@style/CalculatorButtonStyle"
android:text="x"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/oneNumButton"
style="@style/CalculatorButtonStyle"
android:text="1"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/twoNumButton"
style="@style/CalculatorButtonStyle"
android:text="2"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/threeNumButton"
style="@style/CalculatorButtonStyle"
android:text="3"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/minusButton"
style="@style/CalculatorButtonStyle"
android:text="-"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/signButton"
style="@style/CalculatorButtonStyle"
android:text="+/-"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/zeroNumButton"
style="@style/CalculatorButtonStyle"
android:text="0"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/periodButton"
style="@style/CalculatorButtonStyle"
android:text="."
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="@+id/equalsButton"
style="@style/CalculatorButtonStyle"
android:text="="
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
</androidx.gridlayout.v7.widget.GridLayout>
Note
The new attributes are:
- app:layout_columnWeight
- app:layout_rowWeight
- app:layout_rowSpan
- app:layout_columnSpan
GridLayout not evenly spacing children throughout screen
The issue with this is that android:layout_columnWeight and android:layout_rowWeight are new in Lollipop and so aren't supported before that. You can use GridLayout from the support library and app:layout_columnWeight/app:layout_rowWeight to get these features for older android devices.
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rowCount="4"
app:columnCount="2">
<!--
there are six of these inside the grid layout
-->
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_columnWeight="1"
app:layout_rowWeight="1">
<ImageButton
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/button"
android:src="@drawable/button"
android:layout_gravity="center"/>
</LinearLayout>
</GridLayout>
Why GridLayout doesn't fill all the available space?
I think that everything is fine with your layout's behavior.
The android:layout_width="match_parent" setting for GridLayout, which is placed inside HorizontalScrollView, has no effect. A single child view inserted into GridLayout determines GridLayout's actual width (height if you used vertical ScrollView container), that can be bigger than the parent's screen width (width=match_parent setting thus has no effect here; and also for childviews). The columns and rows of the GridLayout have the size of the biggest childview inserted (assigned for this column/row).
This whole is a very dynamic structure. The number of columns and rows is recalculated automatically. Remember to tag the childviews with layout_row, and layout_column, and possibly setting the desired size - following the above mentioned rules, for example:
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:inputType="text"
android:id="@+id/editText1"
android:layout_row="2"
android:layout_column="8" />
So, by changing the childviews' width you can control the columns' width of the GridLayout. You can study the following example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:background="#f3f3f3">
<GridLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#a3ffa3">
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Col 1,Row4"
android:id="@+id/button"
android:layout_gravity="center"
android:layout_row="4"
android:layout_column="1" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start.."
android:layout_column="4"
android:layout_row="8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Col 6, Row 1."
android:id="@+id/button2"
android:layout_row="1"
android:layout_column="6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Col 6, Row 2."
android:id="@+id/button3"
android:layout_row="2"
android:layout_column="6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button4"
android:layout_gravity="center"
android:layout_column="9"
android:layout_row="3" />
<TextView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:layout_row="3"
android:layout_column="8" />
<CheckBox
android:layout_width="250dp"
android:layout_height="wrap_content"
android:text="New CheckBox"
android:id="@+id/checkBox"
android:layout_row="6"
android:layout_column="7"
android:textColor="#212995" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:ems="10"
android:id="@+id/editText"
android:layout_row="5"
android:layout_column="8"
android:textColor="#952a30" />
</GridLayout>
</HorizontalScrollView>
</LinearLayout>
I hope this was helpful. Best Regards :)
In addition:
I have found that the above may be actually difficult to achieve programmically. You might be considering changing the GridLayout to GridView or TableLayout, which are easier to handle. To learn more about it, please check these sites:
- GridLayout.LayoutParams
- GridLayout
- gridlayout-not-gridview-how-to-stretch-all-children-evenly
How to set the width of the children of GridLayout to equal size and make them evenly distributed?
Your GridView, as posted, has only one row. In this case, I would just use a LinearLayout instead:
<LinearLayout
android:id="@+id/info_contact_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/info_empresa_facebook_contact_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/ic_warning" />
<ImageView
android:id="@+id/info_empresa_whatsapp_contact_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/ic_warning" />
<ImageView
android:id="@+id/info_empresa_call_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/ic_warning" />
</LinearLayout>
GridView children should stretch out to fill their GridView parent
I wasn't able to find out a straightforward solution to my problem using GridView so I used GridLayout and with the help of the accepted answer:
GridLayout (not GridView) how to stretch all children evenly
I modified my layout to have 9 buttons that stretch appropriately I am posting the layout for further reference:
<GridLayout
android:id="@+id/hotelHomeGridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/footerContainer"
android:layout_below="@id/hotel_logo"
android:columnCount="2"
android:columnWidth="90dp"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="spacingWidthUniform"
android:verticalSpacing="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 2" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 3" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left|center_vertical"
android:layout_row="0"
android:orientation="horizontal" >
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 5" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 6" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="left|bottom"
android:layout_row="0"
android:orientation="horizontal" >
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 7" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 8" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 9" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</GridLayout>
Gridlayout layout not working correctly on some android
Try This Solution:
will create recyclerview
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rc_txt_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:spanCount="3" />We will create rowView
<androidx.cardview.widget.CardView
android:id="@+id/emergencysection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:onClick="random"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="15dp"
android:paddingBottom="5dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/newemergency" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/jameel"
android:text="ایمرجینسی"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
Related Topics
How to Develop a Soft Keyboard For Android
How to Find Out Which Keystore Was Used to Sign an App
How to Customize Listview Using Baseadapter
How to Implement Android Pull-To-Refresh
How to Display the Current Value of an Android Preference in the Preference Summary
How to Use Custom Font in a Project Written in Android Studio
Android Youtube App Play Video Intent
How to Refresh App Upon Shaking the Device
Resume Application and Stack from Notification
How to Pass a Value from One Activity to Another in Android
Generate Sha-1 for Flutter/React-Native/Android-Native App