Design Surface
.NET developers building a user interface with WebForms, WinForms, or other applications are famil-iar with the concept of a design surface. With a design surface, you can use a set of controls to display data to the user. The Android Developer Tools contain an Eclipse plug-in that lets you create a user interface. However, this has not been integrated into Mono for Android and does not work with Visual Studio. Mono for Android does not have its own design surface at the time of this writing. It does offer IntelliSense for manually creating the user interface. However, given that manually creating the user interface is prone to errors, we recommend that you look for a high-level tool for creating your user inter-face, such as DroidDraw. DroidDraw has a website that you can use to build your app’s UI, as well as a downloadable Java application. For more information on DroidDraw, go to http://droiddraw.org. Figure 4-1 shows DroidDraw. The left side displays the user interface that has been defi ned. The top-right section shows the options you can set, allowing you to set the properties of the UI ele-ments. The bottom-right section shows the XML generated for the UI. The XML is not updated automatically; you must create it by clicking the Generate button.
FIGURE 4-1
CHOOSING A CONTROL LAYOUT
Android UIs have different layouts that can be used. A layout defi nes how its child controls are arranged onscreen. Android has fi ve standard layouts:
AbsoluteLayout places all controls at a defi ned location. This layout has been deprecated.
FrameLayout or RelativeLayout is suggested instead.
FrameLayout displays a single item, such as an image.
LinearLayout displays child controls along a single line, either horizontal or vertical.
RelativeLayout places controls at a location relative to other controls.
TableLayout displays controls in a row/column-style layout.
AbsoluteLayout
The AbsoluteLayout is the layout that allows a developer to place views at a defi ned location. The AbsoluteLayout has been deprecated. The FrameLayout or RelativeLayout is suggested instead.
Having said that, if you need to use the AbsoluteLayout, Listing 4-1 shows the necessary XML.
LISTING 4-1: AbsoluteLayout XML
This code is contained in Layouts\Layouts\Resources\Layout\absolute.axml
Choosing a Control Layout ❘ 63
Figure 4-2 shows the output of the AbsoluteLayout previously defi ned.
FIGURE 4-2
FrameLayout
FrameLayout is the simplest layout option. It is designed to display a single object on the screen. All elements within the FrameLayout are pinned to the top-left corner of the layout. If multiple elements are within a FrameLayout, they are drawn in the same location, and their displays interfere with each other.
LinearLayout
LinearLayout aligns all objects either vertically or horizontally. The direction displayed depends on the orientation attribute. All the elements are displayed one after the other. If the orientation attribute of LinearLayout is set to vertical (as shown in Listing 4-2), the UI displays vertically. If the orientation attribute of LinearLayout is set to horizontal, the UI displays horizontally.
LISTING 4-2: LinearLayout XML
<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout
android:id=”@+id/widget28”
android:layout_width=“fill_parent“
android:layout_height=“fill_parent“
xmlns:android=“http://schemas.android.com/apk/res/android“
android:orientation=“vertical“
>
continues
<Spinner
android:id=“@+id/widget27“
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
>
</Spinner>
<EditText
android:id=“@+id/widget29“
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:text=“EditText“
android:textSize=“18sp“
>
</EditText>
<AnalogClock
android:id=“@+id/widget30“
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
>
</AnalogClock>
</LinearLayout>
This code is contained in Layouts\Layouts\Resources\Layout\linear.axml
Figure 4-3 shows a sample LinearLayout displaying items vertically.
FIGURE 4-3
Creating a horizontal LinearLayout is simple. The value of android:orientation is changed to horizontal, as shown in Listing 4-3.
LISTING 4-2 (continued)
Choosing a Control Layout ❘ 65
LISTING 4-3: LinearLayout XML oriented horizontally
<?xml version=”1.0” encoding=”utf-8”?>
Figure 4-4 shows a sample horizontal LinearLayout.
RelativeLayout
With RelativeLayout, the child elements are positioned relative to the parent element or to each other, depending on the ID that is specifi ed (see Listing 4-4):
LISTING 4-4: RelativeLayout XML
</Spinner>
<EditText
android:id=“@+id/widget29“
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:text=“EditText“
android:textSize=“18sp“
android:layout_below=“@+id/widget27“
android:layout_toLeftOf=“@+id/widget27“
>
</EditText>
<AnalogClock
android:id=“@+id/widget30“
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:layout_centerVertical=“true“
android:layout_toLeftOf=“@+id/widget27“
>
</AnalogClock>
</RelativeLayout>
This code is contained in Layouts\Layouts\Resources\Layout\relative.axml
Figure 4-5 shows the output from a RelativeLayout.
FIGURE 4-5
LISTING 4-4 (continued)
Choosing a Control Layout ❘ 67
TableLayout
TableLayout arranges its elements into rows and columns. Conceptually, this is similar to an HTML table. With TableLayout, a number of TableRows are used to defi ne the TableLayout. Listing 4-5 shows an example of TableLayout:
LISTING 4-5: TableLayout XML
This code is contained in Layouts\Layouts\Resources\Layout\table.axml
Figure 4-6 shows a sample TableLayout.
FIGURE 4-6