Question

What is the easiest way to create a form layout like (say) this one:

.-----------------------------------------------.
|          First Field [    (EditText)    ]     |
|     Some Other field [    (EditText)    ]     |
|        A Third Field [    (EditText)    ]     |
.-----------------------------------------------.

I’m a little rusty with my Android, and can’t figure out how to get it right =(.

Details:

1. The whole thing is centered in its container.

2. The labels are horizontally right-aligned among themselves, and vertically center-aligned with their respective input boxes (though I couldn’t represent that in the plain-text above)

3. The input boxes are all the same size.

Bonus points if the EditTexts can shrink or grow up to a maximum width, keeping the layout as above 😀 so as to handle orientation changes without ugly oversized inputs.

Answer 1

Try this layout,

You should always consider using TableLayout for this kind of design than the RelativeLayout, so you can add any number of rows easily and also dynamically.

<TableLayout
            android:id="@+id/mainTable"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:paddingLeft="3dip"
            android:paddingRight="3dip"
            android:shrinkColumns="1"
            android:stretchColumns="*"
            android:visibility="gone" >

            <TableRow>

                <TextView
                    style="@style/ds_20_b_darkgray"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Label1: " >
                </TextView>

                <EditText
                    android:id="@+id/editT1"
                    style="@style/ds_20_b_black"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="right" >
                </EditText>
            </TableRow>

            <TableRow>

                <TextView
                    style="@style/ds_20_b_darkgray"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Label2: " >
                </TextView>

                <EditText
                    android:id="@+id/editT2"
                    style="@style/ds_20_b_black"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="right" >
                </EditText>
            </TableRow>
      </TableLayout> 

You may need to put the entire table layout inside a linearlayout or a RelativeLayout and make the table layout in the center and adjust the marginsif you wish.

I can modify it if this doesn’t satisfy your requirement.