Develop Reference

Android GridLayout — deleting one layout weight causes all other cells to disappear

I've created a simple GridLayout with a bunch of buttons. Every button has layout_columnWeight and layout_rowWeight set to "1" to cause the gridlayout to expand to fill the space.
If I delete any of the weights, e.g. layout_columnWeight from the upper-left button, all of the other buttons in that column disappear.
Can anybody explain what's going on here?
My complete layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/colorAccent">
<Button
android:id="#+id/button24"
android:text="7"
app:layout_column="0"
app:layout_row="1"
app:layout_columnWeight=".01"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button25"
android:text="8"
app:layout_column="1"
app:layout_row="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button26"
android:text="9"
app:layout_column="2"
app:layout_row="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button28"
android:text="4"
app:layout_column="0"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button29"
android:text="5"
app:layout_column="1"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button30"
android:text="6"
app:layout_column="2"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button34"
android:text="1"
app:layout_column="0"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button35"
android:text="2"
app:layout_column="1"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button36"
android:text="3"
app:layout_column="2"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
</androidx.gridlayout.widget.GridLayout>
</LinearLayout>

How to fix design Android?

This is the XML, but for smartphone and Android it is a different design.
This is for the grid layout and the button in there.
This is the display for tablet:
And this for smartphone:
I want for all two user interfaces the full table
<android.support.v7.widget.GridLayout
android:id="#+id/gridLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:columnCount="4"
app:layout_constraintBottom_toTopOf="#+id/btnWin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rowCount="4"
tools:ignore="MissingConstraints">
<Button
android:id="#+id/button1"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="1"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button2"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="2"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button3"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="3"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button4"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="4"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button5"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="5"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button6"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="6"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button7"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="7"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button8"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="8"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button9"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="9"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button10"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="10"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button11"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="11"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button12"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="12"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button13"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="13"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button14"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="14"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button15"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="15"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
<Button
android:id="#+id/button16"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="0"
app:layout_columnSpan="1"
app:layout_columnWeight="1"
app:layout_rowSpan="1" />
</android.support.v7.widget.GridLayout>
I don't understand where is the problem.

It's simple - height - 0dp:
<android.support.v7.widget.GridLayout
android:id="#+id/gridLayout2"
android:layout_width="0dp"
android:layout_height="0dp"

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

Create Grid Layout with 5 columns

