Layout Problem in Android

Question

I am fairly new to android and am having some problems with a layout. Below is an approximation of what I want the layout to look like. (I would like the list to be below the screen at first so that the user can scroll down to see it.) However my code as it currently stands makes all of the views on the left only take up a quarter the screen instead of half, as depicted, even though I have all widths set to fill_parent.

Also, this layout seems to mess up the coordinate system on my custom view. Normally this wouldn't be much of an issue, but in this case I am using that view to draw a picture and the picture ends up in the wrong place. Does anybody have any idea how to resolve these issues?

Here is my code:

<?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">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<TableRow>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:orientation="vertical"
android:layout_width="fill_parent">
<TableRow>
 <TextView android:text="Resultant Force" android:id="@+id/resForceTitle"
  android:textSize="25dip" android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:padding="3dip"
  android:gravity="center" android:layout_span="2" />
</TableRow>
<TableRow>
 <TextView android:id="@+id/magText" android:text="Magnitude (N) ="
  android:textSize="15dip" android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:padding="3dip"
  android:gravity="center_vertical" android:layout_span="2" />
</TableRow>
<TableRow>
 <EditText android:id="@+id/magnitude" android:inputType="numberDecimal"
  android:layout_width="fill_parent" android:padding="3dip"
  android:layout_height="fill_parent" android:layout_span="2" />
</TableRow>
<TableRow>
 <TextView android:id="@+id/dirText" android:text="Angle (deg) ="
  android:layout_width="fill_parent" android:layout_height="fill_parent"
  android:textSize="15dip" android:gravity="center_vertical"
  android:layout_span="2" />
</TableRow>
<TableRow>
 <EditText android:id="@+id/direction" android:inputType="numberDecimal"
  android:layout_height="fill_parent" android:padding="3dip"
  android:layout_width="fill_parent" android:layout_span="2" />
</TableRow>
<TableRow>
 <Button android:id="@+id/pushButton" android:text="Add Force"
  android:layout_height="fill_parent" android:padding="3dip"
  android:layout_width="fill_parent" />
 <Button android:id="@+id/clearButton" android:text="Clear"
  android:layout_height="fill_parent" android:padding="3dip"
  android:layout_width="fill_parent" />
</TableRow>
</TableLayout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<android.physicsengine.AxisDrawing
 android:id="@+id/image" android:layout_width="fill_parent"
 android:layout_height="fill_parent" />
</FrameLayout>
</TableRow>
</TableLayout>
<ListView android:id="@android:id/list" android:layout_height="wrap_content"
android:padding="3dip" android:layout_width="fill_parent"
android:clickable="false" />
<TextView android:id="@android:id/empty" android:text="Add Forces to List Components"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:textSize="15dip" android:gravity="center_vertical" />
</LinearLayout>

Answer 1

From the look of your XML it looks like you misunderstand what fill_parent means. It means "be as big as my parent." Also, why are you using two nested TableLayouts? To divide the screen evenly in two you should use a horizontal LinearLayout and give each child (the TableLayout and your custom View) a width of 0dip and a layout_weight of 1:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TableLayout
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_height="wrap_content">
            ...
    </TableLayout>
    <android.physicsengine.AxisDrawing
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_height="wrap_content" />
</LinearLayout>

Answer 2

That is because you have entered android:layout_span="2" in your EditTexts. If you remove these all behaves more normally.

Then you can control left side by setting the width of EditText to 200dp for example... You can also use right margin of EditText to control the left column.

As for the coordinates in the custom view canvas they start from 0,0 in the top-right corner of it.