Android XML Layout - Two Columns with rows and one bottom row

Question

I'm trying to create a two column layout with rows and one row at the bottom. So far I have achieved two columns with rows in them, but can't seem to figure out how to get the bottom row to show. The following is my code, commented out is how I'm trying to add the bottom row

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tracker_id"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background"
android:padding="10dp">

<!-- <ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="60dip"> -->

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:background="#ffffff">
    <ImageView 
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="6dip"
        android:src="@drawable/ic" />
    <Button 
        android:id="@+id/stop_button"
        android:text="@string/stop"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:paddingLeft="50dp"
        android:paddingRight="50dp"
        android:enabled="true" />
    <Button 
        android:id="@+id/pause_button"
        android:text="@string/pause"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:paddingLeft="50dp"
        android:paddingRight="50dp"
        android:enabled="true" />
    <ImageView 
        android:id="@+id/icon2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="6dip"
        android:src="@drawable/ic2" />
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:background="#000000">
    <TextView
        android:text="some text"
        android:textSize="15pt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:gravity="right" />
    <TextView
        android:text="more text"
        android:textSize="15pt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:gravity="right" />
</LinearLayout>

<!-- </ScrollView>

<RelativeLayout

    android:layout_width="fill_parent"
    android:layout_height="60dip"
    android:layout_marginTop="-55dp"
    >
    <TextView
        android:text="Bottom"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#ffffff" />
</RelativeLayout> -->

</LinearLayout>

Bellow is the layout I'm trying to achieve

---------------------
|  icon       text  |
|  button     text  |
|  button     text  |
|  icon       text  |
|                   |
|  more more text   |
---------------------

Solution 1

You need to wrap everything in a third LinearLayout with orientation="vertical" and add your TextView to the bottom of it.

In pseudo-layout:

<LinearLayout vertical>
    <LinearLayout horizontal>
        <LinearLayout vertical>
            ... column 1 ...
        </LinearLayout>
        <LinearLayout vertical>
            ... column 2 ...
        </LinearLayout>
    </LinearLayout>
    <TextView/>
</LinearLayout>

This is because you want your TextView to be vertically below your columns.

Solution 2

I think Matt answered your question the best, especially if you are just looking for a quick fix.

As B Mac mentions you may find the TableLayout useful and here are two more links that you may find useful.

1. Layout optimization: Relative Layout
2. Debugging and Profiling User Interfaces

Comments

[esausilva]

I haven't tried the TableLayout, but I do not think it suits my needs and don't plan on scrolling either. The left column is not related to the right column. In my example I just happened to put 4 items in each column. But thanks for your answer

[Dao Lam]

So do we put icon, button, button, and icon inside what you labeled "column1". And all the text inside "column2"?