I'm trying to understand basics of android layouts. So, because of it, I had decided to create calculator app with 2 views: basic and scientific.
So, I finished creating a basic layout, and now trying to create scientific layout with one more row with operations like pow, sqrt, ln and etc.
And I faced trouble while to add new column to existing layout: when I trying to add new button, it goes beyond the screen.
So, the queston is: how to make grid layout with 5 columns without hardcoding button's width?
My code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:grid="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
tools:context="android.calcandroid.MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
></include>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20">
<TextView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:gravity="bottom|end"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="48sp"
android:background="#e3e7ea"
android:paddingBottom="32dp"
android:padding="16dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80">
<android.support.v7.widget.GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
grid:useDefaultMargins="false"
grid:alignmentMode="alignBounds"
grid:columnCount="7"
grid:rowCount="9">
<!-- Row 1 -->
<Button
android:text="C"
android:background="#drawable/shape"
grid:layout_row="0"
grid:layout_column="0"
style="#style/calcAction"
android:textStyle="bold"
android:textColor="#color/calcAccent"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<ImageButton
android:background="#drawable/shape"
android:src="#android:drawable/ic_input_delete"
grid:layout_row="0"
grid:layout_column="2"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1" />
<Button
android:background="#drawable/shape"
android:text="÷"
grid:layout_row="0"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_column="4"/>
<Button
android:background="#drawable/shape"
android:text="x"
grid:layout_row="0"
grid:layout_column="6"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcAction"/>
<!-- Row 2 -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="1"
grid:layout_column="0"
grid:layout_columnSpan="7"
android:background="#eee"/>
<Button
android:background="#drawable/shape"
android:text="7"
grid:layout_row="2"
grid:layout_column="0"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcNumber"/>
<Button
android:background="#drawable/shape"
android:text="8"
grid:layout_row="2"
grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="9"
grid:layout_row="2"
grid:layout_column="4"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="-"
grid:layout_row="2"
grid:layout_column="6"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<!-- Row 3 -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="3"
grid:layout_column="0"
grid:layout_columnSpan="7"
android:background="#eee"/>
<Button
android:background="#drawable/shape"
android:text="4"
grid:layout_row="4"
grid:layout_column="0"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="5"
grid:layout_row="4"
grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="6"
grid:layout_row="4"
grid:layout_column="4"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="+"
grid:layout_row="4"
grid:layout_column="6"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="7"
grid:layout_column="0"
grid:layout_columnSpan="7"
android:background="#eee"/>
<!-- Row 4 -->
<Button
android:background="#drawable/shape"
android:text="1"
grid:layout_row="6"
grid:layout_column="0"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="2"
grid:layout_row="6"
grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
grid:layout_row="6"
grid:layout_column="4"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
android:text="3"
style="#style/calcNumber"/>
<Button
grid:layout_row="6"
grid:layout_column="6"
grid:layout_rowSpan="3"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
android:background="#color/calcAccent"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/primary_material_light"
android:textStyle="bold"
android:textSize="22sp"
android:gravity="center_vertical|center_horizontal"
android:padding="8dp"
android:text="="
style="#style/calcNumber"/>
<!-- Row 5 -->
<Button
android:background="#drawable/shape"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="8"
grid:layout_column="0"
grid:layout_columnSpan="3"
style="#style/calcNumber"
android:text="0"/>
<Button
android:background="#drawable/shape"
grid:layout_row="8"
grid:layout_column="4"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcNumber"
android:text="."/>
<!-- Horizontal Grid -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7"
android:background="#eee"/>
</android.support.v7.widget.GridLayout>
</LinearLayout>
</LinearLayout>
And how it looks with 4 columns: 4 columns

Well, as noone answered, I had solved this by myself.
The issue was in hardcoding button's grid cells number and also in my not full understanding of grid:layout_columnWeight & grid:layout_rowWeight.
So I removed hardcoded values and here is the full code of solution:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:grid="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
tools:context="android.calcandroid.MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
></include>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20">
<TextView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:gravity="bottom|end"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="48sp"
android:background="#e3e7ea"
android:paddingBottom="32dp"
android:padding="16dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80">
<android.support.v7.widget.GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
grid:useDefaultMargins="false"
grid:alignmentMode="alignBounds"
grid:columnCount="5"
grid:rowCount="5">
<!-- Row 1 -->
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="ln"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcAction"/>
<Button
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:text="C"
android:background="#drawable/shape"
android:layout_width="0dp"
android:layout_height="0dp"
style="#style/calcAction"
android:textStyle="bold"
android:textColor="#color/calcAccent"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:src="#android:drawable/ic_input_delete"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1" />
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="÷"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="x"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcAction"/>
<!-- Row 2 -->
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="log"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="7"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcNumber"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="8"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="9"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="-"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<!-- Row 3 -->
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="\u221A"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="4"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="5"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="6"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="+"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<!-- Row 4 -->
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="^"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="1"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="2"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
android:text="3"
style="#style/calcNumber"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_vertical"
grid:layout_rowSpan="2"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
android:background="#color/calcAccent"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/primary_material_light"
android:textStyle="bold"
android:textSize="22sp"
android:gravity="center_vertical|center_horizontal"
android:padding="8dp"
android:text="="
style="#style/calcNumber"/>
<!-- Row 5 -->
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
android:text="!"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_columnSpan="2"
style="#style/calcNumber"
android:text="0"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_gravity="fill_horizontal"
android:gravity="center"
android:background="#drawable/shape"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcNumber"
android:text="."/>
</android.support.v7.widget.GridLayout>
</LinearLayout>
</LinearLayout>
And a screenshot: pretty nice!
Hope that this answer will help somebody.

