Address Panel Post 1: Layout (xml)

This post will show the two xml files needed for the address panel. Both of these files should be added to the layout folder of your android project.

Image: Layout of the address panel

The panel consists of the following views:

• 5 TextViews to display the label for each field
• 4 EditTexts to store the address line 1, address line 2, city, and zip code
• 1 Spinner to store the state
• 1 Button to save the values to the database

The root element of the panel is a RelativeLayout.  It is stored in a file called addressform.xml.  The second post of this series will show you how to create the java file behind this xml file.

addressform.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:text="Address Line 1"
        android:layout_alignParentTop="true"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_marginLeft="20dip"
        android:layout_marginTop="10dip"
        android:id="@+id/lbl_addr1"></TextView>
    <EditText
        android:layout_width="fill_parent"
        android:layout_below="@+id/lbl_addr1"
        android:id="@+id/et_addr1"
        android:layout_height="wrap_content"
        android:hint="Address Line 1"
        android:inputType="text"
        android:layout_marginLeft="30dip"
        android:layout_marginRight="30dip"
        android:maxLines="1"
        android:textSize="18sp"></EditText>
    <TextView
        android:layout_width="wrap_content"
        android:text="Address Line 2"
        android:layout_below="@+id/et_addr1"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_marginLeft="20dip"
        android:layout_marginTop="5dip"
        android:id="@+id/lbl_addr2"></TextView>
    <EditText
        android:layout_width="fill_parent"
        android:layout_below="@+id/lbl_addr2"
        android:id="@+id/et_addr2"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:layout_marginLeft="30dip"
        android:layout_marginRight="30dip"
        android:maxLines="1"
        android:textSize="18sp"
        android:hint="Address Line 2"></EditText>
    <TextView
        android:layout_width="wrap_content"
        android:text="City"
        android:layout_below="@+id/et_addr2"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_marginLeft="20dip"
        android:layout_marginTop="5dip"
        android:id="@+id/lbl_city"></TextView>
    <EditText
        android:layout_width="fill_parent"
        android:inputType="text"
        android:layout_marginRight="30dip"
        android:layout_marginLeft="30dip"
        android:id="@+id/et_city"
        android:hint="City"
        android:maxLines="1"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_below="@+id/lbl_city"></EditText>

    <TableLayout
        android:layout_width="fill_parent"
        android:id="@+id/tableLayout1"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dip"
        android:layout_below="@+id/et_city"
        android:layout_marginTop="5dip">
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:text="State"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:id="@+id/lbl_state"
                android:layout_weight=".5"></TextView>
            <TextView
                android:layout_width="wrap_content"
                android:text="Zip Code"
                android:layout_marginLeft="10dip"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:id="@+id/lbl_zip"
                android:layout_weight=".5"></TextView>
        </TableRow>
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <Spinner
                android:layout_height="50dip"
                android:layout_width="80dip"
                android:maxWidth="80dip"
                android:id="@+id/sp_state"
                android:layout_marginLeft="10dip"
                android:layout_weight=".5"></Spinner>
            <EditText
                android:layout_weight=".5"
                android:layout_marginLeft="20dip"
                android:hint="Zip Code"
                android:id="@+id/et_zip"
                android:maxLines="1"
                android:inputType="text"
                android:layout_marginRight="30dip">
            </EditText>
        </TableRow>
    </TableLayout>

    <Button
        android:layout_width="wrap_content"
        android:id="@+id/btn_addr_save"
        android:text="Save"
        android:textSize="18sp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:minWidth="100dip"
        android:layout_marginBottom="10dip"></Button>
</RelativeLayout>

The only other xml file you need is one to set the layout for the items in your spinner. The layout will consist of a single textview element. Name this file spinner_entry.xml.

spinner_entry.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<TextView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="match_parent"
  android:textSize="25dip"
  android:textColor="#000"
  android:gravity="center">
</TextView>

That's it! You've added all the xml you need for your project. Move onto step two.//TODO add link