Develop Reference

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.

Maximize the button in a gridlayout

I have an activity:
<?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:rowCount="4"
app:columncount="4">
<Button
android:text="1"
android:id="#+id/button1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_column="0""/>
<Button
android:text="2"
android:id="#+id/button2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_column="1"/>
<Button
android:text="3"
android:id="#+id/button3"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_column="2"/>
<Button
android:text="4"
android:id="#+id/button5"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_column="0"/>
<Button
android:text="5"
android:id="#+id/button6"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_column="1"/>
<Button
android:text="6"
android:id="#+id/button7"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_column="2"/>
<Button
android:text="7"
android:id="#+id/button8"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="2"
app:layout_column="0"/>
<Button
android:text="8"
android:id="#+id/button9"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="2"
app:layout_column="1"/>
<Button
android:text="9"
android:id="#+id/button4"
app:layout_gravity="fill"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_column="2"
/>
which looks like this:
I would like to change the button 1, so that it would be stratched vertically and 4 and 7 must be minimized to wrap_contnet (made in photoshop)
What is the best way to do this?
More specifically, I need to make this:
I made this by using custom width, but I don't know how to make this using layouts:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
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"
xmlns:grid="http://schemas.android.com/apk/res-auto"
tools:context="com.example.win72.myapplication.MainActivity"
grid:columnCount="3"
grid:rowCount="3">
<TextView
grid:layout_gravity="fill"
grid:layout_columnWeight="1"
grid:layout_rowWeight="10"
grid:layout_row="0"
grid:layout_column="0"
grid:layout_rowSpan="2"
android:textSize="60sp"
android:background="#a49595"
android:text="90"
android:id="#+id/textView"
android:clickable="true"
android:layout_height="457dp"/>
<TextView
grid:layout_gravity="fill"
grid:layout_columnWeight="1"
grid:layout_rowWeight="10"
grid:layout_row="0"
grid:layout_column="2"
grid:layout_rowSpan="2"
android:textSize="60sp"
android:background="#a49595"
android:text="90"
android:id="#+id/textView2"/>
<TextView
grid:layout_row="2"
grid:layout_column="0"
grid:layout_gravity="fill_horizontal"
grid:layout_columnWeight="1"
android:gravity="center"
android:textSize="30sp"
android:text="4"
android:id="#+id/textView3"/>
<TextView
grid:layout_row="2"
grid:layout_column="2"
grid:layout_gravity="fill_horizontal"
android:text="6"
android:id="#+id/textView4"
android:gravity="center"
android:textSize="30sp"
/>
<Button
grid:layout_row="0"
grid:layout_column="1"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:text="Reset"
android:id="#+id/button"/>
<Button
grid:layout_row="1"
grid:layout_column="1"
grid:columnweight="1"
grid:layout_gravity="fill_horizontal"
android:text="Next"
android:id="#+id/button2"
/>

Using staggeredgridlayout you can achieve that.

