Develop Reference

Grid layout extra space

I am trying to make an android Calculator app but however i am stuck on one thing, there is some extra space coming up while using grid layout.
Now i know i have used match parent value for the layout height and width which might be the reason for the extra spacing in the image.
Since , i am new to android and i am just learning more and more of android, could anyone let me know , how can i evenly distribute those buttons on the grid layout?
Code
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.tilak.myfirstapplication.MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="#+id/editText3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:height="225dp"
android:ems="10"
android:layout_gravity="fill_horizontal"
android:inputType="textMultiLine"
tools:layout_editor_absoluteX="104dp"
tools:layout_editor_absoluteY="207dp" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="5"
android:columnCount="4"
android:background="#ff0000"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="0"
android:layout_column="0"
tools:layout_editor_absoluteX="136dp"
tools:layout_editor_absoluteY="100dp" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="0"
android:layout_column="1"
tools:layout_editor_absoluteX="116dp"
tools:layout_editor_absoluteY="289dp" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="0"
android:layout_column="2"
tools:layout_editor_absoluteX="129dp"
tools:layout_editor_absoluteY="255dp" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="0"
android:layout_column="3"
tools:layout_editor_absoluteX="41dp"
tools:layout_editor_absoluteY="180dp" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="1"
android:layout_column="0"
tools:layout_editor_absoluteX="64dp"
tools:layout_editor_absoluteY="259dp" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="1"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="1"
android:layout_column="2"
tools:layout_editor_absoluteX="129dp"
tools:layout_editor_absoluteY="217dp" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="3"
android:text="Button"
tools:layout_editor_absoluteX="129dp"
tools:layout_editor_absoluteY="168dp" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="0"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="1"
android:text="Button" />
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="2"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="3"
android:text="Button" />
<Button
android:id="#+id/button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="0"
android:text="Button" />
<Button
android:id="#+id/button17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="1"
android:text="Button" />
<Button
android:id="#+id/button18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="2"
android:text="Button" />
<Button
android:id="#+id/button19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="3"
android:text="Button" />
<Button
android:id="#+id/button20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="0"
android:text="Button" />
<Button
android:id="#+id/button21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="1"
android:text="Button" />
<Button
android:id="#+id/button22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="2"
android:text="Button" />
<Button
android:id="#+id/button23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="3"
android:text="Button" />
</GridLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

I suggest using the weight attribute to make the child views share the space equally. There's another post here on StackOverflow with a great answer that covers the subject:
https://stackoverflow.com/a/30245753/2281718
In short, just set the width to 0dp and add the android:layout_columnWeight="1" for all children
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
...
/>

Use place holder like this.
This is not exact XML.
<button 1/>
<textview weight=1>
<button 2/>
<textview weight=1>
<button 3/>
<textview weight=1>
<button 4/>

How do I stretch a GridLayout to its parent?