Messing up with a calculator using a GridLayout

I'm facing troubles with making layouts look nice.
To understand basics, I've decided to create a simple calculator app.
So, I'm using a GridLayout nested in a LinearLayout to place Buttons under text fields.
Here is the source of my layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="0"
android:layout_weight="30"/>
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:rowCount="5"
android:orientation="horizontal"
android:useDefaultMargins="false"
android:layout_weight="70">
<Button
android:text="C" />
<Button
android:text="BS" />
<Button
android:text="/" />
<Button
android:text="x" />
<Button
android:text="7" />
<Button
android:text="8" />
<Button
android:text="9" />
<Button
android:text="-" />
<Button
android:text="4" />
<Button
android:text="5" />
<Button
android:text="6" />
<Button
android:text="+" />
<Button
android:text="1" />
<Button
android:text="2" />
<Button
android:text="3" />
<Button
android:layout_gravity="fill"
android:layout_rowSpan="2"
android:text="=" />
<Button
android:layout_gravity="fill"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:text="." />
</GridLayout>
</LinearLayout>
How to make this layout fill the screen?
And make my app looking like this
Hoping for quick answers.
[EDIT]: So, now things are way better, but I got new questions.
Now my main activity looks like this
Quite nice, in my opinion, but:
How to remove empty space on the right side of keyboard?
How to make keyboard and text view taking like 70 and 30 percents of screen respectively?
Also, new layout code is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="android.calcandroid.MainActivity">
<TextView
android:background="#drawable/shape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:layout_above="#+id/gridLayout" />
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentBottom="true"
android:columnCount="4"
android:rowCount="5"
android:orientation="horizontal"
android:useDefaultMargins="false">
<Button
android:background="#drawable/shape"
android:text="C" />
<Button
android:background="#drawable/shape"
android:text="BS" />
<Button
android:background="#drawable/shape"
android:text="/" />
<Button
android:background="#drawable/shape"
android:text="x" />
<Button
android:background="#drawable/shape"
android:text="7" />
<Button
android:background="#drawable/shape"
android:text="8" />
<Button
android:background="#drawable/shape"
android:text="9" />
<Button
android:background="#drawable/shape"
android:text="-" />
<Button
android:background="#drawable/shape"
android:text="4" />
<Button
android:background="#drawable/shape"
android:text="5" />
<Button
android:background="#drawable/shape"
android:text="6" />
<Button
android:background="#drawable/shape"
android:text="+" />
<Button
android:background="#drawable/shape"
android:text="1" />
<Button
android:background="#drawable/shape"
android:text="2" />
<Button
android:background="#drawable/shape"
android:text="3" />
<Button
android:background="#drawable/shape"
android:layout_gravity="fill_vertical"
android:layout_rowSpan="2"
android:text="=" />
<Button
android:background="#drawable/shape"
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:background="#drawable/shape"
android:text="." />
</GridLayout>
</RelativeLayout>

