Android - GUI layout

Question

I'm new to Android so not very good with GUi layout yet. I'm building a GUI for my app and just can't get it to behave the way I want. What I need is 4 buttons at the bottom of the screen stacked horizontally. Above the buttons I've placed a SurfaceView which I want to fill the rest of the screen. The result should be something like this (I hope this is clear):

-----------------
-               -
-               -
-               -
-               -
- SurfaceView   -
-               -
-               -
-               -
-----------------
 --- --- --- ---
 -B- -B- -B- -B-
 --- --- --- ---

The closeset I got was this:

<?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
        android:id="@+id/tableLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center" >
            <SurfaceView
                android:id="@+id/surfaceView1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center" >
            <LinearLayout
                android:id="@+id/linearLayout1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
                <Button
                    android:id="@+id/button2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Button" />
                <Button
                    android:id="@+id/button3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Button" />
                <Button
                    android:id="@+id/button4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Button" />
                <Button
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Button" />
            </LinearLayout>
        </TableRow>
    </TableLayout>
</LinearLayout>

Which unfortunately results in something like this:

-----------------
- SurfaceView   -
-----------------
 --- --- --- ---
 -B- -B- -B- -B-
 --- --- --- ---

Answer 1

<?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" >


            <SurfaceView
                android:id="@+id/surfaceView1"
                android:layout_width="fill_parent"
                android:layout_height="0dp" 
                android:layout_weight = "1"
            />

            <LinearLayout
                android:id="@+id/linearLayout1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
                <Button
                    android:id="@+id/button2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Button" />
                <Button
                    android:id="@+id/button3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Button" />
                <Button
                    android:id="@+id/button4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Button" />
                <Button
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Button" />
            </LinearLayout>

</LinearLayout>

try this.

layout_weight is a tag which works on the children of linear layout. the children will share the orientation measurement depending on weight if it is mentioned. In your case since the linear Layout is vertical, so they will share the height if weights are mentioned.

default weightSum of linearLayout is 1, so if you give 1 to any of the children, it takes the remaining space. And lets say parent has 2 children and their weights as 0.6 and 0.4, the first child will occupy 60% of the parent height and the rest 40% by second child.

Answer 2

Try using a relative layout for the topmost layout, and use alignParentBottom for your button bar layout.