Understanding "layout_weight" in Android

Question

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: https://i.stack.imgur.com/QwkcA.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: https://i.stack.imgur.com/95jEn.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">

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

do you just want the buttons at the bottom, or must they specifically be 10pc of the entire screen? — Alex Curran, Jul 27 '11 at 15:37

score 2 · Accepted Answer · answered Jul 27 '11 at 15:49

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>

score 0 · Answer 2 · answered Dec 13 '13 at 17:07

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.

score 0 · Answer 3 · answered Jul 27 '11 at 15:33

0

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.

answered Jul 27 '11 at 15:33

Zack Marrapese

12,072
9
51
69

Yep that is the problem. when I do android:layout_height="wrap_content" it does make the buttons the right size, but the bottom row is still the same size as in my second picture with the buttons hanging from the top. – Peter-W Jul 27 '11 at 15:35

Understanding "layout_weight" in Android

3 Answers3