Android Create aligned fields Layout

Question

Here's my issue I have a login and want to line up the EditText fields. See the mockup picture attached

.
I have tried a few ways and cannot figure out how to make the fields lineup.

I really hate layouts in Android I spend more time just messing with things to line up right. Wish they would just scrap it and use something more intuitive, as its more like using tables in HTML. So in advance thanks for your help and cheers!

Answer 1

You could probably play around with RelativeLayout and get just what you want.

Here's an approximation with TableLayout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TableLayout
        android:layout_marginTop="40dip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
        <TableRow>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:padding="10dip"
                android:text="UserID:" />
            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="USER ID" />
        </TableRow>
        <TableRow>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:padding="10dip"
                android:text="Password:" />
            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="PASSWORD" />
        </TableRow>
    </TableLayout>
    <LinearLayout
        android:layout_marginTop="50dip"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="3"
        android:gravity="center">
        <Button
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="LOGIN" />
        <Button
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="REGISTER" />
    </LinearLayout>
</LinearLayout>

Answer 2

See if this works for you. It doesnt center quite perfectly but it does align well across multiple screen sizes.

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:background="#FFFF0000">
  <LinearLayout android:id="@+id/top_row"
            android:layout_height="wrap_content" 
            android:layout_alignParentTop="true"
            android:orientation="vertical" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_marginTop="25dip">
            <LinearLayout  android:layout_height="wrap_content"  android:orientation="horizontal" android:layout_width="fill_parent">
                <TextView android:layout_height="wrap_content" android:text="User Id" android:gravity="right" android:layout_marginRight="10dip" android:layout_width="fill_parent" android:layout_weight="2" android:textColor="#FF000000"></TextView>
                <EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:ems="10" android:layout_weight="1"></EditText>
            </LinearLayout>
            <LinearLayout  android:layout_height="wrap_content"  android:orientation="horizontal" android:layout_width="fill_parent">
                <TextView android:layout_height="wrap_content" android:text="Password" android:gravity="right" android:layout_marginRight="10dip" android:layout_width="fill_parent" android:layout_weight="2" android:textColor="#FF000000"></TextView>
                <EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:ems="10" android:layout_weight="1"></EditText>
            </LinearLayout>
  </LinearLayout>
  <LinearLayout
            android:layout_height="wrap_content" 
            android:orientation="horizontal" android:layout_width="wrap_content" android:layout_below="@+id/top_row" android:layout_centerHorizontal="true" android:layout_marginTop="20dip">
        <Button android:layout_width="wrap_content" android:text="LOGIN" android:layout_height="wrap_content" android:layout_marginRight="10dip"></Button>
        <Button android:text="REGISTER" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="10dip"></Button>
  </LinearLayout>
</RelativeLayout>

Here's what it looks like in my IDE...

Answer 3

You can do this quick and dirty using TableLayout, just add a TableRow with a TextView and a EditText for the userid and repeat the same for the password.

See http://developer.android.com/resources/tutorials/views/hello-tablelayout.html