Messing up with a calculator using a GridLayout - android

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.

Related

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.

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:

My android layout changes each time i chose a different device in emulator even if they have approximately same size?

Here is my xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="15dp"
android:paddingRight="15dp"
tools:context=".MainActivity" >
<TextView
android:id="#+id/ResultText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:textSize="20sp"
android:layout_marginTop="5dp"
android:background="#EEEEEE" />
<TextView
android:id="#+id/InputText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/ResultText"
android:layout_below="#+id/ResultText"
android:background="#BBBBBB"
android:gravity="right"
android:textColor="#FFFFFF"
android:layout_marginTop="4dp"
android:textSize="15sp" />
<Button
android:id="#+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button1"
android:layout_below="#+id/button1"
android:text="5" />
<Button
android:id="#+id/button7"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button3"
android:layout_alignTop="#+id/button6"
android:text="7" />
<Button
android:id="#+id/button8"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button4"
android:layout_alignTop="#+id/button7"
android:text="8" />
<Button
android:id="#+id/button9"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button5"
android:layout_below="#+id/button5"
android:text="9" />
<Button
android:id="#+id/buttonMultiply"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/buttonDivide"
android:text="x" />
<Button
android:id="#+id/buttonSubtract"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonAdd"
android:layout_alignBottom="#+id/buttonAdd"
android:layout_alignParentRight="true"
android:text="-" />
<Button
android:id="#+id/buttonDivide"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button8"
android:layout_alignBottom="#+id/button8"
android:layout_alignLeft="#+id/buttonAdd"
android:text="/" />
<Button
android:id="#+id/buttonAdd"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button4"
android:layout_alignBottom="#+id/button4"
android:layout_toLeftOf="#+id/buttonSubtract"
android:text="+" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button8"
android:layout_toLeftOf="#+id/buttonDivide"
android:text="4" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button7"
android:layout_toLeftOf="#+id/button8"
android:text="3" />
<Button
android:id="#+id/buttonDot"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button0"
android:layout_alignBottom="#+id/button0"
android:layout_alignLeft="#+id/button7"
android:text="." />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button3"
android:layout_alignBottom="#+id/button3"
android:layout_toLeftOf="#+id/button3"
android:text="2" />
<Button
android:id="#+id/button6"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button0"
android:layout_toLeftOf="#+id/button7"
android:text="6" />
<Button
android:id="#+id/button0"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button9"
android:layout_alignBottom="#+id/button9"
android:layout_alignLeft="#+id/button6"
android:text="0" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/InputText"
android:layout_marginTop="26dp"
android:layout_toLeftOf="#+id/button2"
android:text="1" />
<Button
android:id="#+id/buttonEqual"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonDot"
android:layout_alignBottom="#+id/buttonDot"
android:layout_alignRight="#+id/buttonMultiply"
android:layout_toRightOf="#+id/button8"
android:text="=" />
<Button
android:id="#+id/buttonDel"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/buttonDot"
android:layout_toRightOf="#+id/buttonDot"
android:text="del" />
<Button
android:id="#+id/buttonSin"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button9"
android:layout_below="#+id/button9"
android:text="sin" />
<Button
android:id="#+id/buttonCos"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button0"
android:layout_alignTop="#+id/buttonSin"
android:text="cos" />
<Button
android:id="#+id/buttonTan"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonDot"
android:layout_alignTop="#+id/buttonCos"
android:text="tan" />
<Button
android:id="#+id/buttonCot"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/buttonSec"
android:text="cot" />
<Button
android:id="#+id/buttonSec"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonCosec"
android:layout_alignBottom="#+id/buttonCosec"
android:layout_toLeftOf="#+id/buttonCot"
android:text="sec" />
<Button
android:id="#+id/buttonCosec"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonTan"
android:layout_alignBottom="#+id/buttonTan"
android:layout_toLeftOf="#+id/buttonSec"
android:layout_marginLeft="1dp"
android:text="csec" />
<Button
android:id="#+id/buttonPow"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonSin"
android:layout_below="#+id/buttonSin"
android:layout_alignRight="#+id/buttonSin"
android:gravity="left"
android:textSize="10sp"
android:text="yX" />
<Button
android:id="#+id/buttonLog10"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/buttonPow"
android:layout_toRightOf="#+id/buttonPow"
android:text="log" />
<Button
android:id="#+id/buttonLoge"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonLog10"
android:layout_alignBottom="#+id/buttonLog10"
android:layout_toRightOf="#+id/buttonLog10"
android:text="ln" />
<Button
android:id="#+id/buttonSquare"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/buttonLoge"
android:layout_toRightOf="#+id/buttonLoge"
android:text="sqr" />
<Button
android:id="#+id/buttonSqrt"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/buttonSquare"
android:layout_toRightOf="#+id/buttonSquare"
android:text="sqrt" />
<Button
android:id="#+id/buttonFactorial"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/buttonSqrt"
android:text="x!" />
<Button
android:id="#+id/buttonSinh"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonPow"
android:layout_below="#+id/buttonPow"
android:layout_toLeftOf="#+id/buttonLoge"
android:text="sinh" />
<Button
android:id="#+id/buttonCosh"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonSinh"
android:layout_alignBottom="#+id/buttonSinh"
android:layout_alignLeft="#+id/buttonLoge"
android:layout_toLeftOf="#+id/buttonSqrt"
android:text="cosh" />
<Button
android:id="#+id/buttonTanh"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonSqrt"
android:layout_alignRight="#+id/buttonFactorial"
android:layout_alignTop="#+id/buttonCosh"
android:text="tanh" />
</RelativeLayout>
here are some screen shots:
As you can see the left portion is not filled completely it is on a 4.65 inch xhdpi screen
On a 4 inch hdpi screen its perfect covering full width and full height

Basically, what Ben Pearson suggested, you can use TableLayout and several TableRow layouts. For example, a single row layout XML might look like this:
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/button6"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="6" />
<Button
android:id="#+id/button7"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/button8"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/buttonDivide"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="/" />
<Button
android:id="#+id/buttonMultiply"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="x" />
</TableRow>
Note that since TableRow is a subclass of LinearLayout, it understands the layout_weight attribute on its children. Set the layout_width to 0dp and layout_weight to 1 on each button (or 2, for some buttons).

Categories

Resources