Android GridLayout of Buttons with no gaps - android

What is the trick for removing all gaps between an GridLayout containing buttons?
I'm using XML to define the layout. Here is what it looks like:
And here is the XML:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_margin="0dp"
android:alignmentMode="alignMargins"
android:clipToPadding="false"
android:columnCount="4"
android:fitsSystemWindows="false"
android:layoutMode="clipBounds"
android:orientation="horizontal"
android:padding="0dp"
android:rowCount="3"
android:adjustViewBounds="true"
android:useDefaultMargins="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal|fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:padding="0dp"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:text="3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:text="4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:text="5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:text="6" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_rowSpan="2"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_rowSpan="2"
android:layout_weight="1"
android:text="8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:text="9" />
</GridLayout>


try this in your xml:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal|fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="#ef2c6e"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="#c2afdc"
android:padding="0dp"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="#d2f2f2"
android:text="3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="#c2dfa2"
android:text="4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="#1f9fcd"
android:text="5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="#f251ff"
android:text="6" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_rowSpan="2"
android:layout_weight="1"
android:background="#a2dfaf"
android:text="7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_rowSpan="2"
android:layout_weight="1"
android:background="#daaf2f"
android:text="8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="#f21fa2"
android:text="9" />
Here's the screenshot:


Use a gridview instead of gridLayout and set the properties
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"

Related

Grid layout extra space

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

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

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

how to fix this layout error.buttons not placed properly?

I am having a layout problem.
When the app is opened in Samsung j+ the buttons are not properly placed. Please help.
the problem is explained in the image plz see the image.
here is the xml code:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:gravity="top"
android:id="#+id/relativeLayout">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/editText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:gravity="right" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relativeLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75sp"
android:layout_height="75sp"
android:text="."
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:textSize="25dp"
android:layout_toRightOf="#+id/button3"
android:layout_toLeftOf="#+id/button12"
android:layout_toStartOf="#+id/button12" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="1"
android:id="#+id/button2"
android:layout_above="#+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/button5"
android:textSize="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="2"
android:id="#+id/button3"
android:layout_toEndOf="#+id/button2"
android:layout_toRightOf="#+id/button2"
android:layout_alignTop="#+id/button5"
android:layout_above="#+id/button4"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/button4"
android:layout_below="#+id/button2"
android:layout_alignRight="#+id/button3"
android:layout_alignEnd="#+id/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="3"
android:id="#+id/button5"
android:layout_above="#+id/button"
android:layout_toRightOf="#+id/button4"
android:layout_toEndOf="#+id/button4"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="4"
android:id="#+id/button6"
android:layout_above="#+id/button2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/button7"
android:layout_alignTop="#+id/button6"
android:layout_toRightOf="#+id/button6"
android:layout_toEndOf="#+id/button6"
android:layout_alignBottom="#+id/button6"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="6"
android:id="#+id/button8"
android:layout_above="#+id/button3"
android:layout_toRightOf="#+id/button3"
android:layout_toEndOf="#+id/button3"
android:layout_alignTop="#+id/button7"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="7"
android:id="#+id/button9"
android:layout_above="#+id/button8"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:id="#+id/button10"
android:layout_alignTop="#+id/button9"
android:layout_toRightOf="#+id/button9"
android:layout_above="#+id/button6"
android:layout_alignRight="#+id/button7"
android:layout_alignEnd="#+id/button7"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/button11"
android:layout_above="#+id/button8"
android:layout_toRightOf="#+id/button10"
android:layout_alignTop="#+id/button10"
android:layout_alignRight="#+id/button8"
android:layout_alignEnd="#+id/button8"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/button12"
android:layout_toRightOf="#+id/button5"
android:layout_below="#+id/button8"
android:layout_alignParentBottom="true"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:id="#+id/button13"
android:layout_alignTop="#+id/button11"
android:layout_toRightOf="#+id/button11"
android:layout_alignRight="#+id/button12"
android:layout_alignEnd="#+id/button12"
android:layout_alignBottom="#+id/button8"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="/"
android:id="#+id/button14"
android:layout_above="#+id/button9"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/button10"
android:layout_alignEnd="#+id/button10"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:id="#+id/button15"
android:layout_alignBottom="#+id/button14"
android:layout_alignTop="#+id/button14"
android:layout_alignRight="#+id/button13"
android:layout_alignEnd="#+id/button13"
android:layout_toRightOf="#+id/button11"
android:layout_toEndOf="#+id/button11"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"
android:id="#+id/button16"
android:layout_alignBottom="#+id/button14"
android:layout_alignTop="#+id/button14"
android:layout_toRightOf="#+id/button14"
android:layout_toLeftOf="#+id/button15"
android:layout_toStartOf="#+id/button15"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CLEAR SCREEN"
android:id="#+id/button17"
android:layout_above="#+id/button14"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/button15"
android:layout_alignEnd="#+id/button15" />
</RelativeLayout>