Got pretty close. Not sure how to handle the vertical dividers. For some reason putting a 1dp View between each column that spanned each row causes the GridLayout to expand the entire View.
And to use this, you need this dependency for your support library version
compile "com.android.support:gridlayout-v7:<support library number>"
color.xml
<color name="calcAccent">#ef6c00</color>
styles.xml
<style name="calcAction">
<item name="android:background">#f7f8fa</item>
</style>
<style name="calcNumber">
<item name="android:background">#fafbfd</item>
</style>
Layout XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:layout_above="#+id/gridLayout" android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" android:gravity="bottom|end"
android:singleLine="true" android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="48sp" android:background="#e3e7ea" android:paddingBottom="32dp"
android:padding="16dp"/>
<android.support.v7.widget.GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"
grid:useDefaultMargins="false" grid:alignmentMode="alignBounds" grid:columnCount="7" grid:rowCount="9">
<!-- Row 1 -->
<Button
android:text="C"
grid:layout_row="0" grid:layout_column="0"
style="#style/calcAction" android:textStyle="bold" android:textColor="#color/calcAccent"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<ImageButton
android:src="#android:drawable/ic_input_delete"
grid:layout_row="0" grid:layout_column="2"
style="#style/calcAction"
grid:layout_columnWeight="1" grid:layout_rowWeight="1" />
<Button
android:text="÷"
grid:layout_row="0"
style="#style/calcAction"
grid:layout_columnWeight="1" grid:layout_rowWeight="1" grid:layout_column="4"/>
<Button
android:text="x"
grid:layout_row="0" grid:layout_column="6"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"
style="#style/calcAction"/>
<!-- Row 2 -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="1" grid:layout_column="0" grid:layout_columnSpan="7"
android:background="#eee"/>
<Button
android:text="7" grid:layout_row="2" grid:layout_column="0"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"
style="#style/calcNumber"/>
<Button
android:text="8" grid:layout_row="2" grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="9" grid:layout_row="2" grid:layout_column="4"
style="#style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="-" grid:layout_row="2" grid:layout_column="6"
style="#style/calcAction"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<!-- Row 3 -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="3" grid:layout_column="0" grid:layout_columnSpan="7"
android:background="#eee"/>
<Button
android:text="4" grid:layout_row="4" grid:layout_column="0"
style="#style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="5" grid:layout_row="4" grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="6" grid:layout_row="4" grid:layout_column="4"
style="#style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="+" grid:layout_row="4" grid:layout_column="6"
style="#style/calcAction"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="7" grid:layout_column="0" grid:layout_columnSpan="7"
android:background="#eee"/>
<!-- Row 4 -->
<Button
android:text="1" grid:layout_row="6" grid:layout_column="0"
style="#style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="2" grid:layout_row="6" grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="3" grid:layout_row="6" grid:layout_column="4"
style="#style/calcNumber"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
<Button
android:text="=" grid:layout_row="6" grid:layout_column="6"
style="#style/calcNumber" android:background="#color/calcAccent"
grid:layout_rowSpan="3"
grid:layout_columnWeight="1" grid:layout_rowWeight="1"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/primary_material_light" android:textStyle="bold" android:textSize="22sp"
android:gravity="bottom|center_horizontal" android:padding="8dp"/>
<!-- Row 5 -->
<Button
grid:layout_columnWeight="1" grid:layout_rowWeight="1"
android:text="0"
grid:layout_row="8" grid:layout_column="0" grid:layout_columnSpan="3"
style="#style/calcNumber"/>
<Button
android:text="."
grid:layout_row="8" grid:layout_column="4"
grid:layout_columnWeight="1" style="#style/calcNumber"/>
<!-- Horizontal Grid -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7"
android:background="#eee"/>
</android.support.v7.widget.GridLayout>
</RelativeLayout>

