Develop Reference

How does layout_weight interact with wrap_content with Buttons in LinearLayout — why am I getting counterintuitive results?

A picture will help understand what I'm talking about:
I have three horizontal LinearLayouts, each of which contains six Buttons:
On the first row, each button has its layout_width set to "0dp" and it's layout_weight set to "1", except for button 4 where it's "2". The result is pretty much exactly what I'd expect.
The second row is identical to the first, except that all of the layout_width values are set to "wrap_content". My expectation was that each button would be assigned a width according to how much space it needs, and then the leftover space would be distributed equally among them, giving extra space to button 4. However, button 4 is actually smaller than its peers. Why is that happening?
In the third row, I deleted all of the weights and left the widths set to "wrap_content". I would have expected that each button would only be as wide as it needs to be, with some blank space at the end of the row. Instead, all of the buttons are actually too wide, and don't even fit on the screen!
Can anybody explain what I'm missing here?
By comparison, the next three rows are identical to the first three, except that Button has been changed to TextView. These rows all look exactly as I would expect.
For reference, the layout.xml file is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".SecondFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="4" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" />
<Button
android:id="#+id/button17"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="1" />
<TextView
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="2" />
<TextView
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="3" />
<TextView
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="4" />
<TextView
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="5" />
<TextView
android:id="#+id/button17"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="6" />
</LinearLayout>
</LinearLayout>

OK, figured it out. Leaving this up in case it helps someone in the future.
Buttons have a minWidth attribute which is 88dp by default. Changing this to zero made everything come out the way it should.

Put buttons with Equal margins on both left and right side in Android

I am new to Android. I want to put 4 buttons horizontally with equal margins with both left and right side as shown in the wire-frame diagram below:
I searched a lot on Google and Stackoverflow also. I tried to set android:layout_weight="1" . But it only sets equal margin from left-side. I want to set it on both sides and on multiple screen layouts. I want to know which layout and properties should be applied for this. I am using in Android studio and mostly used Drag-Drop method for design.
Currently I've XML layout as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/frameLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="10dp"
android:id="#+id/relativeLayout">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="#+id/b3"
android:layout_gravity="left|center_vertical"
android:onClick="buttonThree"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/b5"
android:layout_gravity="left|center_vertical"
android:onClick="buttonFive"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b3"
android:layout_toEndOf="#+id/b3"
android:layout_alignParentRight="false"
android:layout_alignParentLeft="false"
android:layout_weight="1"
android:width="0dp"
android:layout_alignParentBottom="false" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:id="#+id/b7"
android:layout_gravity="left|center_vertical"
android:onClick="buttonSeven"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b5"
android:layout_toEndOf="#+id/b5"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/b9"
android:layout_gravity="left|center_vertical"
android:onClick="buttonNine"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b7"
android:layout_toEndOf="#+id/b7"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
</RelativeLayout>

Layout weight works with LinearLayout, each view in linearlayout will take designeatedweight/weightsum times total width or height.
Move your buttons into linear layout with weight sum to 4. Assigning weight of buttons to 1 will make them take 1/4 th of screen space automatically.
For equal spacing allocating margin to linear layout will make them look equally spaced.
<Button
android:id="#+id/b3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonThree"
android:text="3" />
<Button
android:id="#+id/b5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonFive"
android:text="5" />
<Button
android:id="#+id/b7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonSeven"
android:text="7" />
<Button
android:id="#+id/b9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonNine"
android:text="9" />
</LinearLayout>
Result

that's right to set android:layout_weight="1" ,but only Linearlylayout effective,so you can
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
</LinearLayout>

Try to use LinearLayout
<?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="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:layout_marginLeft="3dp"
android:text="B1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B3"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B4"/>
</LinearLayout>

try out this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
</LinearLayout>
it will look something like this.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
>
<Button android:id="#+id/button1"
...
android:layout_weight="1"/>
<Button android:id="#+id/button2"
...
android:layout_weight="1"/>
<Button
android:id="#+id/button3"
...
android:layout_weight="1"/>

How do I align these buttons in Android?

I want these buttons to be aligned on top of each other. As you can see, since the text in the second row is shorter, the buttons take up a little more space to fill everything up. I'd rather have button 5 directly below and aligned with button 1.
Here's my xml for the layout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp">
<TextView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:text="Start Corner:"
/>
<Button
android:id="#+id/start_corner_btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:layout_weight="15"/>
<Button
android:id="#+id/start_corner_btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_weight="15"/>
<Button
android:id="#+id/start_corner_btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:layout_weight="15"/>
<Button
android:id="#+id/start_corner_btn_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:layout_weight="15"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp">
<TextView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:text="2nd Corner:"
/>
<Button
android:id="#+id/second_corner_btn_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:layout_weight="15"/>
<Button
android:id="#+id/second_corner_btn_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:layout_weight="15"/>
<Button
android:id="#+id/second_corner_btn_7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:layout_weight="15"/>
<Button
android:id="#+id/second_corner_btn_8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:layout_weight="15"/>
</LinearLayout>
As always, I'll bet I am close, but probably missing one thing!

