title: Understanding "layout_weight" in Android
body: <p>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.</p>
  
  <p>Here is what it looks like &amp; the XML file: <a href="http://i.imgur.com/rCjKk.png" rel="nofollow">http://i.imgur.com/rCjKk.png</a></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:orientation="vertical" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent"&gt;
  
      &lt;TableLayout 
          android:id="@+id/tableLayout1" 
          android:layout_width="fill_parent" 
          android:layout_height="fill_parent"&gt;
  
              &lt;TableRow 
                  android:id="@+id/tablerow1"
                  android:layout_width="fill_parent" 
                  android:layout_height="0px" 
                  android:layout_weight="10"&gt;     
              &lt;/TableRow&gt;
  
              &lt;TableRow 
                  android:id="@+id/tablerow2"
                  android:layout_width="fill_parent" 
                  android:layout_height="0px" 
                  android:layout_weight="80"&gt;
              &lt;/TableRow&gt;
  
              &lt;TableRow 
                  android:id="@+id/tablerow3"
                  android:layout_width="fill_parent" 
                  android:layout_height="0px"
                  android:layout_weight="10"&gt;
  
                      &lt;TableRow
                          android:id="@+id/tablerow4"
                          android:layout_width="wrap_content" 
                          android:layout_height="fill_parent" 
                          android:layout_weight="50"&gt;
                      &lt;/TableRow&gt;
  
                      &lt;TableRow
                          android:id="@+id/tablerow5"
                          android:layout_width="wrap_content" 
                          android:layout_height="fill_parent" 
                          android:layout_weight="50"&gt;     
                      &lt;/TableRow&gt;                         
  
              &lt;/TableRow&gt;
  
  &lt;/TableLayout&gt;  
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>However when I add buttons to this layout it breaks as seen here: <a href="http://i.imgur.com/sKxbv.png" rel="nofollow">http://i.imgur.com/sKxbv.png</a></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:orientation="vertical" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent"&gt;
  
      &lt;TableLayout 
          android:id="@+id/tableLayout1" 
          android:layout_width="fill_parent" 
          android:layout_height="fill_parent"&gt;
  
              &lt;TableRow 
                  android:id="@+id/tablerow1"
                  android:layout_width="fill_parent" 
                  android:layout_height="0px" 
                  android:layout_weight="10"&gt;     
              &lt;/TableRow&gt;
  
              &lt;TableRow 
                  android:id="@+id/tablerow2"
                  android:layout_width="fill_parent" 
                  android:layout_height="0px" 
                  android:layout_weight="80"&gt;
              &lt;/TableRow&gt;
  
              &lt;TableRow 
                  android:id="@+id/tablerow3"
                  android:layout_width="fill_parent" 
                  android:layout_height="0px"
                  android:layout_weight="10"&gt;
  
                      &lt;TableRow
                          android:id="@+id/tablerow4"
                          android:layout_width="wrap_content" 
                          android:layout_height="fill_parent" 
                          android:layout_weight="50"&gt;
  
                              &lt;Button
                                  android:id="@+id/button1"
                                  android:layout_width="fill_parent" 
                                  android:layout_height="fill_parent"                                                                     
                                  android:text="Speak"&gt;
                              &lt;/Button&gt;
  
                      &lt;/TableRow&gt;
  
                      &lt;TableRow
                          android:id="@+id/tablerow5"
                          android:layout_width="wrap_content" 
                          android:layout_height="fill_parent" 
                          android:layout_weight="50"&gt;
  
                              &lt;Button
                                  android:id="@+id/button2"
                                  android:layout_width="fill_parent" 
                                  android:layout_height="fill_parent"                                 
                                  android:text="Listen"&gt;
                              &lt;/Button&gt;
  
                      &lt;/TableRow&gt;                         
  
              &lt;/TableRow&gt;
  
  &lt;/TableLayout&gt;  
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>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.</p>