Layout design problem

Question

I was designing a layout but encountered a problem. Somehow, it has a empty space on the right of my tablelayout and I can't fill it. If anyone has an idea, then would you help me please?

Below is my layout xml and screenshot to show what exactly happes; by the way, the reason why I am using tablelayout is in order to put some items there using interaction with the user.

Thank you in advance

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<LinearLayout android:id="@+id/header" android:layout_height="wrap_content" android:layout_width="match_parent">
    <TextView android:id="@+id/header_life_title" android:textSize="20sp" android:text="Life: " android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
    <TextView android:id="@+id/header_life_value" android:textSize="20sp" android:text="20" android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
    <Button android:text="Inc." android:id="@+id/header_btn_inc" android:layout_width="wrap_content" android:layout_height="35dp" android:layout_gravity="center_vertical">
    <Button android:text="Dec." android:id="@+id/header_btn_dec" android:layout_width="wrap_content" android:layout_height="35dp"></Button>
    <Button android:text="Put L." android:id="@+id/header_btn_putLand" android:layout_width="wrap_content" android:layout_height="35dp"></Button>
    <Button android:text="Remove L." android:id="@+id/header_btn_removeLand" android:layout_width="wrap_content" android:layout_height="35sp">
    <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/land_space">
    </LinearLayout>
</LinearLayout>
    <ScrollView android:id="@+id/scrollView1" android:layout_height="wrap_content" android:layout_width="match_parent">
        <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/cardboard">
            <LinearLayout android:layout_height="40dp" android:layout_width="match_parent" android:id="@+id/layout_menu">
                <Spinner android:id="@+id/spinner_creature" android:layout_height="wrap_content" android:layout_width="150dp"></Spinner>
                <Button android:id="@+id/btn_creature" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Cast"></Button>
                <Spinner android:id="@+id/spinner_noncreature" android:layout_height="wrap_content" android:layout_width="wrap_content"></Spinner>
                <Button android:id="@+id/btn_noncreature" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Cast"></Button>
                <Button android:id="@+id/btn_delete" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Del."></Button>
            </LinearLayout>
            <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/tableRow_cardImage"><![enter image description here][1]/TableRow>
            <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/tableRow_cardData"></TableRow>
            <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/tableRow_cardImage2"></TableRow>
            <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/tableRow_cardData2"></TableRow>
        </TableLayout>
    </ScrollView>
</LinearLayout>

http://imageshack.us/m/52/2443/111iyr.jpg

Answer 1

You could use the LinearLayout's layout_weight attribute to force the views inside of it to take up the space left.

Setting the layout_weight attribute to "1" in for all child views will make them take up the remaining space equally:

<LinearLayout android:layout_height="40dp"
    android:layout_width="match_parent" android:id="@+id/layout_menu">
    <Spinner android:id="@+id/spinner_creature"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:layout_width="150dp"></Spinner>
    <Button android:id="@+id/btn_creature"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:layout_width="wrap_content" android:text="Cast"></Button>
    <Spinner android:id="@+id/spinner_noncreature"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:layout_width="wrap_content"></Spinner>
    <Button android:id="@+id/btn_noncreature"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:layout_width="wrap_content" android:text="Cast"></Button>
    <Button android:id="@+id/btn_delete"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:layout_width="wrap_content" android:text="Del."></Button>
</LinearLayout>

The width of the child views is set to wrap_content, so they won't get wider when you change the orientation of the phone, even though the parent has more space horizontally.
Using layout_weight you can set the portion for each child view how much from the parent's remaining space should fill.

For more reference: LinearLayout.LayoutParams