title: Having a TableRow take whatever height is left in an Android TableLayout
body: <p>I'm porting a board game from Windows Phone to Android and struggle a lot with the Android layout system.</p>
  
  <p>This is the layout of the main page on Windows Phone:
  <img src="https://i.stack.imgur.com/rALLZ.png" alt="Screenshot of designer"></p>
  
  <p>I have a Grid with row definitions like this:</p>
  
  <pre><code>&lt;Grid.RowDefinitions&gt;
      &lt;RowDefinition Height="Auto"/&gt;
      &lt;RowDefinition Height="*"/&gt;
  &lt;/Grid.RowDefinitions&gt;
  </code></pre>
  
  <p>This means the controls at the bottom get whatever height is left after the board in the top row has taken what it needs. The board size updates itself at runtime to use the smallest of it's width and height, so that it becomes a square.</p>
  
  <p>I'm almost getting what I want when using a RelativeLayout as root layout, but my problem with RelativeLayout as root layout is that the controls at the bottom ends up filling the entire screen.</p>
  
  <p>I've done several attempts to use a TableLayout as root layout with two TableRows as children, where the first TableRow has android:height="match_parent" or "wrap_content" and the second TableRow has android:height="wrap_content". Even though I set the board size at runtime, Android doesn't resize the TableRow like Windows Phone does, so the first TableRow takes up the entire screen.</p>
  
  <p><strong>How would an expert on the Android layout system attack a problem like this?</strong> I've got an alpha release up at Google Play that looks quite well on a 7" tablet, but on phones with high DPI screens it looks like this:
  <img src="https://i.stack.imgur.com/QmZvw.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>Update:</strong>
  As Luksprog suggested in a comment, I now use a LinearLayout with the first element having android:layout_height="0dp" and android:layout_weight="1" and the second part having android:layout_height="wrap_content". At first it didn't seem to do what I wanted, because the part at the bottom ended up taking the entire screen as I've experienced on several attempts before.</p>
  
  <p>However after doing some modifications to the "wrap_content" and "match_parent" settings of the elements inside the fragments, I now get a layout that is close to what I want, and it scales quite well on high DPI phones as long as I stick with px instead of dp values for all bitmaps (against all recommendations in the Android guidelines).</p>
  
  <p>Here's is the updated layout and a screenshot showing the result:</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="match_parent"
      android:layout_height="match_parent"&gt;
  &lt;!-- Board --&gt;
      &lt;EivindApps.Ludo.Droid.Views.BoardView
          android:id="@+id/boardView"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1" /&gt;
  &lt;!-- Game info layout --&gt;
      &lt;LinearLayout
          android:id="@+id/gameInfoLayout"
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"&gt;
      &lt;!-- Left column --&gt;
          &lt;LinearLayout
              android:orientation="vertical"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_weight="1"&gt;
          &lt;!-- Red player --&gt;
              &lt;fragment
                  android:name="EivindApps.Ludo.Droid.Views.PlayerInfoFragment"
                  android:id="@+id/redPlayerInfoFragment"
                  android:layout_margin="5dp"
                  android:layout_alignParentLeft="true"
                  android:layout_alignParentTop="true"
                  android:layout_height="wrap_content"
                  android:layout_width="wrap_content" /&gt;
          &lt;!-- Blue player --&gt;
              &lt;fragment
                  android:name="EivindApps.Ludo.Droid.Views.PlayerInfoFragment"
                  android:id="@+id/bluePlayerInfoFragment"
                  android:layout_margin="5dp"
                  android:layout_alignParentBottom="true"
                  android:layout_alignParentLeft="true"
                  android:layout_height="wrap_content"
                  android:layout_weight="0"
                  android:layout_width="wrap_content" /&gt;
          &lt;/LinearLayout&gt;
      &lt;!-- Middle column --&gt;
          &lt;LinearLayout
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"&gt;
          &lt;!-- Dice --&gt;
              &lt;fragment
                  android:name="EivindApps.Ludo.Droid.Views.DiceFragment"
                  android:id="@+id/diceFragment"
                  android:layout_centerHorizontal="true"
                  android:layout_centerVertical="true"
                  android:layout_height="wrap_content"
                  android:layout_width="wrap_content"
                  android:layout_gravity="center_vertical" /&gt;
          &lt;/LinearLayout&gt;
      &lt;!-- Right column --&gt;
          &lt;LinearLayout
              android:orientation="vertical"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_weight="1"&gt;
          &lt;!-- Yellow player --&gt;
              &lt;fragment
                  android:name="EivindApps.Ludo.Droid.Views.PlayerInfoFragment"
                  android:id="@+id/yellowPlayerInfoFragment"
                  android:layout_margin="5dp"
                  android:layout_alignParentRight="true"
                  android:layout_alignParentTop="true"
                  android:layout_height="wrap_content"
                  android:layout_width="wrap_content"
                  android:layout_toRightOf="@+id/redPlayerInfoFragment" /&gt;
          &lt;!-- Green player --&gt;
              &lt;fragment
                  android:name="EivindApps.Ludo.Droid.Views.PlayerInfoFragment"
                  android:id="@+id/greenPlayerInfoFragment"
                  android:layout_margin="5dp"
                  android:layout_alignParentRight="true"
                  android:layout_alignParentBottom="true"
                  android:layout_height="wrap_content"
                  android:layout_toRightOf="@+id/bluePlayerInfoFragment"
                  android:layout_width="wrap_content" /&gt;
          &lt;/LinearLayout&gt;
      &lt;/LinearLayout&gt;
  &lt;!-- End of game info layout --&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Zc798.png" alt="Screenshot of the layout above"></p>