Try TableLayout:
<TableLayout
android:id="#+id/tableBtns"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="15"
android:text="Start Corner:"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="4" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="15"
android:text="2nd Corner:" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="6" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="8" />
</TableRow>
</TableLayout>

you can separate the space with two vertical linearlayouts,
in the left one put your textViews and in the right one put your Buttons

Instead of using "wrap_content" for width, use some fixed value for the textviews. Or, better yet, replace the entire thing with RelativeLayout and align Button 5 to be aligned to the left of Button 1 using android:layout_alignLeft directive.

LinearLayout doesn't fill the window

I have set up 4 linear layouts: 2 vertical ones, side by side and 2 horizontal ones, arranged vertically.
This will give me a total of 3 vertical ones.
Then end goal is to have one layout for multiple screen sizes.
I set the weight of all 4 layouts to "1" to fill evenly.
I have tried to use android:layout_height="wrap_content", but it does not fill the entire background.
If I use android:layout_height="fill_parent", the layouts get clipped.
Here is screenshot of "wrap_content"
Here is screenshot of "fill_parent"
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff606060"
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=".SimpleRGB_Main" >
<LinearLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:text="Scene 1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button3"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button4"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 5" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/relativeLayout1"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_toRightOf="#+id/button1"
android:layout_weight="1"
android:text="Scene 6" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button6"
android:layout_toRightOf="#+id/button2"
android:layout_weight="1"
android:text="Scene7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button7"
android:layout_toRightOf="#+id/button3"
android:layout_weight="1"
android:text="Scene8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button8"
android:layout_toRightOf="#+id/button4"
android:layout_weight="1"
android:text="Scene9" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button9"
android:layout_toRightOf="#+id/button5"
android:layout_weight="1"
android:text="Scene10" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout1"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout3"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD1" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY1" />
</LinearLayout>
Here is what I am trying to attempt. Green is the layouts filled with buttons and or widgets.

Putting layout weights on children of RelativeLayout does not work. Weights only work on LinearLayout (that is, children of linear layout, not linear layout itself). Try starting by making your root layout linear, not RelativeLayout.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:background="#ff606060"
android:weightSum="6"
android:layout_gravity="fill_horizontal|center_vertical"
tools:context=".SimpleRGB_Main" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:weightSum="2"
android:layout_weight="1">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:text="Scene 1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 6" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2">
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 2" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button3"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 7" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button4"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 3" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_toRightOf="#+id/button1"
android:layout_weight="1"
android:text="Scene 8" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button6"
android:layout_toRightOf="#+id/button2"
android:layout_weight="1"
android:text="Scene 4" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button7"
android:layout_toRightOf="#+id/button3"
android:layout_weight="1"
android:text="Scene 9" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2"
android:layout_weight="1">
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button8"
android:layout_toRightOf="#+id/button4"
android:layout_weight="1"
android:text="Scene 5" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button9"
android:layout_toRightOf="#+id/button5"
android:layout_weight="1"
android:text="Scene 10" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD 1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY " />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY 1" />
</TableRow>
</TableLayout>
graphical view

Creating a table with buttons in Android, compatible with both tablet and smartphone

Hi Guys I'd like to create a menu page with buttons like in the picture
http://i.stack.imgur.com/q1Bx7.jpg
I already tried with linear layouts and table layouts, but it wasn't working. Can anyone help me? The buttons should be relative in size so the page is shown correctly on tablets and on smartphones.
Edit: This is my code
<TableLayout
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_weight="0.50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_weight="0.50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button3"
android:layout_weight="0.50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_weight="0.50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>

this is how i did it in my app.. you can reference it. it does what you showed in the image.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:text="1"
android:textColor="#0099CC"
android:textSize="20sp"
android:textStyle="bold" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:text="2"
android:textColor="#0099CC"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginBottom="10sp"
android:layout_marginTop="10dip"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/btn3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:text="3"
android:textColor="#0099CC"
android:textSize="20sp"
android:textStyle="bold" />
<Button
android:id="#+id/btn4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:text="4"
android:textColor="#0099CC"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>