Change your = and 0 buttons to:
<Button
android:layout_rowSpan="2"
android:layout_gravity="fill_vertical"
android:text="=" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="0" />
[EDIT]
I realised from your comment that the = button was protruding to the bottom of the screen. This will be because you assigned a high weight to the calculator so using fill_vertical would do that.
I am assuming (but correct me if I'm wrong) from the desired graphic you showed that you want the calculator to be aligned to the bottom of the screen. If that's the case, here's my suggested amendment to your layout (tldr: use RelativeLayout instead of LinearLayout):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:layout_above="#+id/gridLayout" />
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentBottom="true"
android:columnCount="4"
android:rowCount="5"
android:orientation="horizontal"
android:useDefaultMargins="false">
<Button
android:text="C" />
<Button
android:text="BS" />
<Button
android:text="/" />
<Button
android:text="x" />
<Button
android:text="7" />
<Button
android:text="8" />
<Button
android:text="9" />
<Button
android:text="-" />
<Button
android:text="4" />
<Button
android:text="5" />
<Button
android:text="6" />
<Button
android:text="+" />
<Button
android:text="1" />
<Button
android:text="2" />
<Button
android:text="3" />
<Button
android:layout_gravity="fill_vertical"
android:layout_rowSpan="2"
android:text="=" />
<Button
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:text="." />
</GridLayout>
</RelativeLayout>

Finally, after almost ten hours I'm satisfied.
Now its looks like this
based on #cricket_007 suggestion, my code is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100"
tools:context="android.calcandroid.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20">
<TextView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="0"
android:gravity="bottom|end"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="48sp"
android:background="#e3e7ea"
android:paddingBottom="32dp"
android:padding="16dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80">
<android.support.v7.widget.GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
grid:useDefaultMargins="false"
grid:alignmentMode="alignBounds"
grid:columnCount="7"
grid:rowCount="9">
<!-- Row 1 -->
<Button
android:text="C"
android:background="#drawable/shape"
grid:layout_row="0"
grid:layout_column="0"
style="#style/calcAction"
android:textStyle="bold"
android:textColor="#color/calcAccent"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<ImageButton
android:background="#drawable/shape"
android:src="#android:drawable/ic_input_delete"
grid:layout_row="0"
grid:layout_column="2"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1" />
<Button
android:background="#drawable/shape"
android:text="÷"
grid:layout_row="0"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_column="4"/>
<Button
android:background="#drawable/shape"
android:text="x"
grid:layout_row="0"
grid:layout_column="6"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcAction"/>
<!-- Row 2 -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="1"
grid:layout_column="0"
grid:layout_columnSpan="7"
android:background="#eee"/>
<Button
android:background="#drawable/shape"
android:text="7"
grid:layout_row="2"
grid:layout_column="0"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcNumber"/>
<Button
android:background="#drawable/shape"
android:text="8"
grid:layout_row="2"
grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="9"
grid:layout_row="2"
grid:layout_column="4"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="-"
grid:layout_row="2"
grid:layout_column="6"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<!-- Row 3 -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="3"
grid:layout_column="0"
grid:layout_columnSpan="7"
android:background="#eee"/>
<Button
android:background="#drawable/shape"
android:text="4"
grid:layout_row="4"
grid:layout_column="0"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="5"
grid:layout_row="4"
grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="6"
grid:layout_row="4"
grid:layout_column="4"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="+"
grid:layout_row="4"
grid:layout_column="6"
style="#style/calcAction"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="7"
grid:layout_column="0"
grid:layout_columnSpan="7"
android:background="#eee"/>
<!-- Row 4 -->
<Button
android:background="#drawable/shape"
android:text="1"
grid:layout_row="6"
grid:layout_column="0"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
android:text="2"
grid:layout_row="6"
grid:layout_column="2"
style="#style/calcNumber"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"/>
<Button
android:background="#drawable/shape"
grid:layout_row="6"
grid:layout_column="4"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
android:text="3"
style="#style/calcNumber"/>
<Button
grid:layout_row="6"
grid:layout_column="6"
grid:layout_rowSpan="3"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
android:background="#color/calcAccent"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/primary_material_light"
android:textStyle="bold"
android:textSize="22sp"
android:gravity="center_vertical|center_horizontal"
android:padding="8dp"
android:text="="
style="#style/calcNumber"/>
<!-- Row 5 -->
<Button
android:background="#drawable/shape"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="8"
grid:layout_column="0"
grid:layout_columnSpan="3"
style="#style/calcNumber"
android:text="0"/>
<Button
android:background="#drawable/shape"
grid:layout_row="8"
grid:layout_column="4"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
style="#style/calcNumber"
android:text="."/>
<!-- Horizontal Grid -->
<View
grid:layout_gravity="fill_horizontal"
android:layout_height="1dp"
grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7"
android:background="#eee"/>
</android.support.v7.widget.GridLayout>
</LinearLayout>
</LinearLayout>
Maybe it's a bit messy, but it's fine I think.