here is a complete responsive xml no matter what device you use it
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:text="CLEAR SCREEN" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="/"
android:textSize="25dp" />
<Button
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="-"
android:textSize="25dp" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="*"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="7"
android:textSize="25dp" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="8"
android:textSize="25dp" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="9"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="4"
android:textSize="25dp" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="5"
android:textSize="25dp" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="6"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="+"
android:id="#+id/button13"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
android:textSize="25dp" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="2"
android:textSize="25dp" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="3"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="0"
android:id="#+id/button4"
android:textSize="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="."
android:id="#+id/button"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="="
android:id="#+id/button12"
android:layout_toRightOf="#+id/button5"
android:layout_below="#+id/button8"
android:layout_alignParentBottom="true"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Android - Improve Layout view hierarchy

I want to have this layout structure:
I achieved this with many nested LinearLayouts and nested weights, but I can see that this is really bad for performance. Has anyone an idea how to get such an layout?
I should also say, that it should be above the whole screen.

You can create the layout like this using table layout.
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="4"
android:orientation="horizontal"
android:rowCount="8" >
<Button
android:layout_columnSpan="4"
android:layout_gravity="fill"
android:text="1" />
<Button
android:layout_columnSpan="4"
android:layout_gravity="fill"
android:text="2" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<LinearLayout
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="4"
android:layout_rowSpan="5"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="side"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="side"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="side"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="side"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="side"/>
</LinearLayout>
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
<Button
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:text="3" />
</GridLayout>
If you have any comment it. I am glad to answer you.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEXTVIEW"
android:layout_marginTop="10dip"
android:gravity="center"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="10dip"
android:text="TEXTVIEW" />
<GridView
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="50dp"
android:horizontalSpacing="40dp"
android:numColumns="4"
android:verticalSpacing="10dp"
android:visibility="visible" />
</LinearLayout>

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:

How to align buttons in Android

I want to create buttons for each "letter" A to Z. Whatever I do I can't align some of them abreast. I cant add more than 2 rows and 6 buttons for each row even though there is space on the right. How can I create buttons A to Z?
http://postimg.org/image/5h4wyfuj5/
<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: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="com.kelimeoyunu.Kelime" >
<TextView
android:id="#+id/kelime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="26dp"
android:layout_toRightOf="#+id/button1"
android:text="test" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/kelime"
android:layout_marginLeft="24dp"
android:layout_marginTop="81dp"
android:background="#layout/mybutton"
android:gravity="center"
android:text="A"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:gravity="center"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_toRightOf="#+id/button2"
android:background="#layout/mybutton"
android:text="B"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:gravity="center"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBaseline="#+id/button4"
android:layout_alignBottom="#+id/button4"
android:layout_toRightOf="#+id/button4"
android:background="#layout/mybutton"
android:text="C"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button01"
style="?android:attr/buttonStyleSmall"
android:gravity="center"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBaseline="#+id/button3"
android:layout_alignBottom="#+id/button3"
android:layout_toRightOf="#+id/button3"
android:background="#layout/mybutton"
android:text="Ç"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button02"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBaseline="#+id/Button01"
android:layout_alignBottom="#+id/Button01"
android:layout_toRightOf="#+id/Button01"
android:background="#layout/mybutton"
android:gravity="center"
android:text="D"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button03"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBaseline="#+id/Button02"
android:layout_alignBottom="#+id/Button02"
android:layout_toRightOf="#+id/Button02"
android:background="#layout/mybutton"
android:gravity="center"
android:text="E"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button06"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_below="#+id/button4"
android:layout_toLeftOf="#+id/button3"
android:background="#layout/mybutton"
android:gravity="center"
android:text="Ç"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button04"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_below="#+id/button2"
android:layout_toLeftOf="#+id/button4"
android:background="#layout/mybutton"
android:gravity="center"
android:text="Ç"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button05"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_below="#+id/button4"
android:layout_toRightOf="#+id/button4"
android:background="#layout/mybutton"
android:gravity="center"
android:text="Ç"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button07"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_below="#+id/Button01"
android:layout_toLeftOf="#+id/Button02"
android:background="#layout/mybutton"
android:gravity="center"
android:text="Ç"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/Button07"
android:layout_alignBottom="#+id/Button07"
android:layout_toRightOf="#+id/Button01"
android:text="Button" />
<Button
android:id="#+id/Button09"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_below="#+id/Button02"
android:layout_toRightOf="#+id/Button02"
android:background="#layout/mybutton"
android:gravity="center"
android:text="Ç"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button08"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_below="#+id/Button01"
android:layout_toRightOf="#+id/Button01"
android:background="#layout/mybutton"
android:gravity="center"
android:text="Ç"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button10"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBaseline="#+id/Button11"
android:layout_alignBottom="#+id/Button11"
android:layout_toRightOf="#+id/Button11"
android:background="#layout/mybutton"
android:gravity="center"
android:text="E"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button12"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#layout/mybutton"
android:gravity="center"
android:text="E"
android:textColor="#ffffff"
android:textSize="17sp" />
<Button
android:id="#+id/Button11"
style="?android:attr/buttonStyleSmall"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignLeft="#+id/Button04"
android:layout_below="#+id/Button04"
android:background="#layout/mybutton"
android:gravity="center"
android:text="E"
android:textColor="#ffffff"
android:textSize="17sp" />
</RelativeLayout>