I am trying to stretch the keyboard of my calculator (which is a GridLayout with buttons inside of it). It is a 5*4(columns*rows).
I give GridLayout android:layout_height="match_parent" and android:layout_width="match_parent" to make its dimensions fill the available space. then
I assign the column and row indices to the cells with android:layout_column an android:layout_row accordingly.
I get the following result:
1080x1920
The cells take an uniform width and height, but do not stretch enough to fill the whole grid. So I searched online and saw that I could assign an equal weight to each cell and the layout figures out a uniform width and height value that fills the whole grid.
(Side question: how does android determine the size of these cells in this case? why did it not make them larger/smaller than what it is here?)
So I add:
android:layout_weight="1" and android:layout_height="1" to each of the buttons
I get this result:
1080x1920
Awesome. Looks like it is working as intended.. until I change the resolution to something else:
480x800
Or if I keep the same 1080x1920 resolution but force the min height of the top section to something like 280dp (279dp works fine)
How can I fix this? I am intending API Level 21 and I want to force the GridLayout to fill the available space no matter. I prefer the buttons to be squeezed (even have their content clipped/ invisible) rather than to shoot off the screen. To finish here is the XML:
main.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/root">
<!--Top section (screen + few keys)-->
<LinearLayout
android:style="#style/CalculatorScreenStyle"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/top">
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="280dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40sp"
android:hint="Enter a number here"/>
</LinearLayout>
<!-- Keyboard layout -->
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/keyboard"
android:columnCount="4"
android:rowCount="5">
<Button
android:style="#style/CalculatorButtonStyle"
android:text="C"
android:id="#+id/clearButton"
android:layout_column="0"
android:layout_row="0" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="Button"
android:id="#+id/button15"
android:layout_column="1"
android:layout_row="0" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="%"
android:layout_column="2"
android:layout_row="0"
android:id="#+id/percentButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:id="#+id/divideButton"
android:layout_column="3"
android:layout_row="0"
android:text="÷" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="7"
android:layout_column="0"
android:layout_row="1"
android:id="#+id/sevenNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="8"
android:layout_column="1"
android:layout_row="1"
android:id="#+id/eightNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="9"
android:layout_column="2"
android:layout_row="1"
android:id="#+id/nineNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="+"
android:layout_column="3"
android:layout_row="1"
android:id="#+id/plusButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="4"
android:layout_column="0"
android:layout_row="2"
android:id="#+id/fourNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="5"
android:layout_column="1"
android:layout_row="2"
android:id="#+id/fiveNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="6"
android:layout_column="2"
android:layout_row="2"
android:id="#+id/sixNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="x"
android:layout_column="3"
android:layout_row="2"
android:id="#+id/multiplyButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="1"
android:layout_column="0"
android:layout_row="3"
android:id="#+id/oneNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="2"
android:layout_column="1"
android:layout_row="3"
android:id="#+id/twoNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="3"
android:layout_column="2"
android:layout_row="3"
android:id="#+id/threeNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="-"
android:layout_column="3"
android:layout_row="3"
android:id="#+id/minusButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="+/-"
android:layout_column="0"
android:layout_row="4"
android:id="#+id/signButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="0"
android:layout_column="1"
android:layout_row="4"
android:id="#+id/zeroNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="."
android:layout_column="2"
android:layout_row="4"
android:id="#+id/periodButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="="
android:layout_column="3"
android:layout_row="4"
android:id="#+id/equalsButton" />
</GridLayout>
</LinearLayout>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CalculatorButtonStyle" >
<item name="android:textSize">22sp</item>
<item name="android:layout_columnWeight">1</item>
<item name="android:layout_rowWeight">1</item>
<item name="android:background">#9E5EC2</item>
</style>
<style name="CalculatorScreenStyle">
<item name="android:background">#ED59E8</item>
</style>
</resources>
EDIT: As a temporary solution, I am using a vertical LinearLayout of horizontals LinearLayouts and I assing an equal weights to all the Buttons. It works fine but then I wonder what is the use of GridLayout if I have to emulate how it works myself..

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

Android GridLayout cutting off

I'm following this tutorial: http://code.tutsplus.com/tutorials/android-user-interface-design-creating-a-numeric-keypad-with-gridlayout--mobile-8677
But in my application, I'm getting the result:
I mean, the buttons are being cutted off of the screen.
The XML is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dp"
android:orientation="vertical"
tools:context=".AtividadePrincipal">
<GridLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal" >
<Button
android:layout_column="3"
android:text="/" />
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="*" />
<Button android:text="4" />
<Button android:text="5" />
<Button android:text="6" />
<Button android:text="-" />
<Button android:text="7" />
<Button android:text="8" />
<Button android:text="9" />
<Button
android:layout_gravity="fill"
android:layout_rowSpan="3"
android:text="+" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="0" />
<Button android:text="00" />
<Button
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:text="=" />
</GridLayout>
</LinearLayout>