I found that making dynamic count of rows/columns and using rowspan can make this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
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"
xmlns:grid="http://schemas.android.com/apk/res-auto"
tools:context="com.example.win72.myapplication.MainActivity">
<TextView
grid:layout_gravity="fill"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="0"
grid:layout_column="0"
grid:layout_rowSpan="3"
android:textSize="60sp"
android:background="#a49595"
android:text="90"
android:id="#+id/textView"
android:clickable="true"
/>
<TextView
grid:layout_gravity="fill"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="0"
grid:layout_column="2"
grid:layout_rowSpan="3"
android:textSize="60sp"
android:background="#a49595"
android:text="90"
android:id="#+id/textView2"/>
<TextView
grid:layout_row="3"
grid:layout_column="0"
grid:layout_gravity="fill_horizontal"
grid:layout_columnWeight="1"
android:gravity="center"
android:textSize="30sp"
android:text="4"
android:id="#+id/textView3"/>
<TextView
grid:layout_row="3"
grid:layout_column="2"
grid:layout_gravity="fill_horizontal"
android:text="6"
android:id="#+id/textView4"
android:gravity="center"
android:textSize="30sp"
/>
<Button
grid:layout_row="0"
grid:layout_column="1"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:text="Reset"
android:id="#+id/button"/>
<Button
grid:layout_row="1"
grid:layout_column="1"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:text="Next"
android:id="#+id/button2"
/>
Thanks a let for help!

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>
`

How to layout my android application?

I am writing a math application for my daughter. It shall consist of upper row with assignment to solve, some progress bar and then keypad on left and function pad on right. This is my idea:
I started with a linear layout holding set of linear layouts. Android studio argues that nested weights have bad performance. And I failed to have 4 rows of keypad besides 5 rows of functions. This is my current progress:
Then I used a table layout but it does not have row span. So I switched to a relative layout, but I failed to distribute rows evenly. The last attempt was grid layout, but again I cannot distribute the rows evenly.
Any idea, how to achieve my goal?
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" tools:context=".CalcActivity"
android:columnCount="5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:useDefaultMargins="true"
android:orientation="horizontal">
<TextView
android:layout_gravity="fill_horizontal|center_vertical"
android:text="1"
android:id="#+id/firstOperand"
style="#style/KeypadButton"
android:layout_column="0"
android:layout_row="0" />
<TextView
android:text="+"
android:id="#+id/operator"
style="#style/KeypadFunctionButton"
android:layout_column="1"
android:layout_row="0"
android:layout_gravity="fill_horizontal|center_vertical"
/>
<TextView
android:text="1"
android:id="#+id/secondOperand"
style="#style/KeypadButton"
android:layout_column="2"
android:layout_row="0"
android:layout_gravity="fill_horizontal|center_vertical"
/>
<TextView
android:text="="
android:id="#+id/equalView"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadFunctionButton"
android:layout_column="3"
android:layout_row="0" />
<TextView
android:text="2"
android:id="#+id/resultView"
style="#style/KeypadButton"
android:layout_column="4"
android:layout_row="0"
android:layout_gravity="fill_horizontal|center_vertical"
/>
<SeekBar
android:id="#+id/seekBar"
android:layout_gravity="fill_horizontal|center_vertical"
android:onClick=""
android:layout_row="1"
android:layout_columnSpan="4"
android:layout_column="0" />
<ImageView
android:id="#+id/progressImage"
android:layout_gravity="fill_horizontal|center_vertical"
android:src="#drawable/ic_action_cat"
android:layout_row="1"
android:layout_column="4" />
<LinearLayout
android:layout_gravity="fill_horizontal|center_vertical"
android:orientation="vertical"
android:layout_row="2"
android:layout_rowSpan="4"
android:layout_column="4">
<Button
android:text="←"
android:id="#+id/buttonBackspace"
style="#style/KeypadFunctionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="+"
android:id="#+id/buttonPlus"
style="#style/KeypadFunctionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="-"
android:id="#+id/buttonMinus"
style="#style/KeypadFunctionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="*"
android:id="#+id/buttonMultiply"
style="#style/KeypadFunctionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="/"
android:id="#+id/buttonDivide"
style="#style/KeypadFunctionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:text="7"
android:id="#+id/digit7"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_row="2"
android:layout_column="0" />
<Button
android:text="8"
android:id="#+id/digit8"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_column="1"
android:layout_row="2" />
<Button
android:text="9"
android:id="#+id/digit9"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_column="2"
android:layout_row="2" />
<Button
android:text="4"
android:id="#+id/digit4"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_row="3"
android:layout_column="0" />
<Button
android:text="5"
android:id="#+id/digit5"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_column="1"
android:layout_row="3" />
<Button
android:text="6"
android:id="#+id/digit6"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_column="2"
android:layout_row="3" />
<Button
android:text="1"
android:id="#+id/digit1"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_row="4"
android:layout_column="0" />
<Button
android:text="2"
android:id="#+id/digit2"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_column="1"
android:layout_row="4" />
<Button
android:text="3"
android:id="#+id/digit3"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_column="2"
android:layout_row="4" />
<Button
android:text=","
android:id="#+id/buttonComma"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_row="5"
android:layout_column="0" />
<Button
android:text="0"
android:id="#+id/digit0"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadButton"
android:layout_column="1"
android:layout_row="5" />
<Button
android:text="="
android:id="#+id/buttonResult"
android:layout_gravity="fill_horizontal|center_vertical"
style="#style/KeypadFunctionButton"
android:layout_column="2"
android:layout_row="5" />
</GridLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" tools:context=".CalcActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:text="1"
android:id="#+id/firstOperand"
style="#style/KeypadButton" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/firstOperand"
android:text="+"
android:id="#+id/operator"
style="#style/KeypadFunctionButton" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/operator"
android:text="1"
android:id="#+id/secondOperand"
style="#style/KeypadButton" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/secondOperand"
android:text="="
android:id="#+id/equalView"
style="#style/KeypadFunctionButton" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/equalView"
android:text="2"
android:id="#+id/resultView"
style="#style/KeypadButton" />
<SeekBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/firstOperand"
android:id="#+id/seekBar"
android:layout_gravity="center_vertical"
android:onClick=""
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/firstOperand"
android:layout_toRightOf="#id/seekBar"
android:id="#+id/progressImage"
android:src="#drawable/ic_action_cat"
android:layout_gravity="center"
android:layout_alignParentRight="true" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/progressImage"
android:layout_alignParentRight="true"
android:text="←"
android:id="#+id/buttonBackspace"
style="#style/KeypadFunctionButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/seekBar"
android:text="7"
android:id="#+id/digit7"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/seekBar"
android:layout_toRightOf="#id/digit7"
android:text="8"
android:id="#+id/digit8"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/seekBar"
android:layout_toRightOf="#id/digit8"
android:text="9"
android:id="#+id/digit9"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/buttonBackspace"
android:text="+"
android:id="#+id/buttonPlus"
style="#style/KeypadFunctionButton"
android:layout_alignParentRight="true" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit7"
android:text="4"
android:id="#+id/digit4"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit7"
android:layout_toRightOf="#id/digit4"
android:text="5"
android:id="#+id/digit5"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit7"
android:layout_toRightOf="#id/digit5"
android:text="6"
android:id="#+id/digit6"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/buttonPlus"
android:text="-"
android:id="#+id/buttonMinus"
style="#style/KeypadFunctionButton"
android:layout_alignParentRight="true" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit4"
android:text="1"
android:id="#+id/digit1"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit4"
android:layout_toRightOf="#id/digit1"
android:text="2"
android:id="#+id/digit2"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit4"
android:layout_toRightOf="#id/digit2"
android:text="3"
android:id="#+id/digit3"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/buttonMinus"
android:text="*"
android:id="#+id/buttonMultiply"
style="#style/KeypadFunctionButton"
android:layout_alignParentRight="true" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text=","
android:id="#+id/buttonComma"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit1"
android:layout_toRightOf="#id/buttonComma"
android:text="0"
android:id="#+id/digit0"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/digit1"
android:layout_toRightOf="#id/digit0"
android:text="="
android:id="#+id/buttonResult"
style="#style/KeypadFunctionButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/buttonMultiply"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="/"
android:id="#+id/buttonDivide"
style="#style/KeypadFunctionButton" />
</RelativeLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" tools:context=".CalcActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/assignment">
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="50"
android:id="#+id/textView"
style="#style/KeypadButton" />
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="+"
android:id="#+id/textView2"
style="#style/KeypadFunctionButton" />
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="51"
android:id="#+id/textView3"
style="#style/KeypadButton" />
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="="
android:id="#+id/textView4"
style="#style/KeypadFunctionButton" />
<TextView
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="101"
android:id="#+id/textView5"
style="#style/KeypadButton" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4">
<SeekBar
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/seekBar"
android:layout_weight="3" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressImage"
android:src="#drawable/ic_action_cat"
android:layout_gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6">
<Space
android:layout_width="0dp"
android:layout_height="20px"
android:layout_weight="3"
/>
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="←"
android:id="#+id/button"
style="#style/KeypadFunctionButton" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/upperDigits">
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="7"
android:id="#+id/button2"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="8"
android:id="#+id/button3"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="9"
android:id="#+id/button4"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="+"
android:id="#+id/button5"
style="#style/KeypadFunctionButton" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/middleDigits">
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="4"
android:id="#+id/button6"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="5"
android:id="#+id/button7"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="6"
android:id="#+id/button8"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="-"
android:id="#+id/button9"
style="#style/KeypadFunctionButton" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/lowDigits">
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="1"
android:id="#+id/button10"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="2"
android:id="#+id/button11"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="3"
android:id="#+id/button12"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="*"
android:id="#+id/button13"
style="#style/KeypadFunctionButton" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/bottomDigits">
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text=","
android:id="#+id/button14"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="0"
android:id="#+id/button15"
style="#style/KeypadButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="="
android:id="#+id/button16"
style="#style/KeypadFunctionButton" />
<Button
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="/"
android:id="#+id/button17"
style="#style/KeypadFunctionButton" />
</LinearLayout>
</LinearLayout>
EDIT: both my and chiru's attempts with a relative layout ends with expanded progress bar section taking all available space.

Look like i almost did what you want using LinearLayout. Take a look of screenshot bro.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".CalcActivity" >
<LinearLayout
android:id="#+id/keyboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/seekbar"
android:layout_alignParentBottom="true"
android:layout_marginBottom="25dp"
android:orientation="horizontal"
android:weightSum="2" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="9" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="8" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="7" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="6" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="5" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="4" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="3" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="2" />
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="," />
<Button
android:id="#+id/button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="0" />
<Button
android:id="#+id/button17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
android:text="=" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="←" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/" />
<Button
android:id="#+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/assignment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:orientation="horizontal"
android:weightSum="5" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="50"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="+"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="51"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="="
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="101"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:id="#+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/assignment"
android:layout_below="#+id/assignment"
android:layout_marginTop="32dp"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seekBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="3" />
<ImageView
android:id="#+id/progressImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
As i don't have those styles, i have been forced to remove it.
edited screenshot:

4 rows of Buttons in LinearLayout fill screen width

I have a vertical LinearLayout with four horizontal LinearLayouts. Each horizontal layout contains 4 Buttons. I want the Buttons in each horizontal LinearLayout to fill the screen width evenly. Currently it looks like this:
The first Button of each row takes up all the width and the other 3 Buttons per row are not visible. Does anyone know how I can fix this?
<LinearLayout
android:id = "#+id/ll_screen_bttns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight = "1">
<Button
android:id="#+id/button0"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"/
/>
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight = "1">
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button5"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button6"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button7"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight = "1">
<Button
android:id="#+id/button8"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button9"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button10"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button11"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight = "1">
<Button
android:id="#+id/button12"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button13"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button14"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button15"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
</LinearLayout>
</LinearLayout>

Abstract XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="#dimen/size"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="#dimen/size"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="#dimen/size"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="#dimen/size"
android:layout_weight="1" />
</LinearLayout>
.
.
.
</LinearLayout>