I'm not exactly sure what is the problem. The way i see it, i would have tried with two horizontal LinearLayouts inside a vertical LinearLayout. Something like this, you just have to give it a proper margin:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
EDIT WITH PIC:

I would put the buttons in a grid layout, thats what its for. As far as I know, for centering it you have to wrap it all in a relativelayout, so in the end its like
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/holder"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<GridLayout
android:id="#+id/grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:columnCount="6"
android:rowCount="2" >
<Button
android:id="#+id/button0"
android:layout_column="0"
android:layout_row="0"
android:text="Button" />
<Button
android:id="#+id/button1"
android:layout_column="1"
android:layout_row="0"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_column="2"
android:layout_row="0"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_column="3"
android:layout_row="0"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_column="4"
android:layout_row="0"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_column="5"
android:layout_row="0"
android:text="Button" />
<Button
android:id="#+id/button6"
android:layout_column="0"
android:layout_row="1"
android:text="Button" />
<Button
android:id="#+id/button7"
android:layout_column="1"
android:layout_row="1"
android:text="Button" />
<Button
android:id="#+id/button8"
android:layout_column="2"
android:layout_row="1"
android:text="Button" />
<Button
android:id="#+id/button9"
android:layout_column="3"
android:layout_row="1"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_column="4"
android:layout_row="1"
android:text="Button" />
<Button
android:id="#+id/button11"
android:layout_column="5"
android:layout_row="1"
android:text="Button" />
</GridLayout>
</RelativeLayout>

You should use gridlayout to get the same space between them.
Example:
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:columnCount="4"
android:rowCount="5">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:clickable="true"
android:foreground="?selectableItemBackground"
android:stateListAnimator="#anim/raise"
card_view:cardBackgroundColor="#color/md_red_400"
card_view:cardCornerRadius="4dp">
<TextView
android:id="#+id/textView1"
android:layout_width="80dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:text="Red"
android:textColor="#color/md_text_white" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_marginLeft="24dp"
android:layout_row="1"
android:clickable="true"
android:foreground="?selectableItemBackground"
android:stateListAnimator="#anim/raise"
card_view:cardBackgroundColor="#color/md_blue_400"
card_view:cardCornerRadius="4dp">
<TextView
android:id="#+id/textView2"
android:layout_width="80dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:text="Blue"
android:textColor="#color/md_text_white" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginTop="24dp"
android:layout_row="2"
android:clickable="true"
android:foreground="?selectableItemBackground"
android:stateListAnimator="#anim/raise"
card_view:cardBackgroundColor="#color/md_green_400"
card_view:cardCornerRadius="4dp">
<TextView
android:id="#+id/textView3"
android:layout_width="80dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:text="Green"
android:textColor="#color/md_text_white" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_marginLeft="24dp"
android:layout_marginTop="24dp"
android:layout_row="2"
android:clickable="true"
android:foreground="?selectableItemBackground"
android:stateListAnimator="#anim/raise"
card_view:cardBackgroundColor="#color/md_orange_400"
card_view:cardCornerRadius="4dp">
<TextView
android:id="#+id/textView4"
android:layout_width="80dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:text="Orange"
android:textColor="#color/md_text_white" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginTop="24dp"
android:layout_row="3"
android:clickable="true"
android:foreground="?selectableItemBackground"
android:stateListAnimator="#anim/raise"
card_view:cardBackgroundColor="#color/md_pink_400"
card_view:cardCornerRadius="4dp">
<TextView
android:id="#+id/textView5"
android:layout_width="80dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:text="Pink"
android:textColor="#color/md_text_white" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_marginLeft="24dp"
android:layout_marginTop="24dp"
android:layout_row="3"
android:clickable="true"
android:foreground="?selectableItemBackground"
android:stateListAnimator="#anim/raise"
card_view:cardBackgroundColor="#color/md_indigo_400"
card_view:cardCornerRadius="4dp">
<TextView
android:id="#+id/textView6"
android:layout_width="80dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:text="Indigo"
android:textColor="#color/md_text_white" />
</android.support.v7.widget.CardView>
<Space
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_column="1"
android:layout_row="4" />
<Space
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_column="3"
android:layout_row="1" />
</GridLayout>
Six color cards:

Categories

Resources