android:layout_width="0dp"
android:layout_height="wrap_content"
<android.support.v7.widget.GridLayout>
......
<Spinner
android:id="#+id/area"
style="#style/Widget.AppCompat.Spinner.Underlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:minHeight="32dp"
android:prompt="#null"
app:layout_column="1"
app:layout_gravity="center_vertical|fill_horizontal"
app:layout_row="2" />
</android.support.v7.widget.GridLayout>
`

GridLayout and Row/Column Span Woe

The Android Developers Blog post introducing GridLayout shows this diagram of how spans impact automatic index allocation:
I am attempting to actually implement that using a GridLayout. Here is what I have so far:
<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.commonsware.android.gridlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:orientation="horizontal"
app:columnCount="8">
<Button
app:layout_columnSpan="2"
app:layout_rowSpan="2"
android:layout_gravity="fill_horizontal"
android:text="#string/string_1"/>
<Button
app:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="#string/string_2"/>
<Button
app:layout_rowSpan="4"
android:text="#string/string_3"/>
<Button
app:layout_columnSpan="3"
app:layout_rowSpan="2"
android:layout_gravity="fill_horizontal"
android:text="#string/string_4"/>
<Button
app:layout_columnSpan="3"
android:layout_gravity="fill_horizontal"
android:text="#string/string_5"/>
<Button
app:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="#string/string_6"/>
<android.support.v7.widget.Space
app:layout_column="0"
android:layout_width="36dp"
/>
<android.support.v7.widget.Space
android:layout_width="36dp"
/>
<android.support.v7.widget.Space
android:layout_width="36dp"
/>
<android.support.v7.widget.Space
android:layout_width="36dp"
/>
<android.support.v7.widget.Space
android:layout_width="36dp"
/>
<android.support.v7.widget.Space
android:layout_width="36dp"
/>
<android.support.v7.widget.Space
android:layout_width="36dp"
/>
<android.support.v7.widget.Space
android:layout_width="36dp"
/>
</android.support.v7.widget.GridLayout>
I had to introduce the <Space> elements to ensure each column had a minimum width, otherwise, I would have a bunch of zero-width columns.
However, even with them, I get this:
Notably:
Despite android:layout_gravity="fill_horizontal", my widgets with column spans do not fill the spanned columns
Despite the android:layout_rowSpan values, nothing spans rows
Can anyone reproduce the diagram from the blog post using a GridLayout?
Thanks!

It feels pretty hacky, but I managed to get the correct look by adding an extra column and row beyond what is needed. Then I filled the extra column with a Space in each row defining a height and filled the extra row with a Space in each col defining a width. For extra flexibility, I imagine these Space sizes could be set in code to provide something similar to weights. I tried to add a screenshot, but I do not have the reputation necessary.
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="9"
android:orientation="horizontal"
android:rowCount="8" >
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:layout_rowSpan="2"
android:text="1" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="2" />
<Button
android:layout_gravity="fill_vertical"
android:layout_rowSpan="4"
android:text="3" />
<Button
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:layout_rowSpan="2"
android:text="4" />
<Button
android:layout_columnSpan="3"
android:layout_gravity="fill_horizontal"
android:text="5" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="6" />
<Space
android:layout_width="36dp"
android:layout_column="0"
android:layout_row="7" />
<Space
android:layout_width="36dp"
android:layout_column="1"
android:layout_row="7" />
<Space
android:layout_width="36dp"
android:layout_column="2"
android:layout_row="7" />
<Space
android:layout_width="36dp"
android:layout_column="3"
android:layout_row="7" />
<Space
android:layout_width="36dp"
android:layout_column="4"
android:layout_row="7" />
<Space
android:layout_width="36dp"
android:layout_column="5"
android:layout_row="7" />
<Space
android:layout_width="36dp"
android:layout_column="6"
android:layout_row="7" />
<Space
android:layout_width="36dp"
android:layout_column="7"
android:layout_row="7" />
<Space
android:layout_height="36dp"
android:layout_column="8"
android:layout_row="0" />
<Space
android:layout_height="36dp"
android:layout_column="8"
android:layout_row="1" />
<Space
android:layout_height="36dp"
android:layout_column="8"
android:layout_row="2" />
<Space
android:layout_height="36dp"
android:layout_column="8"
android:layout_row="3" />
<Space
android:layout_height="36dp"
android:layout_column="8"
android:layout_row="4" />
<Space
android:layout_height="36dp"
android:layout_column="8"
android:layout_row="5" />
<Space
android:layout_height="36dp"
android:layout_column="8"
android:layout_row="6" />
</GridLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:columnCount="8"
android:rowCount="7" >
<TextView
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_columnSpan="2"
android:layout_rowSpan="2"
android:background="#a30000"
android:gravity="center"
android:text="1"
android:textColor="#android:color/white"
android:textSize="20dip" />
<TextView
android:layout_width="50dip"
android:layout_height="25dip"
android:layout_columnSpan="2"
android:layout_rowSpan="1"
android:background="#0c00a3"
android:gravity="center"
android:text="2"
android:textColor="#android:color/white"
android:textSize="20dip" />
<TextView
android:layout_width="25dip"
android:layout_height="100dip"
android:layout_columnSpan="1"
android:layout_rowSpan="4"
android:background="#00a313"
android:gravity="center"
android:text="3"
android:textColor="#android:color/white"
android:textSize="20dip" />
<TextView
android:layout_width="75dip"
android:layout_height="50dip"
android:layout_columnSpan="3"
android:layout_rowSpan="2"
android:background="#a29100"
android:gravity="center"
android:text="4"
android:textColor="#android:color/white"
android:textSize="20dip" />
<TextView
android:layout_width="75dip"
android:layout_height="25dip"
android:layout_columnSpan="3"
android:layout_rowSpan="1"
android:background="#a500ab"
android:gravity="center"
android:text="5"
android:textColor="#android:color/white"
android:textSize="20dip" />
<TextView
android:layout_width="50dip"
android:layout_height="25dip"
android:layout_columnSpan="2"
android:layout_rowSpan="1"
android:background="#00a9ab"
android:gravity="center"
android:text="6"
android:textColor="#android:color/white"
android:textSize="20dip" />
</GridLayout>
</RelativeLayout>

You have to set both layout_gravity and layout_columntWeight on your columns
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView android:text="سوم شخص"
app:layout_gravity="fill_horizontal"
app:layout_columnWeight="1"
/>
<TextView android:text="دوم شخص"
app:layout_gravity="fill_horizontal"
app:layout_columnWeight="1"
/>
<TextView android:text="اول شخص"
app:layout_gravity="fill_horizontal"
app:layout_columnWeight="1"
/>
</android.support.v7.widget.GridLayout>

Android Support V7 GridLayout library makes excess space distribution easy by accommodating the principle of weight. To make a column stretch, make sure the components inside it define a weight or a gravity. To prevent a column from stretching, ensure that one of the components in the column does not define a weight or a gravity. Remember to add dependency for this library. Add com.android.support:gridlayout-v7:25.0.1 in build.gradle.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="2"
app:rowCount="2">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="First"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="Second"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="Third"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="fourth"/>
</android.support.v7.widget.GridLayout>

Starting from API 21, the GridLayout now supports the weight like LinearLayout. For details please see the link below:
https://stackoverflow.com/a/31089200/1296944

Android Layout Changes

I'm arranging elements on a layout, but if I use Linear Layout, everything lines up along the left. If I set gravity of some elements to be "center", for example, some texts, then on a phone, it looks ok. But if is a pad, then the whole view lies on the left side leaving large area on the right.
So how can I make the view in the center on any devices?
The second question is: If I set the text to be longer, then some words disappear (since they are out of the layout). How can I make the words lie in the center with several lines if necessary instead of being just one really long line and some part outside the view?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:layout_gravity="center">
<TextView
android:id="#+id/text"
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_gravity="right"
android:layout_row="0"
android:layout_rowSpan="3"
android:ems="10" />
<RadioGroup
android:id="#+id/first_radiogroup"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="bottom"
android:layout_row="1"
android:layout_rowSpan="3" >
<RadioButton
android:id="#+id/1_1"
android:text="1_1" />
<RadioButton
android:id="#+id/1_2"
android:text="1_2" />
<RadioButton
android:id="#+id/1_3"
android:text="1_3" />
</RadioGroup>
<TextView
android:id="#+id/firsttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="2"
android:shadowColor="#000000"
android:shadowDx="1"
android:shadowDy="1"
android:shadowRadius="1.5"
android:text="please choose from the below:"
android:textColor="#000000"
android:textSize="40px"
android:textStyle="normal"
android:typeface="serif"
android:gravity="center"/>
<RadioGroup
android:id="#+id/secon_radiogroup"
android:layout_column="0"
android:layout_gravity="bottom"
android:layout_row="3"
android:layout_rowSpan="3" >
<RadioButton
android:id="#+id/2_1"
android:text="2_1" />
<RadioButton
android:id="#+id/2_2"
android:text="2_2" />
<RadioButton
android:id="#+id/2_3"
android:text="2_3" />
</RadioGroup>
<TextView
android:id="#+id/secondtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_row="5"
android:shadowColor="#000000"
android:shadowDx="1"
android:shadowDy="1"
android:shadowRadius="1.5"
android:text="please choose from the below:"
android:textColor="#000000"
android:textSize="40px"
android:textStyle="normal"
android:typeface="serif" />
<Button
android:id="#+id/final"
android:layout_column="2"
android:layout_row="6"
android:text="final" />
<Space
android:layout_width="1dp"
android:layout_height="21dp"
android:layout_column="0"
android:layout_row="0" />
<Space
android:layout_width="1dp"
android:layout_height="20dp"
android:layout_column="0"
android:layout_row="4" />
<Space
android:layout_width="1dp"
android:layout_height="174dp"
android:layout_column="0"
android:layout_gravity="fill_horizontal"
android:layout_row="5" />
<Space
android:layout_width="1dp"
android:layout_height="70dp"
android:layout_column="0"
android:layout_row="6" />
<Space
android:layout_width="213dp"
android:layout_height="1dp"
android:layout_column="2"
android:layout_row="0" />
<Space
android:layout_width="104dp"
android:layout_height="1dp"
android:layout_column="0"
android:layout_row="0" />
<Space
android:layout_width="3dp"
android:layout_height="1dp"
android:layout_column="1"
android:layout_row="0" />
<Space
android:layout_width="1dp"
android:layout_height="26dp"
android:layout_column="0"
android:layout_row="1" />
<Space
android:layout_width="1dp"
android:layout_height="166dp"
android:layout_column="0"
android:layout_row="2" />
</GridLayout>

You should make different layout file for different screen size.
here below link may help you
http://developer.android.com/training/basics/supporting-devices/index.html