Understanding "layout_weight" in Android

I want to use tables in my applications design however unlike HTML in Android's XML layouts you are unable to set the width of something using a percent. From looking on Google it seems like I can use "layout_weight" for the same functionality as long as the values add up to 100.With information from this question(http://stackoverflow.com/questions/3629331/android-trying-to-understand-androidlayout-weight) I wrote my layout and it seemed to work fine.

Here is what it looks like & the XML file: http://i.imgur.com/rCjKk.png

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent">

    <TableLayout 
        android:id="@+id/tableLayout1" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">

            <TableRow 
                android:id="@+id/tablerow1"
                android:layout_width="fill_parent" 
                android:layout_height="0px" 
                android:layout_weight="10">     
            </TableRow>

            <TableRow 
                android:id="@+id/tablerow2"
                android:layout_width="fill_parent" 
                android:layout_height="0px" 
                android:layout_weight="80">
            </TableRow>

            <TableRow 
                android:id="@+id/tablerow3"
                android:layout_width="fill_parent" 
                android:layout_height="0px"
                android:layout_weight="10">

                    <TableRow
                        android:id="@+id/tablerow4"
                        android:layout_width="wrap_content" 
                        android:layout_height="fill_parent" 
                        android:layout_weight="50">
                    </TableRow>

                    <TableRow
                        android:id="@+id/tablerow5"
                        android:layout_width="wrap_content" 
                        android:layout_height="fill_parent" 
                        android:layout_weight="50">     
                    </TableRow>                         

            </TableRow>

</TableLayout>  

</LinearLayout>

However when I add buttons to this layout it breaks as seen here: http://i.imgur.com/sKxbv.png

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent">

    <TableLayout 
        android:id="@+id/tableLayout1" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">

            <TableRow 
                android:id="@+id/tablerow1"
                android:layout_width="fill_parent" 
                android:layout_height="0px" 
                android:layout_weight="10">     
            </TableRow>

            <TableRow 
                android:id="@+id/tablerow2"
                android:layo开发者_如何学Pythonut_width="fill_parent" 
                android:layout_height="0px" 
                android:layout_weight="80">
            </TableRow>

            <TableRow 
                android:id="@+id/tablerow3"
                android:layout_width="fill_parent" 
                android:layout_height="0px"
                android:layout_weight="10">

                    <TableRow
                        android:id="@+id/tablerow4"
                        android:layout_width="wrap_content" 
                        android:layout_height="fill_parent" 
                        android:layout_weight="50">

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent" 
                                android:layout_height="fill_parent"                                                                     
                                android:text="Speak">
                            </Button>

                    </TableRow>

                    <TableRow
                        android:id="@+id/tablerow5"
                        android:layout_width="wrap_content" 
                        android:layout_height="fill_parent" 
                        android:layout_weight="50">

                            <Button
                                android:id="@+id/button2"
                                android:layout_width="fill_parent" 
                                android:layout_height="fill_parent"                                 
                                android:text="Listen">
                            </Button>

                    </TableRow>                         

            </TableRow>

</TableLayout>  

</LinearLayout>

Can anyone explain to me why this is? I simply want three rows at 10%, 80%, and 10%, and then two taking up 50% of the width of the final row.

I have literally no idea with why that doesn't work for a TableLayout, I tried a lot and couldn't get it to work. However, it works okay with `LinearLayouts, so if you can live with them:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent" android:layout_weight="1" android:layout_height="0dp"></LinearLayout>
<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="8"></LinearLayout>
<LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="match_parent" android:layout_weight="1" android:layout_height="0dp">
    <Button
        android:text="Button"
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_weight="1"></Button>
    <Button
        android:text="Button"
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_weight="1"></Button>
</LinearLayout>

If I understand correctly, the issue is that the buttons are pushing up the parent?

If so, try android:layout_height="wrap_content" instead on your buttons.

The reason this doesn't work is that you're trying to give the TableRow size, which is then added to the size of the content inside. What you should be doing with a TableLayout is let the Content Views control the size. Your issue is that you need something that allows horizontal sharing of space for the buttons, independent of the weighting for the height.

In actual fact a TableRow is simply a horizontal LinearLayout, so having two TableRows inside the bottom TableRow is superfluous, just replace it with a single LinearLayout.

Without knowing what content you were going to have in the top 2 rows its hard to say what's best, but a TableLayout probably isn't the most appropriate for what you want.