android: help creating tablelayout

Question

I have a hard time understanding the layout tutorial. I am not able to align columns on different rows. For example, what does 3dip mean in android:padding="3dip". The documentation says "Available units are: px (pixels), dp (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), mm (millimeters). ".

Specifically, I want to create a layout with top and bottom two rows, and the middle are lists. And I want the bottom row to stick to the bottom. e.g.,

---

title1 | title 2| title 3|

list 1

list 2

bottom 1 | bottom 2 |

My current xml looks very ugly (without the middle lists)

<?xml version="1.0" encoding="utf-8"?>

<TableRow>
    <TextView
         android:layout_width="wrap_content"
          android:gravity="center_horizontal"
        android:text="title 1"
         />
    <TextView
    android:layout_width="wrap_content"
     android:gravity="center_horizontal"
        android:text="title 2"

         />
        <TextView
         android:layout_width="wrap_content"
          android:gravity="center_horizontal"
        android:text="title 3"            
        />
</TableRow>
<View        android:layout_height="2dip"        
android:background="#FF909090" />
   <TableRow>
    <TextView
         android:layout_width="wrap_content"
          android:gravity="center_horizontal"
        android:text="bottom 1"
         />

        <TextView
         android:layout_width="wrap_content"
          android:gravity="center_horizontal"
        android:text="bottom 2"            
        />
</TableRow>

Answer 1

A TableLayout isn't really what you need for this. A TableLayout gives you something like Excel, where you have rows and columns.

Also, dip is the same as dp.

Possible Solution:

<?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:layout_height="wrap_content"
        android:id="@+id/TopRow"
        android:layout_width="fill_parent"
        android:orientation="horizontal">

        <TextView
            android:text="@+id/TextView01"
            android:id="@+id/TextView01"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:layout_weight="1" />
        <TextView
            android:text="@+id/TextView01"
            android:id="@+id/TextView01"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:layout_weight="1" />
        <TextView
            android:text="@+id/TextView01"
            android:id="@+id/TextView01"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:layout_weight="1" />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/Middle"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ListView
            android:id="@+id/ListView01"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:layout_height="fill_parent" />
        <ListView
            android:id="@+id/ListView02"
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:layout_weight="1" />

    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:orientation="horizontal"
        android:id="@+id/BottomRow">

        <TextView
            android:text="@+id/TextView01"
            android:id="@+id/TextView01"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:layout_weight="1" />
        <TextView
            android:text="@+id/TextView01"
            android:id="@+id/TextView01"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:layout_weight="1" />

    </LinearLayout>
</LinearLayout>

Answer 2

A RelativeLayout allows you to tell views to stick to the bottom or top, with the attributes layout_alignParentBottom="true" or layout_alignParentTop="true". See common layouts for more information on the RelativeLayout.

Answer 3

Your answerdoes not work that well, I wish people would stop posting the wrong answers. Here is one tip you can use. Use the merge tag to merge with the parent since the parent layout is most likely in FrameLayout mode anyway. Wrap one part in Linearlayout (your first two rows) then the last row leave will default to parent. Then use the android:layout_gravity="bottom" attribute. See layout example for more information.

Here is an example of mine with 3 text views and 2 seekbars I wanted the last text to layout on the bottom.

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout 
    android:id="@+id/LinearLayout01" 
    android:layout_height="wrap_content" 
    android:layout_gravity="top" 
    android:layout_width="fill_parent" 
    android:orientation="vertical">
  <TextView 
      android:layout_height="wrap_content" 
      android:autoText="false" 
      android:text="@string/color_font_text" 
      android:id="@+id/color_font_text" 
      android:layout_width="fill_parent" 
      android:textSize="20px" 
      android:textColor="#FF999999" 
      android:textStyle="bold" 
      android:gravity="center_horizontal"></TextView>
  <SeekBar
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_margin="10px"
       android:id="@+id/seekbar_font"
       android:max="100"
       android:progress="50"></SeekBar>
  <TextView 
      android:layout_height="wrap_content" 
      android:autoText="false" 
      android:text="@string/color_background" 
      android:id="@+id/color_background" 
      android:layout_width="fill_parent" 
      android:textSize="20px" 
      android:textColor="#FF999999" 
      android:textStyle="bold" 
      android:gravity="center_horizontal"></TextView>
  <SeekBar
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:id="@+id/seekbar_back"
       android:max="100"
       android:progress="50" android:layout_margin="10px"></SeekBar>
</LinearLayout>     
<TextView  
    android:id="@+id/color_example" 
    android:text="CURRENT COLOR"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:textSize="20px" 
    android:layout_gravity="bottom" 
    android:gravity="center_horizontal"/>

  </merge>

Answer 4

Another way to do this is to use RelativeLayout mixed with LinearLayout. In the Relative portion you reference the previous widget using the android:layout_below="@id/color_font_text" for example. This will lay the second widget, a SeekBar below the first TextView. Hope this helps!

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent" 
            android:layout_height="fill_parent" 
            xmlns:android="http://schemas.android.com/apk/res/android">
  <TextView 
      android:id="@+id/color_font_text" 
      android:text="@string/color_font_text" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:textSize="20px" 
      android:textColor="#FF999999" 
      android:textStyle="bold" 
      android:gravity="center_horizontal"></TextView>
  <SeekBar
       android:id="@+id/seekbar_font"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_margin="10px"
       android:layout_below="@id/color_font_text"
       android:max="100"
       android:progress="50"></SeekBar>
  <TextView 
      android:id="@+id/color_background" 
      android:text="@string/color_background" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@id/seekbar_font"
      android:textSize="20px" 
      android:textColor="#FF999999" 
      android:textStyle="bold" 
      android:gravity="center_horizontal"></TextView>
  <SeekBar
      android:id="@+id/seekbar_back"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_below="@id/color_background"
      android:max="100"
      android:progress="50" 
      android:layout_margin="10px"></SeekBar>
  <TextView  
    android:id="@+id/color_example" 
    android:text="CURRENT COLOR"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:layout_below="@id/seekbar_back"
    android:textSize="20px" 
    android:gravity="center_horizontal|center_horizontal"
    android:layout_centerInParent="true"/>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center">
    <Button 
        android:text="@string/color_button_save" 
        android:id="@+id/color_button_save" 
        android:layout_weight="1"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" />
    <Button 
        android:text="@string/color_button_cancel" 
        android:id="@+id/color_button_cancel"
        android:layout_weight="1" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" />

</LinearLayout>
 </RelativeLayout>